2f:null 30:["$","title",null,{"children":"Mapbox Vector Tile (MVT) Comparison and Dissector | Brett Camper | Observable"}] 35:T78c,viewof source = radio({ options: [ { label: 'cloud-tileserver', value: 'https://tiles.cyclemap.link/local/{z}/{x}/{y}.mvt' }, { label: 'tegola.io', value: 'https://tegola-osm-demo.go-spatial.org/v1/maps/osm/{z}/{x}/{y}' }, { label: 'nextzen', value: `https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt?api_key=${NEXTZEN_ACCESS_TOKEN}` }, { label: 'maptiler', value: `https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=${MAPTILER_ACCESS_TOKEN}` }, { label: 'here.com', // https://vector.hereapi.com/swagger.json value: `https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=${HERE_ACCESS_TOKEN}` }, { label: 'here.com (Traffic)', // https://developer.here.com/documentation/vector-tiles-api/api-reference-trafficvectordata.html value: `https://traffic.vector.hereapi.com/v2/traffictiles/traffic/mc/{z}/{x}/{y}/omv?apikey=${HERE_ACCESS_TOKEN}` }, { label: 'Azure Maps', value: `https://atlas.microsoft.com/map/tile/pbf?api-version=1.0&layer=basic&style=main&zoom={z}&x={x}&y={y}&subscription-key=${AZURE_ACCESS_TOKEN}` }, { label: 'mapbox-streets-v8', value: `https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=${MAPBOX_ACCESS_TOKEN}` }, { label: 'mapbox-terrain-v2', value: `https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.mvt?access_token=${MAPBOX_ACCESS_TOKEN}` }, { label: 'cloud-tileserver (global)', value: 'https://tiles.cyclemap.link/global/{z}/{x}/{y}.mvt' }, { label: 'localhost', value: 'http://localhost:8000/local/{z}/{x}/{y}.mvt' }, { label: 'localhost (original)', value: 'http://localhost:8000/original/{z}/{x}/{y}.mvt' } ], value: 'https://tiles.cyclemap.link/local/{z}/{x}/{y}.mvt' })36:T770,viewof tileCoords = { const coords = { z: 14, x: 8717, y: 5683 }; 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 = 8717; coords.y = 5683; 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; }37: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(); }38:T4cd,md`## File Property | Value | Evaluation | Comment ---|---|:---:|--- Size (uncompressed) | ${Math.ceil(mvt.data.byteLength / 1024)} KiB (${ mvt.data.byteLength } Bytes)| ${ mvt.data.byteLength > 0 ? mvt.data.byteLength < 200000 ? '💚' : mvt.data.byteLength > 500000 ? '💔' : '💛' : '💔' } | ${ mvt.data.byteLength < 200000 ? '' : 'Try to reduce the size of your vector tile.' } Content-Type | ${mvt.headers.get('Content-Type')} | ${ mvt.headers.get('Content-Type') === "application/vnd.mapbox-vector-tile" ? '💚' : '💔' } | ${ mvt.headers.get('Content-Type') === "application/vnd.mapbox-vector-tile" ? '' : 'When serving Vector Tiles the MIME type SHOULD be \`\'application/vnd.mapbox-vector-tile\'\`.' } Filename Extension | ${fileExtension} | ${ fileExtension === 'mvt' ? '💚' : '💔' }|${ fileExtension === 'mvt' ? '' : 'The filename extension for Vector Tile files SHOULD be \`\'mvt\'\`' } Number of Layers | ${Object.keys(tile.layers).length} | ${ Object.keys(tile.layers).length >= 1 ? '💚' : '💔' } | ${ Object.keys(tile.layers).length >= 1 ? '' : 'A Vector Tile SHOULD contain at least one layer.' }`39:Tbeb,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 withId = 0; let count = 0; for (let i = 0; i < layer.length; ++i) { let feature = layer .feature(i) .toGeoJSON(tileCoords.x, tileCoords.y, tileCoords.z); if (feature.id != null) withId++; 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, withId: withId, // bbox: d3.geoBounds({ type: "FeatureCollection", features }), features: layer.length, extent: layer.extent, 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; }3a:T685,html``3b:[] 33:{"id":"47de6a525c9a1e6b","slug":"mapbox-vector-tile-mvt-comparison-and-dissector","title":"Mapbox Vector Tile (MVT) Comparison and Dissector","thumbnail":"e80f661f9e2775ad730fc5687634573be33ce6f3ebbcbe18ddc1d98b69ca940c","access_level":"public","create_time":"$D2021-10-11T22:56:24.069Z","update_time":"$D2022-12-21T14:55:40.736Z","view_time":null,"first_public_time":"$D2021-10-11T23:10:08.322Z","has_unpublished_edits":null,"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":"c53130f001c03e79","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":"starter_2024"},"version":2059,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9facf0ed218e9eb6","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":null}],"members":[{"type":"individual","id":"9facf0ed218e9eb6","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mapbox Vector Tile (MVT) Comparison and Dissector","cells":[{"id":0,"value":"md`# Mapbox Vector Tile (MVT) Comparison and Dissector\n\nShow detailled information and statistics of a vector tile. Used to inspect vector tiles served by my [cloud-tileserver](https://github.com/henrythasler/cloud-tileserver).\n\nSeveral other vector tile provider were added for additional comparison.\n`","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":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"$36","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":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`## Vector Tile\n${miniMap(400)}\nProperty | Value\n---|---\nCenter | lng=${d3\n .geoCentroid(getGeoJsonBbox(tileBounds))[0]\n .toFixed(4)}, lat=${d3.geoCentroid(getGeoJsonBbox(tileBounds))[1].toFixed(4)}\nTile Boundingbox | ${tileBounds.leftbottom.lng.toFixed(\n 4\n)}, ${tileBounds.leftbottom.lat.toFixed(4)}, ${tileBounds.righttop.lng.toFixed(\n 4\n)}, ${tileBounds.righttop.lat.toFixed(4)}\nDimensions | ${\n tileCoords.z < 10\n ? '-'\n : (\n d3.geoDistance(\n [tileBounds.leftbottom.lng, tileBounds.leftbottom.lat],\n [tileBounds.righttop.lng, tileBounds.leftbottom.lat]\n ) * 6371000\n ).toFixed(0)\n}m x ${(\n d3.geoDistance(\n [tileBounds.leftbottom.lng, tileBounds.leftbottom.lat],\n [tileBounds.leftbottom.lng, tileBounds.righttop.lat]\n ) * 6371000\n).toFixed(0)}m\nCircumfence | ${(d3.geoLength(getGeoJsonBbox(tileBounds)) * 6371).toFixed(2)}km\nLayers | ${Object.keys(tile.layers).length}\nFeatures | ${tileStats.totalFeatures}\nPoints | ${tileStats.totalPoints}\n`","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 extent: item.extent\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":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2054,"value":"","pinned":true,"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":1864,"value":"md`## API-Keys\n\nSome providers require API-Keys to request the vector tiles. The following keys are linked to this notebook and can't be used anywhere else. Get your own key if needed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"MAPBOX_ACCESS_TOKEN = \"pk.eyJ1IjoibXljeWNsZW1hcCIsImEiOiJjazRsNW9mY3cwaGV6M2psNWJ1ZTNueTFpIn0.yFXUQHd_ghVD2qoeOWAbQg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"NEXTZEN_ACCESS_TOKEN = \"fYFPuX-sQ76LIEN8-U_lVQ\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"MAPTILER_ACCESS_TOKEN = \"TGPyfofSi5JFXJy6MBFe\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1843,"value":"HERE_ACCESS_TOKEN = \"xcWh7a01IMWs0t0muZzYntR7TnJhu5W2mDsg5bDeptE\" // get your own at https://developer.here.com","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1895,"value":"AZURE_ACCESS_TOKEN = \"7RkyY2xun2dPtbceJz2AFjPx2WL669f_k5IGXvfWLuk\"","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":"$3a","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":1858,"value":"md`## Copyright and attribution\n\nThe following copyright notes and attributions may, depending on the actual provider, apply to the vector tiles used in this notebook.\n\n[© HERE 2019](https://developer.here.com/documentation/vector-tiles-api/dev_guide/topics/required-copyright-notice.html)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1905,"value":"{\n let response = await fetch(\n `https://atlas.microsoft.com/map/copyright/tile/json?api-version=1.0&zoom={z}&x={x}&y={y}&subscription-key=${AZURE_ACCESS_TOKEN}`\n .replace(/{z}/g, `${tileCoords.z}`)\n .replace(/{x}/g, `${tileCoords.x}`)\n .replace(/{y}/g, `${tileCoords.y}`)\n ).then(async response => {\n return await response.json();\n });\n return response.generalCopyrights[1];\n}","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":"$W3b","stdlib":"1","titling":"auto"}} 34:"$33:body"