29:null 2a:["$","title",null,{"children":"Adding custom layers to a vector map with geojson-vt | Ananya Roy | Observable"}] 2f:T584,geojson = [ { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] } }, { type: 'Feature', geometry: { type: 'MultiPoint', coordinates: [[5.0, 0.0], [5, 1.0]] } }, { type: 'Feature', geometry: { type: 'LineString', coordinates: [[40, -20], [80, 20]] } }, { type: 'Feature', geometry: { type: 'LineString', coordinates: [[40, 20], [80, -20]] } }, { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[-50, -10], [-40, 10], [-30, -10]]] } }, { type: 'Feature', geometry: { type: 'MultiLineString', coordinates: [ [[-10, -7.5], [-10, 7.5]], [[10, -7.5], [10, 7.5]], [[-7.5, -10], [7.5, -10]], [[-7.5, 10], [7.5, 10]] ] } }, { type: 'Feature', geometry: { type: 'MultiPolygon', coordinates: [ [[[-50, 60], [-50, 80], [-30, 80], [-30, 60]]], [[[-20, 60], [-20, 80], [0, 80], [0, 60]]], [[[10, 60], [10, 80], [30, 80], [30, 60]]] ] } } ] } ][0]30:T557,function initGeoJsonLoader(source) { let layerId = source.vector_layers[0].id; function request({ z, x, y, callback }) { var data = [ { [layerId]: { type: "FeatureCollection", compressed: [{}] } } ][0]; //this is the structure the addPaths is expecting //console.log("z/x/y: " + z + "/" + x + "/" + y); var tile = source.tiles.getTile(z, x, y); //request tile var replacedTile = []; if ( tile && tile !== "null" && tile !== "undefined" && tile.features.length > 0 ) { for (let i = 0; i < tile.features.length; i++) { replacedTile[i] = rep(tile.features[i]); } data[layerId].compressed = replacedTile; data[layerId] = addPaths(data[layerId]); } function addPaths(data2) { data2.compressed.forEach(feature => { feature.path = geomToPath(feature.geometry); delete feature.geometry; }); //console.log(JSON.stringify(data2)); return data2; } const errMsg = "ERROR in GeojsonLoader for tile z,x,y = " + [z, x, y].join(","); if ( tile && tile !== "null" && tile !== "undefined" && tile.features.length > 0 ) { callback(null, data); } else { callback(errMsg); } function abort() { //img.src = ""; } return { abort }; } return { request }; }31:T5fd,function geomToPath(geometry) { // Converts a GeoJSON Feature geometry to a Path2D object function pointPath(path, point) { // Draws a Point geometry, which is an array of two coordinates //console.log("Inside the pointPath function"); path.moveTo(point[0], point[1]); path.lineTo(point[0], point[1]); } function linePath(path, points) { // Draws a LineString geometry, which is an array of Points. var p = points[0], i = 0, n = points.length; console.log("linePath points length: " + n); path.moveTo(p[0], p[1]); console.log(p[0] + ", " + p[1]); while (++i < n) (p = points[i]), path.lineTo(p[0], p[1]); } function polygonPath(path, lines) { // Draws a Polygon geometry, which is an array of LineStrings //console.log("Inside the polygonPath function"); var i = -1, n = lines.length; console.log("PolygonPath lines length: " + n); while (++i < n) linePath(path, lines[i]); } const pathFuncs = { Point: pointPath, LineString: linePath, Polygon: polygonPath }; var type = geometry.type; var isMulti = type.substring(0, 5) === "Multi"; if (isMulti) type = type.substring(5); const pathFunc = pathFuncs[type]; const path = new Path2D(); const coords = geometry.coordinates; if (isMulti) { // While loops faster than forEach: https://jsperf.com/loops/32 var i = -1, n = coords.length; while (++i < n) pathFunc(path, coords[i]); } else { pathFunc(path, coords); } return path; }32:T56b,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]) => { var loader; if (source.type === "vector") { loader = initVectorLoader(key, source); } if (source.type === "geojson") { console.log("Check how often this happens"); loader = initGeoJsonLoader(source); } if (source.type === "raster") { loader = initRasterLoader(source); } let tileFactory = buildFactory(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() }; }33:T712,function initSource({ source, tileFactory }) { const { type, tileSize = 512, minzoom, maxzoom } = 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 // TODO: Don't order tiles if they won't be displayed at the current zoom!! // ALSO: fix tile-rack to limit how far back it will go in parent tiles, at least // don't go back before minzoom, possibly check priority of parent tile //.minZoom(minzoom) // BAD IDEA! Requests a huge number of tiles! .maxZoom(maxzoom) .clampX(false); // Allow panning across the antimeridian function getTiles(viewport, transform) { // Get the grid of tiles needed for the current viewport layout.size(viewport); let tiles = layout(transform); // 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]); 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 let metric = getTileMetric(layout, tiles, 1.5); numTiles = tileCache.trim(metric, 0.9); return grid; } return { getTiles, numTiles: () => numTiles }; }34:[{"id":"47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","href":"https://static.observableusercontent.com/files/47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","name":"osm-bright-style.json","type":"application/json","lastModified":1589028505417.469,"size":65903},{"id":"c11907343af9c891609aff443798ea48c65a2cc1fa5c14bd456a981fd7f7347edc47ee7a7cb8557b7c5e2b5a13e84757d6caf0b38dc70ca21a783b98dcdfbfde","href":"https://static.observableusercontent.com/files/c11907343af9c891609aff443798ea48c65a2cc1fa5c14bd456a981fd7f7347edc47ee7a7cb8557b7c5e2b5a13e84757d6caf0b38dc70ca21a783b98dcdfbfde","name":"osm-liberty-style.json","type":"application/json","lastModified":1589028505417.469,"size":44883},{"id":"fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","href":"https://static.observableusercontent.com/files/fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","name":"positron-style.json","type":"application/json","lastModified":1589028505417.469,"size":45595},{"id":"2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","href":"https://static.observableusercontent.com/files/2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","name":"fiord-color-style.json","type":"application/json","lastModified":1589028505417.469,"size":42592},{"id":"5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","href":"https://static.observableusercontent.com/files/5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","name":"dark-matter-style.json","type":"application/json","lastModified":1589028505417.469,"size":38184},{"id":"5e7cd150a2355987547a6ee65f15fce38360d7ea183131c599999710f64f8eeebb9f5b2c5db3b394195f8c57bb724f328d31d5bc2608ec83b841e713bbb1d443","href":"https://static.observableusercontent.com/files/5e7cd150a2355987547a6ee65f15fce38360d7ea183131c599999710f64f8eeebb9f5b2c5db3b394195f8c57bb724f328d31d5bc2608ec83b841e713bbb1d443","name":"klokantech-terrain-style.json","type":"application/json","lastModified":1589028505417.469,"size":34784},{"id":"195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","href":"https://static.observableusercontent.com/files/195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","name":"klokantech-basic-style.json","type":"application/json","lastModified":1589028505417.469,"size":23138},{"id":"29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","href":"https://static.observableusercontent.com/files/29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","name":"toner-style.json","type":"application/json","lastModified":1589028505417.469,"size":16852}] 2d:{"id":"c824af1371976f8d","slug":"adding-custom-layers-to-a-vector-map-with-geojson-vt","title":"Adding custom layers to a vector map with geojson-vt","thumbnail":"42b6f5549b4d54a93cd34bd69cb2a1c25ffc6bc0aac6a284bc31369b8ba70f68","access_level":"public","create_time":"$D2020-05-09T12:48:25.417Z","update_time":"$D2021-02-03T00:43:52.442Z","view_time":null,"first_public_time":"$D2020-05-21T05:49:29.931Z","has_unpublished_edits":null,"fork":{"id":"daf4dadb3cdd27a3","slug":"vector-map-rendering","title":"Vector Map Rendering","owner":{"id":"54b0aa2cda468b5a","login":"jjhembd","name":"Jeshurun Hembd"}},"stars":8,"starred":false,"owner":{"type":"team","id":"028bf878139e3cf1","login":"ananya-roy","name":"Ananya Roy","avatar_url":"https://avatars-next.observableusercontent.com/f11dd31a7d2798682e8b51344a87ccbbc7a0154feb96832e5919ab3dc7b52e05","tier":"starter_2024"},"version":2607,"publish_version":2607,"role":null,"authored":false,"authors":[{"type":"individual","id":"d329fd66efb83867","login":"ananya-roy","name":"Ananya Roy","avatar_url":"https://avatars-next.observableusercontent.com/f11dd31a7d2798682e8b51344a87ccbbc7a0154feb96832e5919ab3dc7b52e05","tier":null}],"members":[{"type":"individual","id":"d329fd66efb83867","login":"ananya-roy","name":"Ananya Roy","avatar_url":"https://avatars-next.observableusercontent.com/f11dd31a7d2798682e8b51344a87ccbbc7a0154feb96832e5919ab3dc7b52e05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Adding custom layers to a vector map with geojson-vt","cells":[{"id":0,"value":"md`# Adding custom layers to a vector map with geojson-vt`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"md`\nThis notebook works out how to add a custom geojson layer to the [jank-free Vector Map](https://observablehq.com/@jjhembd/vector-map-rendering) by [Jeshurun](https://observablehq.com/@jjhembd). The key is [Vladimir Agofonkin's](https://observablehq.com/@mourner) [geojson-vt](https://github.com/mapbox/geojson-vt) module that converts the geojson to tiles on the fly.

Jeshurun's vector map is lots of fun to play with! You can zoom in and out and move around without ever seeming out of focus. geojson-vt gets us one step closer to visualizing custom data on this fun map!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2398,"value":"md`In this example, we add a geojson layer of US state boundaries (red polygons) to the map`","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":2306,"value":"statesGeojson = d3.json(\n \"https://raw.githubusercontent.com/mapbox/mapboxgl-jupyter/master/examples/data/us-states.geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2560,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2402,"value":"md`Step 1: Create a tile index using geojson-vt. A tile can be accessed using the getTile(z,x,y) method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"tileIndexStates = geojsonvt(statesGeojson, {\n extent: 512,\n tolerance: 0\n}) /*, {\n maxZoom: 14, // max zoom to preserve detail on; can't be higher than 24\n minZoom: 0,\n tolerance: 3, // simplification tolerance (higher means simpler)\n extent: 4096, // tile extent (both width and height)\n buffer: 64, // tile buffer on each side\n debug: 0, // logging level (0 to disable, 1 or 2)\n lineMetrics: false, // whether to enable line metrics tracking for LineString/MultiLineString features\n promoteId: null, // name of a feature property to promote to feature.id. Cannot be used with `generateId`\n generateId: false, // whether to generate feature ids. Cannot be used with `promoteId`\n indexMaxZoom: 5, // max zoom in the initial tile index\n indexMaxPoints: 100000000000 // max number of points per tile in the index\n})*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"md`Step 2: Add this layer to the style document that will be parsed by the tile-stencil module`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2029,"value":"styleDoc2 = {\n var styleDoc2 = JSON.parse(JSON.stringify(styleDoc));\n styleDoc2.sources[\"states\"] = {\n type: \"geojson\",\n tiles: tileIndexStates,\n minzoom: 0,\n maxzoom: 14,\n tileSize: 512,\n vector_layers: [{ id: \"states\", minzoom: 0, maxzoom: 14 }]\n };\n styleDoc2.layers[styleDoc.layers.length] = [\n {\n id: \"states\",\n type: \"circle\",\n source: \"states\",\n \"source-layer\": \"states\",\n layout: { visibility: \"visible\" },\n paint: {\n \"circle-radius\": 2,\n \"circle-color\": \"#FF0000\",\n \"circle-opacity\": 1\n }\n }\n ][0];\n return styleDoc2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2412,"value":"md` Finally, we need some functions to read the MVT tile from geojson-vt and convert it to a vector tile feature format. Geometry is converted to Path2D objects for rendering on the canvas, just like the rest of the vector layers on the map:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2202,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2554,"value":"function rep(value) {\n if (value.geometry) {\n var type;\n var rawType = value.type;\n var geometry = value.geometry;\n\n if (rawType === 1) {\n type = 'MultiPoint';\n if (geometry.length == 1) {\n type = 'Point';\n geometry = geometry[0];\n //geometry = [geometry];\n }\n } else if (rawType === 2) {\n type = 'MultiLineString';\n if (geometry.length == 1) {\n type = 'LineString';\n geometry = geometry[0];\n }\n } else if (rawType === 3) {\n type = 'Polygon';\n if (geometry.length > 1) {\n type = 'MultiPolygon';\n geometry = [geometry];\n }\n }\n\n return {\n type: 'Feature',\n geometry: {\n type: type,\n coordinates: geometry\n },\n properties: value.tags\n };\n } else {\n return value;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"function replacer(value) {\n //http://www.scgis.net/api/ol/v4.1.1/examples/geojson-vt.html\n if (value.geometry) {\n var type;\n var rawType = value.type;\n var geometry = value.geometry;\n\n if (rawType === 1) {\n type = geometry.length === 1 ? 'Point' : 'MultiPoint';\n } else if (rawType === 2) {\n type = geometry.length === 1 ? 'LineString' : 'MultiLineString';\n console.log(\"line\");\n } else if (rawType === 3) {\n type = geometry.length === 1 ? 'Polygon' : 'MultiPolygon';\n }\n\n if (rawType === 1) {\n return {\n geometry: {\n type: type,\n coordinates: geometry.length == 1 ? geometry[0] : [geometry]\n },\n properties: value.tags\n };\n } else {\n return {\n geometry: {\n type: type,\n coordinates: geometry.length == 1 ? geometry : [geometry]\n },\n properties: value.tags\n };\n }\n } else {\n return value;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2378,"value":"md` Add these to the Vector Map Rendering functions below (that come from [Jeshurun's notebook](https://observablehq.com/@jjhembd/vector-map-rendering)), and you have a custom layer added to the map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2355,"value":"md`## Drawing the tiles`","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\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":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 = sources2.getTilesets([width, reactiveHeight], transform);\n const zoom = Math.log2(transform.k) - 9;\n painters.forEach(painter => {\n if (zoom < painter.minzoom || painter.maxzoom < zoom) return;\n drawLayer(painter, zoom, tilesets[painter.source]);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"animation = {\n while (true) {\n let workerTasks = \"worker: \" + sources2.workerTasks();\n let queuedTasks = \"queue: \" + sources2.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":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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2358,"value":"md`## Collecting the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"parsedStyle = tileStencil.loadStyle(styleDoc2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"sources2 = initSources(parsedStyle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"function buildFactory(loader, listenerDiv) {\n return { create };\n\n function create(z, x, y) {\n let id = [z, x, y].join(\"/\");\n const tile = { z, x, y, id, priority: 0 };\n\n function callback(err, data) {\n if (err) return; // console.log(err);\n //console.log(JSON.stringify(data) );\n tile.data = data;\n tile.rendered = true; // Should be .ready -- requires change to tile-rack\n listenerDiv.dispatchEvent(new Event(\"tileLoaded\"));\n }\n\n const getPriority = () => tile.priority;\n const loadTask = loader.request({ z, x, y, getPriority, callback });\n\n tile.cancel = () => {\n loadTask.abort();\n tile.canceled = true;\n };\n\n return tile;\n }\n}","pinned":false,"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":true,"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":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":false,"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":false,"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":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":false,"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":1430,"value":"//outcropLayer = [{\"id\":\"outcropFeatures\", \"type\":\"circle\", \"source\":\"outcropFeatures\", \"source-layer\":\"outcropFeatures\", \"layout\":{\"visibility\":\"visible\"},\"paint\":{\"circle-radius\":5, \"circle-color\":\"#FF0000\"}}][0]","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":1415,"value":"geojsonvt = require('geojson-vt')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"d3tileAlternate = {\n // Alternate version of d3-tile, that adds minZoom and maxZoom setters\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"}} 2e:"$2d:body"