31:T499,map = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const tile = d3.tile() .extent([[0, 0], [width, height]]) .tileSize(512) .clampX(false); const zoom = d3.zoom() .scaleExtent([1 << 8, 1 << 22]) .extent([[0, 0], [width, height]]) .on("zoom", (event) => zoomed(event.transform)); const levels = svg.append("g") .attr("pointer-events", "none") .selectAll("g") .data(deltas) .join("g") .style("opacity", showlayers ? 0.3 : null); svg .call(zoom) .call(zoom.transform, mutable transform); function zoomed(transform) { mutable transform = transform; levels.each(function(delta) { const tiles = tile.zoomDelta(delta)(transform); d3.select(this) .selectAll("image") .data(tiles, d => d) .join("image") .attr("xlink:href", d => url(...d3.tileWrap(d))) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); }); } return svg.node(); }32:[] 2f:{"title":"Seamless zoomable map tiles","cells":[{"id":0,"value":"

Seamless zoomable map tiles

D3 › Gallery

\n\n# Seamless zoomable map tiles\n\nThis notebook avoids the flickering in [Zoomable map tiles](/@d3/zoomable-map-tiles) by adding [low-resolution](/@d3/tile-zoomdelta) tiles under the main tiles. During zoom, these larger tiles may be visible while the new tiles load in lieu of the white background. This technique also mostly fixes the [subpixel gap issue](/d/32027f96a5d4aa89).\n\nThe marginal cost of the low-resolution tiles is negligible for a zoom delta less than -2; for -1 it is about a quarter the cost of 0. The deltas are defined below; -100 forces the use of the *z*=0 “world” tile. Try editing to see the effect of different deltas.","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"viewof showlayers = {\n const form = html``;\n form.i.onchange = () => {\n form.value = form.i.checked;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.i.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"deltas = [-100, -4, -1, 0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"mutable transform = d3.zoomIdentity.translate(width >> 1, height >> 1).scale(1 << 12)","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"// Kartendaten: © [OpenStreetMap](https://openstreetmap.org/copyright)-Mitwirkende, SRTM | Kartendarstellung: © [OpenTopoMap](http://opentopomap.org/) (CC-BY-SA)\nurl = (x, y, z) => `https://tile.opentopomap.org/${z}/${x}/${y}.png`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"height = 600 // note: observable sets a responsive *width*","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}