index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inverse Projection</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
</head>
<body>
<style>
body {
margin: 0;
}
svg {
background-color: #4B4B55;
cursor: crosshair;
}
.sphere {
fill: none;
stroke: #d6ff9f;
}
.coords {
stroke: none;
fill: #8DBD0C;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.land {
fill: #8DBD0C;
fill-opacity: 0.25;
stroke: #8DBD0C;
stroke-width: 1;
}
</style>
<div id="map-container"></div>
<script>
var width = 960,
height = 480;
var div = d3.select('#map-container'),
svg = div.append('svg');
svg.attr('width', width).attr('height', height);
var label = svg.append('text')
.classed('coords', true)
.attr('x', 20)
.attr('y', 30);
var projection = d3.geo.equirectangular()
.translate([width / 2, height / 2]);
var pathGenerator = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule()
.step([20, 20]);
d3.json('land.topojson', function(err, data) {
if (err) { throw err; }
var features = topojson.feature(data, data.objects.land);
var sphere = svg.selectAll('path.sphere').data([{type: 'Sphere'}]);
sphere.enter().append('path').classed('sphere', true);
sphere.attr('d', pathGenerator);
sphere.exit().remove();
var land = svg.selectAll('path.land').data([features]);
land.enter().append('path').classed('land', true);
land.attr('d', pathGenerator);
land.exit().remove();
});
svg.on('mousemove', function(ev) {
var pos = d3.mouse(svg.node()),
px = pos[0],
py = pos[1];
var coords = projection.invert([px, py]);
var lon = coords[0].toFixed(4),
lat = coords[1].toFixed(4);
label.text([lat, lon].join(', '));
});
</script>
</body>
</html>
Makefile
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip
ne_110m_land.zip:
curl -LO $(URL)
ne_110m_land.shp: ne_110m_land.zip
unzip ne_110m_land.zip
touch ne_110m_land.shp
land.geojson: ne_110m_land.shp
ogr2ogr -f GeoJSON land.geojson ne_110m_land.shp
land.topojson: land.geojson
topojson -p -o land.topojson land.geojson
clean:
rm ne_110m_land*