| license: gpl-3.0 |
Using d3.geo.tile to display raster image tiles underneath some TopoJSON vectors, and d3.behavior.zoom for pan & zoom. This version reprojects the geometry on interaction; compare to updating the transform. See another variation of this example with points, showing the U.S. State Capitals; also see the static version.
Tiles copyright OpenStreetMap contributors.
| d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t}; |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| path { | |
| fill: none; | |
| stroke: red; | |
| stroke-linejoin: round; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="d3.geo.tile.min.js"></script> | |
| <script> | |
| var width = Math.max(960, window.innerWidth), | |
| height = Math.max(500, window.innerHeight); | |
| var tile = d3.geo.tile() | |
| .size([width, height]); | |
| var projection = d3.geo.mercator() | |
| .scale((1 << 12) / 2 / Math.PI) | |
| .translate([width / 2, height / 2]); | |
| var center = projection([-100, 40]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var zoom = d3.behavior.zoom() | |
| .scale(projection.scale() * 2 * Math.PI) | |
| .scaleExtent([1 << 11, 1 << 14]) | |
| .translate([width - center[0], height - center[1]]) | |
| .on("zoom", zoomed); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var raster = svg.append("g"); | |
| var vector = svg.append("path"); | |
| d3.json("/mbostock/raw/4090846/us.json", function(error, us) { | |
| if (error) throw error; | |
| svg.call(zoom); | |
| vector.datum(topojson.mesh(us, us.objects.states)); | |
| zoomed(); | |
| }); | |
| function zoomed() { | |
| var tiles = tile | |
| .scale(zoom.scale()) | |
| .translate(zoom.translate()) | |
| (); | |
| projection | |
| .scale(zoom.scale() / 2 / Math.PI) | |
| .translate(zoom.translate()); | |
| vector | |
| .attr("d", path); | |
| var image = raster | |
| .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")") | |
| .selectAll("image") | |
| .data(tiles, function(d) { return d; }); | |
| image.exit() | |
| .remove(); | |
| image.enter().append("image") | |
| .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][(d[0] + d[1] + d[2]) % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) | |
| .attr("width", 1) | |
| .attr("height", 1) | |
| .attr("x", function(d) { return d[0]; }) | |
| .attr("y", function(d) { return d[1]; }); | |
| } | |
| </script> |
