28:null 29:["$","title",null,{"children":"Tile Cache Pruning | Jeshurun Hembd | Observable"}] 2e: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 } ]2f:[] 2c:{"id":"0b2551610e24a6d3","slug":"tile-cache-pruning","title":"Tile Cache Pruning","thumbnail":"94adb1315e946406d16b5f1281b7424035192c4cf8721ccb00ff62ff75a9c823","access_level":"public","create_time":"$D2019-09-26T04:19:48.650Z","update_time":"$D2019-10-03T16:10:41.144Z","view_time":null,"first_public_time":"$D2019-09-26T05:38:04.108Z","has_unpublished_edits":null,"fork":{"id":"b0a081381d6cf3a3","slug":"zoomable-map-with-tile-cache","title":"Zoomable Map with Tile Cache","owner":{"id":"54b0aa2cda468b5a","login":"jjhembd","name":"Jeshurun Hembd"}},"stars":3,"starred":false,"owner":{"type":"team","id":"54b0aa2cda468b5a","login":"jjhembd","name":"Jeshurun Hembd","avatar_url":"https://avatars-next.observableusercontent.com/d42857c40a13c8179e0491536477452e54d4f6808ec32ed4d8fbdad81c03758d","tier":"starter_2024"},"version":1103,"publish_version":1103,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e65ca212a169cf2","login":"jjhembd","name":"Jeshurun Hembd","avatar_url":"https://avatars-next.observableusercontent.com/d42857c40a13c8179e0491536477452e54d4f6808ec32ed4d8fbdad81c03758d","tier":null}],"members":[{"type":"individual","id":"4e65ca212a169cf2","login":"jjhembd","name":"Jeshurun Hembd","avatar_url":"https://avatars-next.observableusercontent.com/d42857c40a13c8179e0491536477452e54d4f6808ec32ed4d8fbdad81c03758d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Tile Cache Pruning","cells":[{"id":0,"value":"md`# Tile Cache Pruning`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`In [Zoomable Map with Tile Cache](https://observablehq.com/@jjhembd/zoomable-map-with-tile-cache), we used [d3-tile](https://github.com/d3/d3-tile) and [d3-zoom](https://github.com/d3/d3-zoom) to add slippy map interactivity to a basic tiled map. As in [Pieces of a Map](https://observablehq.com/@jjhembd/pieces-of-a-map), we were using [tile-rack](https://www.npmjs.com/package/tile-rack) as a cache to store recently-used tiles in memory. However, we weren't doing anything to prevent the cache from growing too large.\n\nIn this notebook, we build a tile metric function to determine which tiles to discard from the cache, and pass it to tile-rack's .trim method.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof mapContext = {\n const context = DOM.context2d(width, height);\n context.canvas.value = context;\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"md`There are currently **${numCachedTiles}** tiles in the cache.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"md`Tiles are discarded from the cache based on their \"distance\" from the bounds of the current map. The metric below assumes the following conventions for the horizontal distance:\n- dx < 0: part of input tile is within map\n- dx = 0: tile edge touches edge of map\n- dx = n: tile edge is n tiles away from edge of map\n\nOne horizontal \"tile distance\" unit is the size of a tile at the current map zoom level.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"function getTileMetric(tiles) {\n // Store coordinates of the corners of the map\n let [x1, y1, zoom] = d3.tileWrap(tiles[0]);\n let [x2, y2] = d3.tileWrap(tiles[tiles.length - 1]);\n // If straddling the antimeridian, force positive width\n let nTiles = 2 ** zoom;\n if (x2 < x1) x2 += nTiles;\n\n return function(tile) {\n let dz = zoom - tile.z;\n // Convert tile x, y to the equivalent values at the MAP zoom level\n let zoomFac = 2 ** dz;\n let tb = Object({\n x1: tile.x * zoomFac,\n x2: (tile.x + 1) * zoomFac,\n y1: tile.y * zoomFac,\n y2: (tile.y + 1) * zoomFac\n });\n\n // Compute horizontal distances. Be careful with the antimeridian\n let dx = Math.min(\n // Test for non-intersection with tile in raw position\n Math.max(x1 - tb.x2, tb.x1 - x2),\n // Re-test with tile shifted across antimeridian\n Math.max(x1 - (tb.x2 + nTiles), tb.x1 + nTiles - x2)\n );\n let dy = Math.max(y1 - tb.y2, tb.y1 - y2);\n\n return Object({ dx, dy, dz });\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"hdist = getTileMetric(tileset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"md`Tiles at higher zoom levels than the current map should also be discarded. Tiles at lower zoom levels are still useful, especially after rapid panning actions, since they can be stretched to cover the map while the new tiles are loading. The following metric combines the horizontal distance with a zoom penalty.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"function metric(tile) {\n let dist = hdist(tile);\n return Math.max(dist.dx, dist.dy) - 1.0 + 1.0 / 2 ** dist.dz;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"md`This combined metric can now be passed to the cache.trim method, along with a threshold distance. Tiles with a metric larger than this threshold will be discarded from the cache.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"numCachedTiles = cache.trim(metric, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"md`---\n## Appendix 1: Tile factory function and cache\nAs of v0.2.0, [tile-rack](https://www.npmjs.com/package/tile-rack) can construct its own basic tile factory function for raster data. The tile size still depends on a screen resolution check.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"cache = tileRack.initRasterCache(cacheTileSize, (z, x, y) =>\n tileSource.url(x, y, z)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"mutable cacheTileSize = tileSource.realTileSize();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"resolutionString = {\n let mqString = `(resolution: ${devicePixelRatio}dppx)`;\n matchMedia(mqString).addEventListener(\"change\", () => {\n mutable cacheTileSize = tileSource.realTileSize();\n });\n return mqString;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"md`## Appendix 2: Tile layout management`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"md`### Finding the right tiles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"tiler = 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"tileset = tiler(transform)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"mutable transform = 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md`### Updating the map position and zoom`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"zoom = d3\n .zoom()\n .scaleExtent([1 << 10, 1 << 26])\n .extent([[0, 0], [width, height]])\n .translateExtent([[-Infinity, -0.5], [Infinity, 0.5]])\n .on(\"zoom\", () => {\n mutable transform = d3.event.transform;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"d3\n .select(mapContext.canvas)\n .call(zoom)\n .call(zoom.transform, mutable transform)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"md`### Rendering to the canvas\nThis brute-force animation trick seems inefficient, as it redraws the whole map on every frame. But the \"smarter\" flow, redrawing only on changes to the tileset or on \"tileLoaded\" events, is actually slower to update after rapid panning and zooming.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"animate = {\n while (true) yield drawTiles(mapContext);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"//upate = {\n// drawTiles(mapContext, tileset);\n//}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"//factory.element.addEventListener(\n// \"tileLoaded\",\n// () => drawTiles(mapContext, tileset),\n// false\n//)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"function drawTiles(ctx) {\n ctx.clearRect(0, 0, width, height);\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`## Appendix 3: Imports and other constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"import { drawTileBox } from \"@jjhembd/zoomable-map-with-tile-cache\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"function rescalePixels(cssTileSize) {\n return devicePixelRatio > 1 ? 2 * cssTileSize : cssTileSize;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"tileRack = import(\"tile-rack@0.2.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"