31:T65d,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); let fbs = d3.select(this) .selectAll("foreignObject") .data(tiles, d => d) .join("foreignObject") .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) let bodies = fbs.append("xhtml:body") .style("margin","0") .style("border","1px solid steelblue") .style("width","100%") .style("height","100%") bodies.append("canvas").each((d,i,j) => { let canvas = j[i] if (!canvas.__rendered__) { let ctx = canvas.getContext('2d') ctx.font = "20px sans-serif" ctx.fillText("my tile is " + d,5,20) canvas.__rendered__ = true } }) }); } return svg.node(); }32:[] 2f:{"title":"Seamless Zoomable Map Tiles (Canvas)","cells":[{"id":0,"value":"md`# Seamless Zoomable Map Tiles (Canvas)\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":"ojs"},{"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 = [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.openstreetmap.org/${z}/${x}/${y}.png`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}