28:null 29:["$","title",null,{"children":"Vector Map Rendering | Jeshurun Hembd | Observable"}] 2e:T44c,md`## Time management For smooth [jank-free](http://jankfree.org/) panning and zooming, the entire map must be rendered in less than 1/60 of a second, or 16 milliseconds. This is challenging with vector tiles, since there is a lot of work to be done on each tile. Here are the main tasks, along with rough time estimates: | Processing Task | Time (ms) --- | --- | ---: 1. | Parse the .mvt | 8 2. | Convert to GeoJSON | 30 3. | Filter features | 18 4. | Construct paths | 7 5. | Set Canvas state, draw | 1 | **TOTAL** | **54** Steps 1-3 can be delegated to [Worker threads](https://developer.mozilla.org/en-US/docs/Web/API/Worker), to avoid blocking user interaction on the main thread. The [tile-mixer](https://www.npmjs.com/package/tile-mixer) module manages this part. The key is how to manage steps 4 and 5. These are commonly done together, but that would quickly go over 16ms for a map displaying several tiles. Instead, we store the result of step 4 (the constructed paths) when a tile first loads. Then, when re-drawing the tile due to a pan or zoom action, we only need to repeat step 5. `2f:T73f,md`## Pre-computing Path2D objects Constructing paths, as a distinct sub-step of [Canvas 2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) drawing, is something I was not aware of until recently. Consider this simple sequence to draw a polyline feature such as a highway: \`\`\`javascript function renderLineData(ctx, tile, zoom) { // Set Canvas state based on style document ctx.lineWidth = style.paint["line-width"](zoom); ctx.strokeStyle = style.paint["line-color"](zoom); ctx.beginPath(); geoPath(tile.data); // Use d3.geoPath to construct the path ctx.stroke(); } \`\`\` In this case, the features are laid out in the context's *default Path*. That means the current Path has to be drawn to the Canvas immediately, because the next tile's features will overwrite the default Path. And both steps have to be repeated every time the feature changes position on the Canvas. The [Path2D API](https://developer.mozilla.org/en-US/docs/Web/API/Path2D) lets us explicitly decouple feature layout from the drawing, by building Path objects independently of the rendering context. \`\`\`javascript tile.path = constructPath(tile.data); renderLinePath(ctx, tile, zoom); function constructPath(data) { // This geoPath was initialized with context = null. Thanks @fil for the tip let pathString = geoPath(tile.data); let path = new Path2D(pathString); return path; } function renderLinePath(ctx, tile, zoom) { // Set Canvas state based on style document ctx.lineWidth = style.paint["line-width"](zoom); ctx.strokeStyle = style.paint["line-color"](zoom); ctx.stroke(tile.path); } \`\`\` The constructPath step can now be done once, when the tile is loaded. Drawing this pre-constructed Path on the Canvas can then be done very quickly, which enables fast re-drawing when the map is panned or zoomed. `30:T4ab,function initSources(style) { const queue = chunkedQueue.init(); const { sources, layers } = style; const getters = {}; const workerMonitors = []; const listenerDiv = DOM.element("div"); Object.entries(sources).forEach(([key, source]) => { let loader = source.type === "vector" ? initVectorLoader(key, source) : initRasterLoader(source); let tileFactory = buildFactory(source, loader, listenerDiv); getters[key] = initSource({ source, tileFactory }); }); function initVectorLoader(key, source) { let subset = layers.filter( l => l.source === key && l.type !== "fill-extrusion" ); let loader = tileMixer.initTileMixer({ source, layers: subset, queue }); workerMonitors.push(loader.workerTasks); return loader; } function getTilesets(viewpt, transfm) { const tilesets = {}; Object.entries(getters).forEach(([key, getter]) => { tilesets[key] = getter.getTiles(viewpt, transfm); }); queue.sortTasks(); return tilesets; } return { getTilesets, workerTasks: () => workerMonitors.reduce((sum, counter) => sum + counter(), 0), queuedTasks: () => queue.countTasks() }; }31:T661,function initSource({ source, tileFactory }) { const { type, tileSize = 512, minzoom = 0, maxzoom = 30 } = source; const tileCache = tileRack.initCache(tileSize, tileFactory); var numTiles = 0; // Set up the tile layout const layout = d3tileAlternate .tile() .tileSize(tileSize * Math.sqrt(2)) // Don't let d3-tile squeeze the tiles .maxZoom(maxzoom) .clampX(false); // Allow panning across the antimeridian function getTiles(viewport, transform) { // Get the grid of tiles needed for the current viewport // TODO: Don't order tiles if they won't be displayed at the current zoom!! layout.size(viewport); let tiles = layout(transform); let metric = getTileMetric(layout, tiles, 1.5); let dropCondition = tile => metric(tile) > 0.9; // Retrieve a tile box for every tile in the grid const grid = tiles.map(([x, y, z]) => { const [xw, yw, zw] = d3.tileWrap([x, y, z]); const box = tileCache.retrieve([zw, xw, yw], dropCondition); if (!box) return; // Add tile indices to returned box return Object.assign(box, { x, y, z }); }); // Avoid seams between tiles: round coordinate transform to the nearest pixel // TODO: Problematic if different sources have different tile sizes! let tilePixels = Math.round(tiles.scale * devicePixelRatio); grid.scale = tilePixels / devicePixelRatio; grid.translate = tiles.translate.map( x => Math.round(x * tilePixels) / tilePixels ); // Prune the cache numTiles = tileCache.trim(metric, 0.9); return grid; } return { getTiles, numTiles: () => numTiles }; }32:T4f0,function buildFactory(source, loader, listenerDiv) { const { minzoom = 0, maxzoom = 30, bounds = [-180, -90, 180, 90], scheme = "xyz" } = source; // Convert bounds to Web Mercator (the projection ASSUMED by tilejson-spec) let [xmin, ymax] = projMercator.lonLatToXY([], bounds.slice(0, 2)); let [xmax, ymin] = projMercator.lonLatToXY([], bounds.slice(2, 4)); if (scheme === "tms") [ymin, ymax] = [ymax, ymin]; return { create }; function create(z, x, y) { // Exit if out of bounds if (z < minzoom || maxzoom < z) return; let zFac = 1 / 2 ** z; if ((x + 1) * zFac < xmin || x * zFac > xmax) return; if ((y + 1) * zFac < ymin || y * zFac > ymax) return; let id = [z, x, y].join("/"); const tile = { z, x, y, id, priority: 0 }; function callback(err, data) { if (err) return; // console.log(err); tile.data = data; tile.rendered = true; // Should be .ready -- requires change to tile-rack listenerDiv.dispatchEvent(new Event("tileLoaded")); } const getPriority = () => tile.priority; const loadTask = loader.request({ z, x, y, getPriority, callback }); tile.cancel = () => { loadTask.abort(); tile.canceled = true; }; return tile; } }33:T8a6,projMercator = { // Maximum latitude for Web Mercator: 85.0113 degrees. Beware rounding! const maxMercLat = 2.0 * Math.atan(Math.exp(Math.PI)) - Math.PI / 2.0; const clipLat = lat => Math.min(Math.max(-maxMercLat, lat), maxMercLat); function scale(geodetic) { // Input geodetic is a pointer to a 2- (or 3?)-element array, containing // longitude and latitude of a point on the ellipsoid surface. // Return value scales a (differential) distance along the plane tangent to // the sphere at position to a distance in map coordinates. // NOTE: ASSUMES a sphere of radius 1! Input distances should be // pre-normalized by the appropriate radius return 1 / (2 * Math.PI * Math.cos(clipLat(geodetic[1]))); } function lonLatToXY(projected, geodetic) { // Input geodetic is a pointer to a 2- (or 3?)-element array, containing // longitude and latitude of a point on the ellipsoid surface // Output projected is a pointer to a 2-element array containing // the projected X/Y coordinates projected[0] = lonToX(geodetic[0]); projected[1] = latToY(geodetic[1]); return projected; } function lonToX(lon) { // Convert input longitude in radians to a Web Mercator x-coordinate // where x = 0 at lon = -PI, x = 1 at lon = +PI return 0.5 + (0.5 * lon) / Math.PI; } function latToY(lat) { // Convert input latitude in radians to a Web Mercator y-coordinate // where y = 0 at lat = maxMercLat, y = 1 at lat = -maxMercLat var y = 0.5 - (0.5 / Math.PI) * Math.log(Math.tan(Math.PI / 4.0 + clipLat(lat) / 2.0)); return Math.min(Math.max(0.0, y), 1.0); // Y does not wrap around } function xyToLonLat(geodetic, projected) { // Input projected is a pointer to a 2-element array containing X/Y // Output geodetic will have longitude, latitude in radians geodetic[0] = xToLon(projected[0]); geodetic[1] = yToLat(projected[1]); return geodetic; } function xToLon(x) { return 2.0 * (x - 0.5) * Math.PI; } function yToLat(y) { return 2.0 * Math.atan(Math.exp(Math.PI * (1.0 - 2.0 * y))) - Math.PI / 2; } return { scale, lonLatToXY, xyToLonLat }; }34:[{"id":"29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","href":"https://static.observableusercontent.com/files/29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","name":"toner-style.json","type":"application/json","lastModified":1586308570353.112,"size":16852},{"id":"5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","href":"https://static.observableusercontent.com/files/5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","name":"dark-matter-style.json","type":"application/json","lastModified":1586308893004.181,"size":38184},{"id":"195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","href":"https://static.observableusercontent.com/files/195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","name":"klokantech-basic-style.json","type":"application/json","lastModified":1583517177156.117,"size":23138},{"id":"5e7cd150a2355987547a6ee65f15fce38360d7ea183131c599999710f64f8eeebb9f5b2c5db3b394195f8c57bb724f328d31d5bc2608ec83b841e713bbb1d443","href":"https://static.observableusercontent.com/files/5e7cd150a2355987547a6ee65f15fce38360d7ea183131c599999710f64f8eeebb9f5b2c5db3b394195f8c57bb724f328d31d5bc2608ec83b841e713bbb1d443","name":"klokantech-terrain-style.json","type":"application/json","lastModified":1586308893858.597,"size":34784},{"id":"c11907343af9c891609aff443798ea48c65a2cc1fa5c14bd456a981fd7f7347edc47ee7a7cb8557b7c5e2b5a13e84757d6caf0b38dc70ca21a783b98dcdfbfde","href":"https://static.observableusercontent.com/files/c11907343af9c891609aff443798ea48c65a2cc1fa5c14bd456a981fd7f7347edc47ee7a7cb8557b7c5e2b5a13e84757d6caf0b38dc70ca21a783b98dcdfbfde","name":"osm-liberty-style.json","type":"application/json","lastModified":1586308894017.475,"size":44883},{"id":"2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","href":"https://static.observableusercontent.com/files/2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","name":"fiord-color-style.json","type":"application/json","lastModified":1586308894116.374,"size":42592},{"id":"fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","href":"https://static.observableusercontent.com/files/fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","name":"positron-style.json","type":"application/json","lastModified":1586308894906.02,"size":45595},{"id":"47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","href":"https://static.observableusercontent.com/files/47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","name":"osm-bright-style.json","type":"application/json","lastModified":1586308895222.98,"size":65903}] 2c:{"id":"daf4dadb3cdd27a3","slug":"vector-map-rendering","title":"Vector Map Rendering","thumbnail":"92111d7fc4df048391f038d57bafcff266b60a12c84cd3d2cfac6440b0dbece4","access_level":"public","create_time":"$D2020-03-05T21:27:09.296Z","update_time":"$D2020-04-23T15:47:54.945Z","view_time":null,"first_public_time":"$D2020-04-10T16:20:58.354Z","has_unpublished_edits":null,"fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"54b0aa2cda468b5a","login":"jjhembd","name":"Jeshurun Hembd","avatar_url":"https://avatars-next.observableusercontent.com/d42857c40a13c8179e0491536477452e54d4f6808ec32ed4d8fbdad81c03758d","tier":"starter_2024"},"version":1430,"publish_version":1430,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"title":"Vector Map Rendering","cells":[{"id":0,"value":"md`# Vector Map Rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"md`\nThe notebook [Vector Tile Rendering](https://observablehq.com/@jjhembd/vector-tile-rendering) introduced a simple, lightweight Canvas 2D renderer for a single [vector map tile](https://en.wikipedia.org/wiki/Vector_tiles). This notebook expands the same strategy into a full vector map. It uses [d3-zoom](https://github.com/d3/d3-zoom) for panning and zooming, [d3-tile](https://github.com/d3/d3-tile) to identify the tiles needed for the current view, and several modules from the [GlobeletJS](https://github.com/GlobeletJS) library.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"viewof styleChoice = {\n const form = html`\n `;\n form.i.onchange = () => {\n form.value = styleOptions[form.i.selectedIndex];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.i.selectedIndex = 0;\n form.value = styleOptions[form.i.selectedIndex];\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof map = {\n const box = html`

`;\n const context = DOM.context2d(width, reactiveHeight);\n box.appendChild(context.canvas);\n\n const attribution = html`

${parsedStyle.sources.openmaptiles.attribution}

`;\n box.appendChild(attribution);\n\n const loadStatus = html`

`;\n box.appendChild(loadStatus);\n\n //while (true) {\n // let workerTasks = \"worker: \" + openmaptiles.workerTasks();\n // let queuedTasks = \"queue: \" + queue.countTasks();\n // loadStatus.innerHTML = workerTasks + \", \" + queuedTasks;\n // yield drawLayers(context); // circular definition error\n //}\n\n box.value = { context, loadStatus };\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"md`Compare to [a similar setup with raster tiles](https://observablehq.com/@jjhembd/zoomable-map-with-tile-cache). In both setups, there is a network delay for every new tile that is needed, so the map displays a lower-resolution tile in the meantime. But with vector rendering, the lower-resolution placeholder tile does not look pixelated—while somewhat lacking in detail, it displays in sharp focus, with clear, readable text labels.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## Drawing the tiles\nOnce the Path objects for each tile are ready, we can begin drawing them on the map. Drawing a layered, tiled map requires two nested loops:\n- Outer: over layers in the style document\n- Inner: over tiles in the layer\n\nBut first, we construct the rendering functions ('painters'), one for each style layer, using the [tile-painter](https://www.npmjs.com/package/tile-painter) module:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"painters = parsedStyle.layers.map(tileStencil.getStyleFuncs).map(layer => {\n let source = parsedStyle.sources[layer.source];\n let tileSize = source ? source.tileSize : 512;\n return tilePainter.initMapPainter({\n context: map.context,\n styleLayer: layer,\n spriteObject: parsedStyle.spriteData,\n tileSize\n });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`Now the outer loop over layers:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"function drawLayers(ctx) {\n ctx.clearRect(0, 0, width, reactiveHeight);\n const tilesets = sources.getTilesets([width, reactiveHeight], transform);\n const zoom = Math.log2(transform.k) - 9;\n\n painters.forEach(painter => {\n if (zoom < painter.minzoom || painter.maxzoom < zoom) return;\n drawLayer(painter, zoom, tilesets[painter.source]);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"animation = {\n while (true) {\n let workerTasks = \"worker: \" + sources.workerTasks();\n let queuedTasks = \"queue: \" + sources.queuedTasks();\n map.loadStatus.innerHTML = workerTasks + \", \" + queuedTasks;\n yield drawLayers(map.context);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"md`And finally the inner loop over tiles. \n\nThe Path objects were constructed in tile coordinates. These coordinates must be transformed (via [Canvas 2D transforms](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform)) to the corresponding *map* coordinates, so the tile will display in the correct position on the map. To set up these transforms, the painter function needs to know:\n- Position and scale of this tile in the map, as computed by [d3-tile](https://github.com/d3/d3-tile)\n- Cropping parameters (when temporarily using part of a lower-res tile)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"function drawLayer(painter, zoom, tileset) {\n // No tiles for background layers\n if (!tileset) return painter({ zoom });\n\n for (const tileBox of tileset) {\n if (!tileBox) continue;\n\n let position = {\n x: (tileBox.x + tileset.translate[0]) * tileset.scale,\n y: (tileBox.y + tileset.translate[1]) * tileset.scale,\n w: tileset.scale\n };\n\n painter({\n source: tileBox.tile.data,\n position,\n crop: { x: tileBox.sx, y: tileBox.sy, w: tileBox.sw },\n zoom,\n boxes: []\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"md`Note that the transform's scale has to be *removed* from any style properties, like line-width. [tile-painter](https://www.npmjs.com/package/tile-painter) takes care of this internally.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`## Collecting the data\nThe tile source supplying data to the drawLayers function is built around the [tile-mixer](https://www.npmjs.com/package/tile-mixer) module. This module delegates the vector tile parsing and filtering to [Worker threads](https://developer.mozilla.org/en-US/docs/Web/API/Worker), so these long-running tasks can finish in the background.\n\nHowever, [tile-mixer](https://www.npmjs.com/package/tile-mixer) also constructs the [Path2D](https://developer.mozilla.org/en-US/docs/Web/API/Path2D) objects for the features in the tile. This work is done on the main thread. To make sure it doesn't interfere with user interaction, Path construction tasks are broken into chunks, allowing the browser to update the page between chunks. The [chunked-queue](https://www.npmjs.com/package/chunked-queue) module handles these chunked tasks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"sources = initSources(parsedStyle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"md`The main method of the tile source is the .getTiles function, which inputs the map viewport dimensions, and a transform object from [d3-zoom](https://github.com/d3/d3-zoom). These inputs are passed to [d3-tile](https://github.com/d3/d3-tile) to identify which tiles are needed.\n\nThe vector source object also maintains a tile cache, constructed via the [tile-rack](https://www.npmjs.com/package/tile-rack) module.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"function initRasterLoader(source) {\n const getURL = initUrlFunc(source.tiles);\n\n function request({ z, x, y, callback }) {\n const href = getURL(z, x, y);\n const errMsg = \"ERROR in loadImage for href \" + href;\n\n const img = new Image();\n img.onerror = () => callback(errMsg);\n img.onload = () => {\n return img.complete && img.naturalWidth !== 0\n ? callback(null, img)\n : callback(errMsg);\n };\n img.crossOrigin = \"anonymous\";\n img.src = href;\n\n function abort() {\n img.src = \"\";\n }\n\n return { abort };\n }\n\n return { request };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"function initUrlFunc(endpoints) {\n if (!endpoints || !endpoints.length) {\n throw Error(\"ERROR in initUrlFunc: no valid tile endpoints!\");\n }\n\n // Use a different endpoint for each request\n var index = 0;\n return function(z, x, y) {\n index = (index + 1) % endpoints.length;\n var endpoint = endpoints[index];\n return endpoint\n .replace(/{z}/, z)\n .replace(/{x}/, x)\n .replace(/{y}/, y);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`---\n## Appendices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"md`### Potential further work\n- Pull request for maxZoom in [d3-tile](https://github.com/GlobeletJS/d3-tile)? (Need simple notebook to explain)\n- Don't request tiles that are below the priority threshold (current tileRack.retrieve method requests all parent tiles, regardless of priority)\n- Improve label rendering\n - Pre-render to small canvases in tile-mixer\n - Implement [word-wrapping](https://stackoverflow.com/a/16599668/10082269) for long labels (style parameter [text-max-width](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-text-max-width))\n - Implement [text-letter-spacing](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-text-letter-spacing), by [inserting small spaces](https://stackoverflow.com/a/14991381/10082269)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`### Map position and zoom`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"d3\n .select(map.context.canvas)\n .call(zoomer)\n .call(zoomer.transform, mutable transform)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"zoomer = d3\n .zoom()\n .scaleExtent([1 << 10, 1 << 26])\n .extent([[0, 0], [width, reactiveHeight]])\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":80,"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":78,"value":"projection = d3\n .geoMercator()\n .center([-73.886, 40.745])\n .scale(Math.pow(2, 18) / (2 * Math.PI))\n .translate([width / 2, reactiveHeight / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`### Style document`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"parsedStyle = tileStencil.loadStyle(styleDoc)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"styleDoc = {\n //let doc = await FileAttachment(\"klokantech-basic-style.json\").json();\n let doc = await styleChoice.file.json();\n\n const maptilerKey = \"mrAq6zQEFxOkanukNbGm\"; // Get your own key: maptiler.com\n Object.values(doc.sources).forEach(src => {\n if (src.url) src.url = src.url.replace(/{key}/, maptilerKey);\n });\n\n return doc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"styleOptions = [\n { name: \"Toner\", file: FileAttachment(\"toner-style.json\") },\n {\n name: \"Klokantech Basic\",\n file: FileAttachment(\"klokantech-basic-style.json\")\n },\n {\n name: \"Klokantech Terrain\",\n file: FileAttachment(\"klokantech-terrain-style.json\")\n },\n { name: \"Dark Matter\", file: FileAttachment(\"dark-matter-style.json\") },\n { name: \"Fiord Color\", file: FileAttachment(\"fiord-color-style.json\") },\n { name: \"Positron\", file: FileAttachment(\"positron-style.json\") },\n {\n name: \"OSM Liberty\",\n file: FileAttachment(\"osm-liberty-style.json\")\n },\n { name: \"OSM Bright\", file: FileAttachment(\"osm-bright-style.json\") }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html`\n\n

Noto Sans: The quick brown fox jumped over the lazy dog.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`### Miscellaneous constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"// Make sure we fill the screen when in full-screen mode\n//reactiveHeight = Math.ceil((width * screen.height) / screen.width)\nreactiveHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`### Imported modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"d3tileAlternate = {\n // Alternate version of d3-tile, that adds maxZoom behavior\n const response = await fetch(\n \"https://raw.githubusercontent.com/GlobeletJS/d3-tile/master/dist/d3-tile.min.js\"\n );\n const blob = await response.blob();\n return require(URL.createObjectURL(blob)).catch(() => window.tileMaxZoom);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"import { getTileMetric } from \"@jjhembd/map-tile-priorities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"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"},{"id":8,"value":"tileRack = import(\"tile-rack@0.2.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"tilePainter = import(\"tile-painter@0.3.4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"chunkedQueue = import(\"chunked-queue@0.1.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"tileMixer = import(\"tile-mixer@0.0.8\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"tileStencil = import('tile-stencil@0.2.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"