30:T7d3,{ var pi = Math.PI, tau = 2 * pi; // Initialize the projection to fit the world in a 1×1 square centered at the origin. var projection = d3.geoMercator() .scale(1 / tau) .translate([0, 0]); var path = d3.geoPath() .projection(projection); var tile = d3.tile() .size([width, height]); var zoom = d3.zoom() .scaleExtent([1 << 11, 1 << 14]) .on("zoom", zoomed); var svg = d3.select(map).select("svg") .attr("width", width) .attr("height", height); // Compute the projected initial center. var center = projection([-98.5, 39.5]); var raster = svg.append("g"); // Apply a zoom transform equivalent to projection.{scale,translate,center}. svg .call(zoom) .call(zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(1 << 12) .translate(-center[0], -center[1])); function zoomed() { var transform = d3.event.transform; var tiles = tile .scale(transform.k) .translate([transform.x, transform.y]) (); projection .scale(transform.k / tau) .translate([transform.x, transform.y]); var image = raster .attr("transform", stringify(tiles.scale, tiles.translate)) .selectAll("image") .data(tiles, function(d) { return d; }); image.exit().remove(); image.enter().append("image") .attr("xlink:href", function(d) { return "https://stamen-tiles-" + "abc"[d[1] % 3] + ".a.ssl.fastly.net/terrain/" + d[2] + "/" + d[0] + "/" + d[1] + (devicePixelRatio > 1 ? "@2x" : "") + ".png"; }) .attr("x", function(d) { return d[0] * 256; }) .attr("y", function(d) { return d[1] * 256; }) .attr("width", 256) .attr("height", 256); } function stringify(scale, translate) { var k = scale / 256, r = scale % 1 ? Number : Math.round; return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")"; } }31:[] 2e:{"title":"Zoomable map tiles","cells":[{"id":0,"value":"md`# Zoomable map tiles\n\nAdapted from [Raster & Vector I](https://observablehq.com/@d3/raster-vector), [Raster & Vector II](http://bl.ocks.org/mbostock/5342063), and [Zoomable Map Tiles](http://bl.ocks.org/mbostock/4132797).\n\n[d3-tile API](https://github.com/d3/d3-tile) -- github`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"map = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"height = 500 * width / 960;","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@0.0.3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3.zoom","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}