2b:null 2c:["$","title",null,{"children":"Zoomable map tiles | pbogden | Observable"}] 31: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 + ")"; } }32:[] 2f:{"id":"bceffbb207c190d0","slug":"zoomable-map-tiles","title":"Zoomable map tiles","thumbnail":"36f725f0d52f44013d9a11693bd57d4baeff94fc50605ffab098cf90b316e797","access_level":"public","create_time":"$D2019-05-15T14:08:10.840Z","update_time":"$D2019-05-15T20:59:52.816Z","view_time":null,"first_public_time":"$D2019-05-15T21:00:54.810Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f49bbe5451a36df9","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":"starter_2024"},"version":110,"publish_version":110,"role":null,"authored":false,"authors":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null}],"members":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":17,"value":"map = html`

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