2b:null 2c:["$","title",null,{"children":"OS Vector Tile API Comparison and Dissector | johnx | Observable"}] 31:T772,viewof tileCoords = { const coords = { z: 15, x: 16092, y: 10212 }; const maxZoom = 20; const minZoom = 3; 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); pan.reset.onclick = () => reset(); function reset() { coords.x = 8046; coords.y = 5106; coords.z = 14; pan.dispatchEvent(new CustomEvent("input")); } function move(dz, dx, dy) { coords.x += dx; coords.y += dy; if (dz > 0 && coords.z < maxZoom) { coords.z += dz; coords.x *= 2; coords.y *= 2; } else if (dz < 0 && coords.z > minZoom) { 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:T4bb,preview = { const zoom = d3 .zoom() .scaleExtent([0.5, 8]) .on("zoom", zoomed); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .on("click", reset); const g = svg.append("g"); // Boundingbox g.append('path') .datum(getGeoJsonBbox(tileBounds)) .attr('d', d3.geoPath().projection(projection)) .attr('fill', '#f0f') .attr('fill-opacity', '.05') .attr('stroke', '#f0f') .attr('stroke-width', '2'); // Vectortile layer layers.map(layer => g .append('path') .datum(layer.features) .attr('d', d3.geoPath().projection(projection)) .attr('fill', layer.Types.includes("Polygon") ? '#000' : 'none') .attr('fill-opacity', '.06') .attr('stroke', '#000') .attr('stroke-width', '0.75') ); svg.call(zoom); function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function zoomed() { const { transform } = d3.event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node(); }33:T40a,md`## Vector Tile ${miniMap(400)} Property | Value ---|--- Center | \`\`lng=${d3 .geoCentroid(getGeoJsonBbox(tileBounds))[0] .toFixed(4)}, lat=${d3 .geoCentroid(getGeoJsonBbox(tileBounds))[1] .toFixed(4)}\`\` Tile Bounding Box | \`\`${tileBounds.leftbottom.lng.toFixed( 4 )}, ${tileBounds.leftbottom.lat.toFixed(4)}, ${tileBounds.righttop.lng.toFixed( 4 )}, ${tileBounds.righttop.lat.toFixed(4)}\`\` Dimensions | ${ tileCoords.z < 10 ? '-' : ( d3.geoDistance( [tileBounds.leftbottom.lng, tileBounds.leftbottom.lat], [tileBounds.righttop.lng, tileBounds.leftbottom.lat] ) * 6371000 ).toFixed(0) }m x ${( d3.geoDistance( [tileBounds.leftbottom.lng, tileBounds.leftbottom.lat], [tileBounds.leftbottom.lng, tileBounds.righttop.lat] ) * 6371000 ).toFixed(0)}m Circumference | ${(d3.geoLength(getGeoJsonBbox(tileBounds)) * 6371).toFixed( 2 )}km Layers | ${Object.keys(tile.layers).length} Features | ${tileStats.totalFeatures} Points | ${tileStats.totalPoints} `34:Tb76,layerInfo = { let layers = []; let counter = 1; for (let layer of Object.values(tile.layers)) { let bbox = { minlng: 0, minlat: 0, maxlng: 0, maxlat: 0 }; let featureTypes = []; let geometryTypes = {}; let features = []; let points = 0; let valueTypes = {}; let valueStringLength = 0; let keyStringLength = 0; let pointsPerFeature = []; let lengthPerFeature = []; let count = 0; for (let i = 0; i < layer.length; ++i) { let feature = layer .feature(i) .toGeoJSON(tileCoords.x, tileCoords.y, tileCoords.z); layer .feature(i) .loadGeometry() .map(item => (points += item.length)); features.push(feature); if (!featureTypes.includes(feature.geometry.type)) { featureTypes.push(feature.geometry.type); geometryTypes[feature.geometry.type] = 1; } else { geometryTypes[feature.geometry.type] += 1; } switch (feature.geometry.type) { case "Point": pointsPerFeature.push(1); lengthPerFeature.push(0); break; case "MultiPoint": pointsPerFeature.push(feature.geometry.coordinates.length); lengthPerFeature.push(0); break; case "LineString": pointsPerFeature.push(feature.geometry.coordinates.length); lengthPerFeature.push(d3.geoLength(feature) * 6371000); break; case "MultiLineString": case "Polygon": count = 0; feature.geometry.coordinates.map(d => (count += d.length)); pointsPerFeature.push(count); lengthPerFeature.push(d3.geoLength(feature) * 6371000); break; case "MultiPolygon": count = 0; feature.geometry.coordinates.map(d => { d.map(e => (count += e.length)); }); pointsPerFeature.push(count); lengthPerFeature.push(d3.geoLength(feature) * 6371000); break; } } layer._values.map(value => { let type = typeof value; if (valueTypes[type]) valueTypes[type] += 1; else valueTypes[type] = 1; if (type === "string") valueStringLength += value.length; }); layer._keys.map(key => { keyStringLength += key.length; }); layers.push({ '#': counter++, name: layer.name, // bbox: d3.geoBounds({ type: "FeatureCollection", features }), features: layer.length, points: points, // types: featureTypes.join(', '), geometryTypes: geometryTypes, "#Keys": layer._keys.length, "#Values": layer._values.length, keys: layer._keys.join(', '), keyStringLength: keyStringLength, valueTypes: valueTypes, valueStringLength: valueStringLength, pointsPerFeature: pointsPerFeature, lengthPerFeature: lengthPerFeature }); } return layers; }35:T685,html``36:[] 2f:{"id":"1e15aff5a8987202","slug":"os-vector-tile-api-comparison-and-dissector","title":"OS Vector Tile API Comparison and Dissector","thumbnail":"7ad34c3fa534f54f02a766065b926b75f283da1c6506bd7b803203888fe2bce2","access_level":"public","create_time":"$D2020-09-15T09:28:26.458Z","update_time":"$D2020-12-16T15:26:27.557Z","view_time":null,"first_public_time":"$D2020-09-15T10:00:34.012Z","fork":{"id":"93206ce662576c1d","slug":"mapbox-vector-tile-dissector","title":"Mapbox Vector Tile (MVT) Comparison and Dissector","owner":{"id":"f133cd64bec97972","login":"henrythasler","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"694a515e88970367","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":"starter_2024"},"version":2119,"publish_version":2119,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7851601ec4f2322","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":null}],"members":[{"type":"individual","id":"a7851601ec4f2322","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7f988f55ce59f462","slug":"os-data-hub-tools","title":"OS Data Hub tools","owner":{"id":"694a515e88970367","login":"johnx25bd","name":"johnx"}},"type":"notebook","body":{"title":"OS Vector Tile API Comparison and Dissector","cells":[{"id":0,"value":"md`# OS Vector Tile API Comparison and Dissector\n\nShow detailed information and statistics of a vector tile. Used to inspect vector tiles served by the OS Vector Tile API.\n\nForked from [@henrythasler/mapbox-vector-tile-dissector](https://observablehq.com/@henrythasler/mapbox-vector-tile-dissector).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2089,"value":"viewof OS_ACCESS_TOKEN = text({\n title: \"OS Data Hub API Key (Premium plan)\",\n placeholder: \"Paste key here\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2088,"value":"OSKEY = validateKey(OS_ACCESS_TOKEN, 'vector-tile')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`## Source`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"source = `https://api.os.uk/maps/vector/v1/vts/tile/{z}/{y}/{x}.pbf?key=${OS_ACCESS_TOKEN}&srs=3857`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"md`z=\\`${tileCoords.z} x=${tileCoords.x} y=${tileCoords.y}\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"viewof url = textarea({\n title: \"resulting url or manual input\",\n value: `${source\n .replace(/{z}/g, `${tileCoords.z}`)\n .replace(/{x}/g, `${tileCoords.x}`)\n .replace(/{y}/g, `${tileCoords.y}`)}`,\n spellcheck: true,\n width: \"100%\",\n rows: 2,\n submit: \"Use\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`## Preview\n*Use **mousewheel** to zoom and **leftclick** to reset*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`## File\nProperty | Value | Evaluation | Comment\n---|---|:---:|---\nSize (uncompressed) | ${Math.ceil(mvt.data.byteLength / 1024)} KiB (${\n mvt.data.byteLength\n} Bytes)| ${\n mvt.data.byteLength > 0\n ? mvt.data.byteLength < 400000\n ? '💚'\n : mvt.data.byteLength > 500000\n ? '💔'\n : '💛'\n : '💔'\n} | ${\n mvt.data.byteLength < 400000\n ? 'Nice!'\n : 'Try to reduce the size of your vector tile.'\n} |\nNumber of Layers | ${Object.keys(tile.layers).length} | ${\n Object.keys(tile.layers).length >= 1 ? '💚' : '💔'\n} | ${\n Object.keys(tile.layers).length >= 1\n ? 'Nice!'\n : 'A Vector Tile SHOULD contain at least one layer.'\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"md`## Layer Details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"{\n let info = [];\n layerInfo.map(item => {\n info.push({\n '#': item['#'],\n name: item.name,\n features: item.features,\n points: item.points,\n '#Keys': item['#Keys'],\n '#Values': item['#Values'],\n keys: item.keys,\n keyStringLength: item.keyStringLength,\n valueTypes: item.valueTypes,\n valueStringLength: item.valueStringLength\n });\n });\n return table(info);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"md`## Statistics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"md`### Tile geometry\ngeometryType | Count\n---|---\nPoint | ${tileStats.Points}\nLineString | ${tileStats.LineStrings}\nPolygon | ${tileStats.Polygons}\nMultiPoint | ${tileStats.MultiPoints}\nMultiLineString | ${tileStats.MultiLineStrings}\nMultiPolygon | ${tileStats.MultiPolygons}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1757,"value":"md`### Layer geometry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1747,"value":"{\n let info = [];\n layerInfo.map(item => {\n info.push({\n '#': item['#'],\n name: item.name,\n geometryTypesCount: item.geometryTypes,\n pointsPerFeature: {\n min: round(d3.min(item.pointsPerFeature), 2),\n max: round(d3.max(item.pointsPerFeature), 2),\n mean: round(d3.mean(item.pointsPerFeature), 2),\n deviation: round(d3.deviation(item.pointsPerFeature), 2),\n \"95.4%-Percentile\": round(d3.quantile(item.pointsPerFeature, 0.954), 2)\n },\n \"lengthPerFeature [m]\": {\n min: round(d3.min(item.lengthPerFeature), 2),\n max: round(d3.max(item.lengthPerFeature), 2),\n mean: round(d3.mean(item.lengthPerFeature), 2),\n deviation: round(d3.deviation(item.lengthPerFeature), 2),\n \"95.4%-Percentile\": round(d3.quantile(item.lengthPerFeature, 0.954), 2)\n }\n });\n });\n return table(info);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"md`## Vector Tile Optimization Hints\n\n- Generate zoom-dependent vector tiles and encode only features you will display.\n- Remove names from features if they are not shown in a specific zoom level.\n- Remove numeric (or other) identifier (e.g. 'gid', 'id') from the properties unless absolutely necessary.\n- Remove all unused properties.\n- Reduce the buffer around your vector tile. 64 coordinate units is usually fine for zoom-level up to 14. Increase up to 256 until zoom level 17.\n- Define background as landmass and add oceans as features.\n\nSee also [Optimizing vector tile size](https://blog.cyclemap.link/2020-02-02-optimizing-vectortiles)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"height = 512","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mvt = await fetch(url)\n .then(async response => {\n return {\n data: await response.arrayBuffer(),\n headers: response.headers,\n ok: response.ok\n };\n })\n .catch(e => {\n return {\n data: new ArrayBuffer(0),\n headers: new Headers(),\n ok: false\n };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"tile = {\n if (mvt.ok) {\n return new VectorTile(new Protobuf(mvt.data))\n }\n else return {\n layers:{}\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"layers = {\n let layers = [];\n let counter = 1;\n for (let layer of Object.values(tile.layers)) {\n let featureTypes = [];\n let features = [];\n for (let i = 0; i < layer.length; ++i) {\n let feature = layer\n .feature(i)\n .toGeoJSON(tileCoords.x, tileCoords.y, tileCoords.z);\n if (!featureTypes.includes(feature.geometry.type)) {\n featureTypes.push(feature.geometry.type);\n }\n features.push(feature);\n }\n layers.push({\n '#': counter++,\n Layer: layer.name,\n Types: featureTypes,\n features: { type: \"FeatureCollection\", features }\n });\n }\n return layers;\n}\n/*\nfunction geojson(index, layer, filter = () => true) {\n if (!layer) return;\n const features = [];\n for (let i = 0; i < layer.length; ++i) {\n const f = layer.feature(i).toGeoJSON(index.x, index.y, index.z);\n if (filter.call(null, f, i, features)) features.push(f);\n }\n return {type: \"FeatureCollection\", features};\n}*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"tileBounds = getWGS84TileBounds(tileCoords)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"fileExtension = new URL(url).pathname.split('.').pop()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"tileStats = {\n const stats = {\n totalFeatures: 0,\n totalPoints: 0,\n Points: 0,\n LineStrings: 0,\n Polygons: 0,\n MultiPoints: 0,\n MultiLineStrings: 0,\n MultiPolygons: 0\n };\n layerInfo.map(layer => {\n stats.totalFeatures += layer.features;\n stats.totalPoints += layer.points;\n stats.Points += layer.geometryTypes.Point ? layer.geometryTypes.Point : 0;\n stats.LineStrings += layer.geometryTypes.LineString\n ? layer.geometryTypes.LineString\n : 0;\n stats.Polygons += layer.geometryTypes.Polygon\n ? layer.geometryTypes.Polygon\n : 0;\n stats.MultiPoints += layer.geometryTypes.MultiPoint\n ? layer.geometryTypes.MultiPoint\n : 0;\n stats.MultiLineStrings += layer.geometryTypes.MultiLineString\n ? layer.geometryTypes.MultiLineString\n : 0;\n stats.MultiPolygons += layer.geometryTypes.MultiPolygon\n ? layer.geometryTypes.MultiPolygon\n : 0;\n });\n\n return stats;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"projection = {\n const padding = 0.85;\n const projection = d3.geoMercator().fitSize([width * padding, height * padding], getGeoJsonBbox(tileBounds));\n const zoom = Math.log2(projection.scale() * (2 * Math.PI));\n const scale = Math.pow(2, zoom) / (2 * Math.PI);\n const offset = [width / 2, height / 2];\n const center = d3.geoCentroid(getGeoJsonBbox(tileBounds))\n \n projection.center(center);\n projection.scale(scale);\n projection.translate(offset);\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"function getWGS84FromMercator(pos) {\n const lon = (pos.x / (2 * Math.PI * 6378137 / 2.0)) * 180.0;\n let lat = (pos.y / (2 * Math.PI * 6378137 / 2.0)) * 180.0;\n lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180.0)) - Math.PI / 2.0);\n return { lng: lon % 360, lat: lat % 180 };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"function getMercatorFromPixels(pos, zoom, tileSize = 256) {\n // zoom = Math.max(0, zoom + 1 - tileSize / 256)\n const res = 2 * Math.PI * 6378137 / tileSize / Math.pow(2, zoom);\n return { x: pos.x * res - (2 * Math.PI * 6378137 / 2.0), y: (2 * Math.PI * 6378137 / 2.0) - pos.y * res };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"function getMercatorTileBounds(tile, tileSize = 256) {\n const leftbottom = getMercatorFromPixels({ x: tile.x * tileSize, y: (tile.y + 1) * tileSize }, tile.z, tileSize);\n const righttop = getMercatorFromPixels({ x: (tile.x + 1) * tileSize, y: tile.y * tileSize }, tile.z, tileSize);\n return { leftbottom, righttop };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"function getWGS84TileBounds(tile, tileSize = 256) {\n const bounds = getMercatorTileBounds(tile, tileSize);\n return {\n leftbottom: getWGS84FromMercator(bounds.leftbottom),\n righttop: getWGS84FromMercator(bounds.righttop)\n };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"function getGeoJsonBbox(bbox) {\n return {\n type: \"LineString\",\n coordinates: [\n [bbox.leftbottom.lng,bbox.leftbottom.lat], \n [bbox.leftbottom.lng,bbox.righttop.lat], \n [bbox.righttop.lng,bbox.righttop.lat], \n [bbox.righttop.lng,bbox.leftbottom.lat], \n [bbox.leftbottom.lng,bbox.leftbottom.lat]\n ]\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1799,"value":"function round(value, digits) {\n return value ? parseFloat(value.toFixed(digits)) : NaN;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"md`## UI Elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"function miniMap(width = 300) {\n const height = Math.round((210 / 400) * width);\n const context = DOM.context2d(width, height);\n const projection = d3\n .geoNaturalEarth1()\n .precision(0.1)\n .fitSize([width, height], { type: \"Sphere\" });\n \n const path = d3.geoPath(projection, context).pointRadius(1.5);\n (context.fillStyle = \"#fff\"), context.fillRect(0, 0, width, height);\n context.beginPath(),\n path(land),\n (context.fillStyle = \"#ddd\"),\n context.fill();\n\nconst pointPath = { type: \"MultiPoint\", coordinates: [d3.geoCentroid(getGeoJsonBbox(tileBounds))] }; \n context.beginPath(),\n path(pointPath),\n (context.lineWidth = 3),\n (context.strokeStyle = \"#f00\"),\n context.stroke(); \n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"d3 = require(\"d3-geo@1\", \"d3-fetch@1\", \"d3-tile@1\", \"d3-selection@1\", \"d3-zoom@1\", \"d3-array@1\", \"d3-scale@1\", \"d3-axis@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"VectorTile = (await require(\"https://bundle.run/@mapbox/vector-tile@1.3.1\")).VectorTile","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Protobuf = require(\"pbf@3.1.0/dist/pbf.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"import { table } from \"@henrythasler/fancy-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"import {textarea, radio, worldMapCoordinates} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1245,"value":"world = (await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"import { validateKey } from \"@johnx25bd/os\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2092,"value":"import { text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"md`## References\n\n- [Vector tile specification](https://github.com/mapbox/vector-tile-spec/tree/master/2.1)\n- [Vector tile specification explained](https://docs.mapbox.com/vector-tiles/specification)\n- [@jjhembd/vector-tile-rendering](https://observablehq.com/@jjhembd/vector-tile-rendering) for navigation UI.\n- [emojipedia.org](https://emojipedia.org/)\n- [Protocol Buffers Encoding](https://developers.google.com/protocol-buffers/docs/encoding)\n- [D3 API Reference](https://github.com/d3/d3/blob/master/API.md)\n- [Here Vector Tiles Service](https://developer.here.com/documentation/vector-tiles-api/dev_guide/)\n- [Azure IoT Maps Functional API](https://docs.microsoft.com/en-us/rest/api/maps/render/getmaptile#maptilestyle)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"