Skip to content

Instantly share code, notes, and snippets.

@iamkevinv
Forked from sfinktah/index.html
Last active January 17, 2017 10:47
Show Gist options
  • Save iamkevinv/5af87b4e8ace557cb4b10bbfe7f7dab4 to your computer and use it in GitHub Desktop.
Save iamkevinv/5af87b4e8ace557cb4b10bbfe7f7dab4 to your computer and use it in GitHub Desktop.
d3-map-visible-area-coordinates
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
.info {
position: absolute;
bottom: 10px;
left: 10px;
background-color: yellow;
}
</style>
<body>
<div id="map">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>
<script>
winWidth = window.innerWidth;
winHeight = window.innerHeight;
projection = d3.geo.mercator()
.translate([0, 0])
.scale(winWidth / 2 / Math.PI);
zoom = d3.behavior.zoom()
.scaleExtent([1, 50])
.on("zoom", manageMap);
path = d3.geo.path()
.projection(projection);
svg = d3.select("#map").append("svg")
.attr("viewBox", "0 0 " + winWidth + " " + winHeight)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", "translate(" + winWidth / 2 + "," + winHeight / 2 + ")")
.call(zoom);
info = d3.select("#map").append("div")
.attr("class", "info");
g = svg.append("g")
.on("mousemove", mousemoved)
;
// d3.json("../mapdata/world-110m.json", function(error, world) {
d3.json("/mbostock/raw/4090846/world-110m.json", function(error, world) {
g.append("path")
.datum(topojson.feature(world, world.objects.countries))
.attr("class", "land")
.attr("d", path);
g.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
function mousemoved() {
info.text(getScreenBounds().join(', '));
}
function getScreenBounds() {
return [getPoint(0,0), getPoint()];
}
function getPoint(x,y) {
if (x == null) x = winWidth;
if (y == null) y = winHeight;
var container = g.node();
var svg = container.ownerSVGElement || container;
var point = svg.createSVGPoint();
point.x = x, point.y = y;
point = point.matrixTransform(container.getScreenCTM().inverse());
return formatLocation(projection.invert([point.x, point.y]), zoom.scale());
}
function formatLocation(p, k) {
var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
+ (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
}
function manageMap() {
var t = d3.event.translate,
s = d3.event.scale;
t[0] = Math.min(winWidth / 2 * (s - 1), Math.max(winWidth / 2 * (1 - s), t[0]));
t[1] = Math.min(winHeight / 2 * (s - 1) + 230 * s, Math.max(winHeight / 2 * (1 - s) - 230 * s, t[1]));
zoom.translate(t);
g.style("stroke-width", 1/s).attr("transform", "translate(" + t + ")scale(" + s + ")");
svg.select("g").selectAll("circle")
.style( 'fill', 'blue' )
.attr("cx", function(d) { return projection([d.lng, d.lat])[0]; })
.attr("cy", function(d) { return projection([d.lng, d.lat])[1]; })
.attr("r", 11/s);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment