31:T8fd,tileOptions = [ { name: "CartoDB Voyager", url: (x, y, z) => `https://${ "abc"[Math.abs(x + y) % 3] }.basemaps.cartocdn.com/rastertiles/voyager/${z}/${x}/${y}${ devicePixelRatio > 1 ? "@2x" : "" }.png`, cssTileSize: () => 256, realTileSize: () => rescalePixels(256), }, { name: "Stamen Terrain", url: (x, y, z) => `https://stamen-tiles-${ "abc"[Math.abs(x + y) % 3] }.a.ssl.fastly.net/terrain/${z}/${x}/${y}${ devicePixelRatio > 1 ? "@2x" : "" }.png`, cssTileSize: () => 256, realTileSize: () => rescalePixels(256), }, { name: "Stamen Toner", url: (x, y, z) => `https://stamen-tiles-${ "abc"[Math.abs(x + y) % 3] }.a.ssl.fastly.net/toner/${z}/${x}/${y}${ devicePixelRatio > 1 ? "@2x" : "" }.png`, cssTileSize: () => 256, realTileSize: () => rescalePixels(256), }, { name: "Stamen Toner (hybrid)", url: (x, y, z) => `https://stamen-tiles-${ "abc"[Math.abs(x + y) % 3] }.a.ssl.fastly.net/toner-hybrid/${z}/${x}/${y}${ devicePixelRatio > 1 ? "@2x" : "" }.png`, cssTileSize: () => 256, realTileSize: () => rescalePixels(256), }, { name: "Stamen Toner (lite)", url: (x, y, z) => `https://stamen-tiles-${ "abc"[Math.abs(x + y) % 3] }.a.ssl.fastly.net/toner-lite/${z}/${x}/${y}${ devicePixelRatio > 1 ? "@2x" : "" }.png`, cssTileSize: () => 256, realTileSize: () => rescalePixels(256), selected: true }, { name: "Stamen Watercolor", url: (x, y, z) => `https://stamen-tiles-${ "abc"[Math.abs(x + y) % 3] }.a.ssl.fastly.net/watercolor/${z}/${x}/${y}.png`, cssTileSize: () => 256, realTileSize: () => 256, // No @2x tile scaling on hi-res screens }, { name: "OSM Mapnik", url: (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.tile.osm.org/${z}/${x}/${y}.png`, cssTileSize: () => 256, realTileSize: () => 256, // No @2x tile scaling on hi-res screens }, { name: "Wikimedia Maps", url: (x, y, z) => `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png`, cssTileSize: () => 256, realTileSize: () => 256, // No @2x tile scaling on hi-res screens } ]32:[] 2f:{"title":"Problems with Mutable Values","cells":[{"id":0,"value":"md`# Problems with Mutable Values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`In this notebook, we tried to understand [d3-tile](https://github.com/d3/d3-tile) by looking at some of its properties. This was challenging because we needed to update and use the tiles object in the same cell, while still maintaining a live, inspectable value in another cell.\n\nThe code below follows a simple suggestion from [@jashkenas](https://observablehq.com/@jashkenas). A more conceptual refactoring suggested by [@mbostock](https://observablehq.com/@mbostock) was implemented in the original notebook [Zoomable Map with Tile Cache](https://observablehq.com/@jjhembd/zoomable-map-with-tile-cache).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`## 1. Tile source`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof tileSource = {\n const form = html`\n \n `;\n let deviceFactor = 1;\n form.i.onchange = () => {\n form.value = tileOptions[form.i.selectedIndex];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.i.selectedIndex = Math.max(0, tileOptions.findIndex(o => o.selected));\n form.value = tileOptions[form.i.selectedIndex];\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`## 2. Tile factory function\nWe borrow the buildFactory method from [Pieces of a Map](https://observablehq.com/@jjhembd/pieces-of-a-map).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"factory = buildFactory((z, x, y) => tileSource.url(x, y, z))","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`## 3. Tile cache\nWe again use the [tile-rack](https://www.npmjs.com/package/tile-rack) module. Note that this resolves the flickering issues observed in [Zoomable Map Tiles](https://observablehq.com/@d3/zoomable-map-tiles). If a requested tile is not ready yet, the cache will *synchronously* return a lower-resolution parent tile, with no delay in the rendering.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"cache = tileRack.initCache(tileSource.realTileSize(), factory)","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"md`## 4. Tile layout manager\nWe use [d3-tile](https://github.com/d3/d3-tile) to get the indices of the tiles needed for our viewport, along with translation and scaling information.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"tile = d3\n .tile()\n .tileSize(tileSource.cssTileSize())\n .size([width, height])\n .clampX(false) // Allow panning across longitude 180 degrees","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"md`The returned tile object is a little hard to decipher. It is a *function* that returns an array of tile indices, when called with a *transform function* as an argument.\n\nWe can define our initial transform from a [longitude, latitude] pair and a zoom level, using a projection:`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3\n .geoMercator()\n .center([-122.4183, 37.7750])\n .scale(Math.pow(2, 21) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"initialTransform = d3.zoomIdentity\n .translate(projection([0, 0])[0], projection([0, 0])[1])\n .scale(projection.scale() * 2 * Math.PI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"md`To dynamically update the transform function when the map is panned or zoomed, we use [d3-zoom](https://github.com/d3/d3-zoom). The zoom object, however, must be attached to the rendering canvas, so the remaining bits are all jumbled together into the next cell.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"md`We try defining the tileset outside, as a mutable value, so we can look at the scale property.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"mutable globalTileSet = tile(initialTransform)","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"globalTileSet.scale","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"map = {\n const context = DOM.context2d(width, height);\n\n // Set up zooming, and attach it to the canvas\n const zoom = d3\n .zoom()\n .scaleExtent([1 << 8, 1 << 26])\n .extent([[0, 0], [width, height]])\n .on(\"zoom\", () => zoomed(d3.event.transform));\n d3.select(context.canvas)\n .call(zoom)\n .call(zoom.transform, initialTransform); // Sets initial zoom transform\n\n function zoomed(transform) {\n // Update the set of tiles when the transform changes\n mutable globalTileSet = tile(transform);\n }\n\n // Redraw the canvas on each animation frame, in case the tiles have updated\n while (true) {\n context.clearRect(0, 0, width, height);\n drawTiles(context, mutable globalTileSet);\n yield context.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"md`For rendering, we are using the following Canvas function. Note that rendering to Canvas avoids the subsample gap issue observed in [Zoomable Map Tiles](https://observablehq.com/@d3/zoomable-map-tiles). (See [Fil's notebook](https://observablehq.com/d/32027f96a5d4aa89) for a fix using SVG filters).`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"function drawTiles(ctx, tileset) {\n let scale = tileset.scale;\n // Edit translation: make sure the first tile starts at an integer pixel coordinate\n const tx = Math.round(tileset.translate[0] * scale) / scale;\n const ty = Math.round(tileset.translate[1] * scale) / scale;\n // If we are on an integer zoom level, all tiles will now be pixel-aligned\n\n for (const [x, y, z] of tileset) {\n const [xw, yw, zw] = d3.tileWrap([x, y, z]);\n let tileBox = cache.retrieve([zw, xw, yw]);\n if (!tileBox) continue;\n drawTileBox(ctx, tileBox, x + tx, y + ty, scale);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"md`For drawing each tile, we use the Canvas drawImage method. Recall that [tile-rack](https://www.npmjs.com/package/tile-rack) sometimes returns a lower-resolution parent tile. The tiles come in a box, with cropping info indicating which part of the tile to use.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"function drawTileBox(ctx, box, x, y, scale) {\n ctx.drawImage(\n box.tile.img,\n box.sx,\n box.sy,\n box.sw,\n box.sw,\n x * scale,\n y * scale,\n scale,\n scale\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`## Appendix`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"function rescalePixels(cssTileSize) {\n return devicePixelRatio > 1 ? 2 * cssTileSize : cssTileSize;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"import {buildFactory} from \"@jjhembd/pieces-of-a-map\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"tileRack = import(\"tile-rack@0.0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}