31:T622,viewof tileCoords = { const coords = { x: 164, y: 396, z: 10 }; const pan = html``; pan.up.onclick = () => move(0, 0, -1); pan.left.onclick = () => move(0, -1, 0); pan.right.onclick = () => move(0, 1, 0); pan.down.onclick = () => move(0, 0, 1); pan.zoomIn.onclick = () => move(1, 0, 0); pan.zoomOut.onclick = () => move(-1, 0, 0); function move(dz, dx, dy) { coords.x += dx; coords.y += dy; if (dz > 0 && coords.z < 14) { coords.z += dz; coords.x *= 2; coords.y *= 2; } else if (dz < 0 && coords.z > 4) { coords.z += dz; coords.x = Math.floor(coords.x / 2); coords.y = Math.floor(coords.y / 2); } pan.dispatchEvent(new CustomEvent("input")); } pan.value = coords; return pan; }32:T788,html``33:[{"id":"5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","href":"https://static.observableusercontent.com/files/5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","name":"dark-matter-style.json","type":"application/json","lastModified":1575915264002.635,"size":38184},{"id":"195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","href":"https://static.observableusercontent.com/files/195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","name":"klokantech-basic-style@1.json","type":"application/json","lastModified":1575915263915.644,"size":23138},{"id":"29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","href":"https://static.observableusercontent.com/files/29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","name":"toner-style.json","type":"application/json","lastModified":1575915264012.569,"size":16852},{"id":"2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","href":"https://static.observableusercontent.com/files/2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","name":"fiord-color-style@1.json","type":"application/json","lastModified":1575940280090.506,"size":42592},{"id":"47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","href":"https://static.observableusercontent.com/files/47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","name":"osm-bright-style.json","type":"application/json","lastModified":1575915264034.825,"size":65903},{"id":"fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","href":"https://static.observableusercontent.com/files/fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","name":"positron-style.json","type":"application/json","lastModified":1575915264045.703,"size":45595}] 2f:{"title":"Vector Tile Rendering","cells":[{"id":0,"value":"md`# Vector Tile Rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`[Vector tiles](https://en.wikipedia.org/wiki/Vector_tiles) provide a way to draw custom maps in the browser. Unlike a raster tile with a pre-determined appearance, the same vector tile can be drawn in many different styles.\n\nMost vector map renderers are huge, monolithic [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)-based codes. These are often very fast ([Mapbox GL](https://github.com/mapbox/mapbox-gl-js) is one of the best) but can be hard for a beginner to understand. \n\nThis notebook introduces the concepts with a simpler workflow based on [Canvas 2D](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) and modules from the [GlobeletJS](https://github.com/GlobeletJS) library. The more modular approach allows interactive exploration of the intermediate steps in the flow.\n\nFirst, a quick look at what it does: Try toggling through the styles in the menu below, to see the drastically different maps that can be generated from the *same input data*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"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"},{"id":140,"value":"viewof mapContext = {\n const box = html`

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

${parsedStyle.sources.openmaptiles.attribution}

`;\n box.appendChild(attribution);\n box.value = context;\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"md`Drawing a vector map is done in a layered way. First the background water bodies and land areas are filled in, then borders and roads are drawn, and finally the labels are added on top.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"md`The raw structure of the tile already provides a preliminary breakdown of the features into layers. The [open tile schema](https://openmaptiles.org/schema/) used in the data drawn above has 16 layers, which are parsed into [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) FeatureCollections below (not all layers are present in every tile):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"tileGeoJson = mvtToGeoJson(tileMVT)","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`Many popular styles, however, split this data further into many more layers (50-100 or more), for finer control over the appearance of different features.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"md`In the rest of this notebook, we first investigate the [Mapbox style document](https://docs.mapbox.com/mapbox-gl-js/style-spec/) which specifies the layers and their styling. Then we use two lightweight modules from the [GlobeletJS](https://github.com/GlobeletJS) library, [tile-stencil](https://www.npmjs.com/package/tile-stencil) and [tile-painter](https://www.npmjs.com/package/tile-painter), to parse the style information and render the data to a Canvas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`## 0. Understanding a Mapbox style document`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"md`Here is the selected style document. (Thanks to [Open Map Tiles](https://openmaptiles.org/styles/) for these styles).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"styleDoc","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`Try expanding the tree structure of the Object above (click the little triangle on the left). At the top level, there are two properties that are especially important:\n- sources: the input data\n- layers: styling information for each output layer\n\nBelow I have extracted the style layer that is used to draw major highways. Notice the 'filter' property. This filter identifies the features within the input \"transportation\" source-layer to be drawn in this output layer. The 'layout' and 'paint' properties then describe how these features will be drawn.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"styleDoc.layers.find(highwayFinder)","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`Note that some of the 'paint' properties are not constant, but vary with zoom level. Style properties can also depend on the properties of the individual features in the dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"md`## 1. Converting styles to functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"md`The filter, layout, and paint properties in the raw style document are all specified in a static JSON syntax. For rendering, these need to be converted to dynamic Javascript **functions**, that can retrieve features from the current tile, and compute the style value for those features at the current zoom level. \n\nThe [tile-stencil](https://www.npmjs.com/package/tile-stencil) module takes care of this part:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"parsedStyle = tileStencil.parseStyle(styleDoc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"highwayStyles = parsedStyle.layers.find(highwayFinder)","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`The parsed style has more functions than were specified in the raw style document. For every field that was left unspecified, tile-stencil creates a constant function returning the default value for that field.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`In the highways layer, one interesting parameter for rendering is the line-width. This is a zoom-dependent function, with the lines getting thicker as the map is zoomed in.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"highwayStyles.paint[\"line-width\"](tileCoords.z)","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`## 2. Rendering the map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"md`One simple way to draw a styled map is as follows: For each selection of features from the vector data,\n1. Evaluate the style functions at the current zoom level\n2. Set the relevant properties of a [Canvas 2D rendering context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)\n3. Draw the data using [d3-geo-path](https://github.com/d3/d3-geo/blob/v1.11.9/README.md#geoPath)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`For example, here is how that looks for the highways layer:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"{\n const ctx = DOM.context2d(tileSize, tileSize);\n const path = d3.geoPath(null, ctx);\n\n // Select the highway features\n let highwayData = {\n type: \"FeatureCollection\",\n features: tileGeoJson.transportation.features.filter(highwayStyles.filter)\n };\n\n // Fill in the background color (necessary if highways are white)\n let bgStyle = parsedStyle.layers.find(layer => layer.type === \"background\");\n ctx.fillStyle = bgStyle.paint[\"background-color\"](tileCoords.z);\n ctx.fillRect(0, 0, tileSize, tileSize);\n\n // Set the highway styles: translate style properties to Canvas2D settings\n ctx.miterLimit = highwayStyles.layout[\"line-miter-limit\"](tileCoords.z);\n ctx.lineWidth = highwayStyles.paint[\"line-width\"](tileCoords.z);\n ctx.strokeStyle = highwayStyles.paint[\"line-color\"](tileCoords.z);\n\n // Draw the highways\n ctx.beginPath();\n path(highwayData);\n ctx.stroke();\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`As the above code shows, the key is to translate each style property to the appropriate Canvas 2D setting. \n\nManually writing down these translations for all 47 layers would be tedious. The [tile-painter](https://www.npmjs.com/package/tile-painter) module automates this work, converting each style layer into a rendering function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"painterFuncs = tilePainter\n .addPainters(parsedStyle, tileSize)\n .layers.map(layer => layer.painter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`Rendering is now simply a matter of calling each of the rendering functions, one by one:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"function drawTile(geoJson) {\n // Start a cumulative list of label bounding boxes to check for collisions\n const labelBoxes = [];\n // Wrap the GeoJSON in an object to match the structure of style.sources\n const sources = { openmaptiles: geoJson };\n // Paint all the layers to the Canvas, in order\n let t0 = performance.now();\n painterFuncs.forEach(painter =>\n painter(mapContext, tileCoords.z, sources, labelBoxes)\n );\n let t1 = performance.now();\n return (t1 - t0).toFixed(3);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"drawTile(tileGeoJson)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`---\n## Appendix: Miscellaneous constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"maptilerKey = \"mrAq6zQEFxOkanukNbGm\" // Get your own key: maptiler.com","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"endpoint = \"https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=\" +\n maptilerKey","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"tileURL = endpoint\n .replace(/{z}/, tileCoords.z)\n .replace(/{y}/, tileCoords.y)\n .replace(/{x}/, tileCoords.x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"tileSize = 512","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"highwayFinder = layer =>\n [\n \"highway_motorway_inner\",\n \"highway-motorway-casing\",\n \"road_major_motorway\",\n \"transportation\",\n \"road_motorway_casing\"\n ].includes(layer.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"styleDoc = {\n let doc = await styleChoice.file.json();\n Object.values(doc.sources).forEach(src => {\n if (src.url) src.url = src.url.replace(/{key}/, maptilerKey);\n });\n return doc;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"styleOptions = [\n {\n name: \"Klokantech Basic\",\n file: FileAttachment(\"klokantech-basic-style@1.json\")\n },\n { name: \"OSM Bright\", file: FileAttachment(\"osm-bright-style.json\") },\n { name: \"Dark Matter\", file: FileAttachment(\"dark-matter-style.json\") },\n { name: \"Fiord Color\", file: FileAttachment(\"fiord-color-style@1.json\") },\n { name: \"Toner\", file: FileAttachment(\"toner-style.json\") },\n { name: \"Positron\", file: FileAttachment(\"positron-style.json\") }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"tileBuf = new Protobuf(await d3.buffer(tileURL))","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"tileMVT = new vectorTileEsm.VectorTile(tileBuf)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1019,"value":"Object.values(tileMVT.layers).map(l => l.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"function mvtToGeoJson(mvt) {\n let layers = {};\n Object.values(mvt.layers).forEach(layer => {\n layers[layer.name] = layer.toGeoJSON(tileSize);\n });\n return layers;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"html`\n\n

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"html`\n\n

Roboto: The quick brown fox jumped over the lazy dog.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"tilePainter = import('tile-painter@0.1.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"tileStencil = import('tile-stencil@0.1.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"vectorTileEsm = import('vector-tile-esm@2.1.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"Protobuf = require('pbf')","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"d3 = require(\"d3-fetch@1\", \"d3-geo@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}