31:T5b0,map = { const container = yield htl.html`

`; const urlParams = new URLSearchParams(window.location.search); const start = { z: urlParams.has("z") ? parseInt(urlParams.get("z")) : initialTile.z, x: urlParams.has("x") ? parseInt(urlParams.get("x")) : initialTile.x, y: urlParams.has("y") ? parseInt(urlParams.get("y")) : initialTile.y }; const initialTileBounds = getWGS84TileBounds(start); const initialRect = L.latLngBounds( initialTileBounds.leftbottom, initialTileBounds.righttop ); const map = L.map(container).setView(initialRect.getCenter(), start.z); L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", { attribution: "Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap contributors" }).addTo(map); let selected = L.rectangle(initialRect, { color: "#ff8000", weight: 3 }).addTo(map); map.on("click", (e) => { let tile = map.project(e.latlng, map.zoom).floor(); let coords = { z: map.getZoom(), x: Math.floor(tile.x / 256), y: Math.floor(tile.y / 256) }; mutable tileCoords = { z: coords.z, x: coords.x, y: coords.y }; let tileBounds = getWGS84TileBounds(coords); let bounds = L.latLngBounds(tileBounds.leftbottom, tileBounds.righttop); selected.setBounds(bounds); }); }32:T555,svgRender = { const zoom = d3 .zoom() .scaleExtent([0.25, 16]) .on("zoom", ({ transform }) => zoomed(transform)); 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", previewStyle.boundingBox.fill) .attr("fill-opacity", previewStyle.boundingBox.fillOpacity) .attr("stroke", previewStyle.boundingBox.stroke) .attr("stroke-width", previewStyle.boundingBox.strokeWidth); // Vectortile layer const start = performance.now(); visibleLayers.map((layer) => { return renderStyledGeoJSON(g, layer.features, projection); }); const elapsed = performance.now() - start; svg .append("text") .text(`Rendered in ${elapsed}ms`) .attr("x", 0) .attr("y", height - 2); //svg.append("text").text(copyrightInfo).attr("x", 0).attr("y", height - 4); 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(transform) { g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node(); }33:T7a8,## Vector Tile Properties | | | ---|---|:---:|--- **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\'\`.' } **File Extension** | ${fileExtension} | ${ fileExtension === 'mvt' ? '💚' : '💔' }|${ fileExtension === 'mvt' ? '' : 'The filename extension for Vector Tile files SHOULD be \`\'mvt\'\`' } **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.' } **Center** | lng=${d3 .geoCentroid(getGeoJsonBbox(tileBounds))[0] .toFixed(4)}, lat=${d3.geoCentroid(getGeoJsonBbox(tileBounds))[1].toFixed(4)} **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)}m34:Td72,function renderStyledGeoJSON(svgElement, featureCollection, projection) { const features = featureCollection.type === "FeatureCollection" ? featureCollection.features : [featureCollection]; function drawPolygon(svg, shape) { svg .append("path") .attr("d", shape) .attr("fill", previewStyle.polygon.fill) .attr("fill-opacity", previewStyle.polygon.fillOpacity) .attr("fill-rule", "evenodd") // Important for holes .attr("stroke", previewStyle.polygon.stroke) .attr("stroke-linejoin", "round") .attr("stroke-width", previewStyle.polygon.strokeWidth); } function drawLineString(svg, shape) { svg .append("path") .attr("d", shape) .attr("fill", "none") .attr("stroke", previewStyle.lineString.stroke) .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") .attr("stroke-width", previewStyle.lineString.strokeWidth); } function drawPoints(svg, shape) { svg .append("path") .attr("d", shape) .attr("fill", previewStyle.point.fill) .attr("fill-opacity", previewStyle.point.fillOpacity) .attr("stroke", previewStyle.point.stroke) .attr("stroke-width", previewStyle.point.strokeWidth); } features .map((feature) => { const geom = feature.geometry; if (geom.type === "Polygon") { const svgFeature = geom.coordinates .map((ring) => { const coords = ring.map(projection); return "M" + coords.map((d) => d.join(",")).join("L") + "Z"; }) .join(""); drawPolygon(svgElement, svgFeature); } if (geom.type === "MultiPolygon") { const svgFeature = geom.coordinates .map((polygon) => { return polygon .map((ring) => { const coords = ring.map(projection); return "M" + coords.map((d) => d.join(",")).join("L") + "Z"; }) .join(""); }) .join(""); drawPolygon(svgElement, svgFeature); } if (geom.type === "LineString") { const coords = geom.coordinates.map(projection); const svgFeature = "M" + coords.map((d) => d.join(",")).join("L"); drawLineString(svgElement, svgFeature); } if (geom.type === "MultiLineString") { const svgFeature = geom.coordinates .map((line) => { const coords = line.map(projection); return "M" + coords.map((d) => d.join(",")).join("L"); }) .join(""); drawLineString(svgElement, svgFeature); } if (geom.type === "Point") { const [x, y] = projection(geom.coordinates); const r = 3; // radius // Draw a circle using SVG arc commands const svgFeature = `M${x - r},${y}a${r},${r} 0 1,0 ${ r * 2 },0a${r},${r} 0 1,0 ${-r * 2},0`; drawPoints(svgElement, svgFeature); } if (geom.type === "MultiPoint") { const svgFeature = geom.coordinates .map((coord) => { const [x, y] = projection(coord); const r = 3; return `M${x - r},${y}a${r},${r} 0 1,0 ${r * 2},0a${r},${r} 0 1,0 ${ -r * 2 },0`; }) .join(""); drawPoints(svgElement, svgFeature); } return ""; }) .join(""); return svgElement; }35:Tb82,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; }36:T98d,tileProviderList = [ { name: "cloud-tileserver", urlTemplate: "https://tiles.cyclemap.link/local/{z}/{x}/{y}.mvt", attributionId: "osm", website: "https://github.com/henrythasler/cloud-tileserver" }, { name: "Mapbox Streets v8", urlTemplate: `https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=${MAPBOX_ACCESS_TOKEN}`, attributionId: "mapbox", website: "https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/" }, { // see https://vector.hereapi.com/swagger.json name: "HERE", urlTemplate: `https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=${HERE_ACCESS_TOKEN}`, attributionId: "here", website: "https://www.here.com/docs/bundle/vector-tile-api-developer-guide/page/README.html" }, { name: "Azure Maps Base", urlTemplate: `https://atlas.microsoft.com/map/tile?api-version=2024-04-01&tilesetId=microsoft.base&zoom={z}&x={x}&y={y}&subscription-key=${AZURE_ACCESS_TOKEN}`, attributionId: "azure", website: "https://learn.microsoft.com/en-us/rest/api/maps/render/get-map-tile?view=rest-maps-2025-01-01&tabs=HTTP" }, { name: "MapTiler Planet v4", urlTemplate: `https://api.maptiler.com/tiles/v4/{z}/{x}/{y}.pbf?key=${MAPTILER_ACCESS_TOKEN}`, attributionId: "maptiler", website: "https://docs.maptiler.com/schema/planet-v4/" }, { name: "VersaTiles", urlTemplate: "https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}", attributionId: "osm", website: "https://docs.versatiles.org/guides/use_tiles_versatiles_org.html" }, { name: "tegola.io", urlTemplate: "https://tegola-osm-demo.go-spatial.org/v1/maps/osm/{z}/{x}/{y}", attributionId: "osm", website: "https://tegola.io/" }, { name: "Nextzen", urlTemplate: `https://tile.nextzen.org/tilezen/vector/v1/256/all/{z}/{x}/{y}.mvt?api_key=${NEXTZEN_ACCESS_TOKEN}`, attributionId: "nextzen", website: "https://www.nextzen.org/" }, { name: "Stadia Maps", urlTemplate: `https://tiles-eu.stadiamaps.com/data/openmaptiles/{z}/{x}/{y}.pbf`, attributionId: "stadia", website: "https://docs.stadiamaps.com/vector/" }, { name: "localhost (opentopomap_europe)", urlTemplate: "http://localhost:8080/data/opentopomap_europe/{z}/{x}/{y}.pbf", website: "#" }, { name: "custom", urlTemplate: null, website: "#" } ]37:Ta70,tileProviderAttribution = [ { id: "osm", getAttribution: async function () { return "Map data from [OpenStreetMap](https://openstreetmap.org/copyright)"; } }, { id: "maptiler", getAttribution: async function () { return "© [MapTiler](https://maptiler.com/copyright) © [OpenStreetMap contributors](https://openstreetmap.org/copyright)"; } }, { id: "nextzen", getAttribution: async function () { return "© [OpenStreetMap contributors](https://openstreetmap.org/copyright) | [Nextzen](https://www.nextzen.com/)"; } }, { id: "mapbox", getAttribution: async function () { return "© [Mapbox](https://www.mapbox.com/about/maps) © [OpenStreetMap](https://openstreetmap.org/copyright)"; } }, { // https://docs.stadiamaps.com/attribution/ id: "stadia", getAttribution: async function () { return "© [Stadia Maps](https://stadiamaps.com) © [OpenMapTiles](https://openmaptiles.org/) © [OpenStreetMap](https://www.openstreetmap.org/copyright)"; } }, { // https://learn.microsoft.com/en-us/rest/api/maps/render/get-copyright-for-tile?view=rest-maps-2025-01-01&tabs=HTTP id: "azure", getAttribution: async function () { const copyrightUrl = `https://atlas.microsoft.com/map/copyright/tile/json?api-version=2024-04-01&zoom=${tileCoords.z}&x=${tileCoords.x}&y=${tileCoords.y}&subscription-key=${AZURE_ACCESS_TOKEN}`; const response = await fetch(copyrightUrl); const content = await response.json(); return content.generalCopyrights[0]; //.split(".").at(0); } }, { id: "here", getAttribution: async function () { const copyrightUrl = `https://vector.hereapi.com/v2/vectortiles/copyright?apikey=${HERE_ACCESS_TOKEN}`; const response = await fetch(copyrightUrl); const content = await response.json(); const copyrightProviders = []; console.log(content.base); for (let item of content.base) { let mustAdd = false; if (tileCoords.z >= item.minLevel && tileCoords.z <= item.maxLevel) { for (let box of item.boxes) { if ( tileBounds.leftbottom.lat >= box.at(0) && tileBounds.leftbottom.lng >= box.at(1) && tileBounds.righttop.lat <= box.at(2) && tileBounds.righttop.lng <= box.at(3) ) { mustAdd = true; } } } if (mustAdd) { copyrightProviders.push(item.label); } } const sep = copyrightProviders.length ? ", " : ""; return `© 2026 HERE${sep}${copyrightProviders.join(", ")}`; } } ]38:T518,preview = { const zoom = d3 .zoom() .scaleExtent([0.0, 8]) .on("zoom", ({ transform }) => zoomed(transform)); 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) => { // if (["waterarea", "water_polygons", "buildings"].includes(layer.Layer)) { return 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(transform) { g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return null; //svg.node(); }39:[] 2f:{"title":"Vector Tile Analyzer","cells":[{"id":0,"value":"# Vector Tile Analyzer\n\nThe purpose of this Notebook is to help analyze the structure and properties of Vector Tiles as defined in [Vector Tile Specification](https://github.com/mapbox/vector-tile-spec/tree/master/2.1). It is meant as a tool to support the creation of lean and efficient vector tiles that provide the best user experience. \n\nIt is also an improved version of my [Mapbox Vector Tile (MVT) Comparison and Dissector](https://observablehq.com/@henrythasler/mapbox-vector-tile-dissector).","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"## Tile\n\nSelect a tile on the map to analyze:","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"## Provider\n\nSelect vector tile source:","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"Enter a valid URL pattern for a custom tile source. Supported placeholders are `{z}` `{x}` and `{y}`.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"viewof tileProvider = Inputs.radio(tileProviderList, {\n value: tileProviderList.find((item) => {\n const urlParams = new URLSearchParams(window.location.search);\n const start = urlParams.has(\"provider\")\n ? urlParams.get(\"provider\")\n : initialTile.provider;\n return item.name == start;\n }),\n format: (x) => x.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"viewof customUrl = Inputs.text({\n label: \"Custom URL\",\n value: \"http://localhost:8080/data/opentopomap_europe/{z}/{x}/{y}.pbf\",\n width: \"100%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"## Tile Coordinates \n`z: ${tileCoords.z}, x: ${tileCoords.x}, y: ${tileCoords.y}` ([permalink](https://observablehq.com/@henrythasler/vector-tile-analyzer?provider=${encodeURI(tileProvider.name)}&z=${tileCoords.z}&x=${tileCoords.x}&y=${tileCoords.y}))","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"viewof url = Inputs.textarea({\n label: \"URL\",\n value: `${(tileProvider.name == \"custom\"\n ? customUrl\n : tileProvider.urlTemplate\n )\n .replace(/{z}/g, `${tileCoords.z}`)\n .replace(/{x}/g, `${tileCoords.x}`)\n .replace(/{y}/g, `${tileCoords.y}`)}`,\n width: \"100%\",\n submit: \"Use\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"## Preview\n\nUse **mouse** to pan, **mousewheel** to zoom and **leftclick** to reset view","pinned":false,"hidden":false,"mode":"md"},{"id":570,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"viewof visibleLayers = Inputs.checkbox(layers, {\n value: layers,\n format: (x) => x.Layer\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"## Copyright and Attribution\n\nTile-Provider: [${tileProvider.name}](${tileProvider.website})\n\nThe following copyright notes and attributions apply to the current vector tile used in this notebook:\n\n\n> *${copyrightInfo}*\n","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":806,"value":"## Layer Details","pinned":false,"hidden":false,"mode":"md"},{"id":808,"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"},{"id":814,"value":"## Statistics","pinned":false,"hidden":false,"mode":"md"},{"id":816,"value":"### Tile Features\ngeometryType | Count\n---|---\nPoint | ${tileStats.Points}\nLineString | ${tileStats.LineStrings}\nPolygon | ${tileStats.Polygons}\nMultiPoint | ${tileStats.MultiPoints}\nMultiLineString | ${tileStats.MultiLineStrings}\nMultiPolygon | ${tileStats.MultiPolygons}","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"### Layers","pinned":false,"hidden":false,"mode":"md"},{"id":866,"value":"{\n return Plot.plot({\n marginBottom: 60,\n x: {\n tickRotate: -30\n },\n y: {\n label: \"Points\",\n grid: 10\n },\n marks: [\n Plot.ruleY([0]),\n Plot.barY(layerInfo, {\n x: \"name\",\n y: \"points\",\n sort: { x: \"y\", reverse: true, limit: 32 },\n fill: \"steelblue\"\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"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"},{"id":322,"value":"## Feature Properties","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"layers","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"tileBounds = getWGS84TileBounds(tileCoords)","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"projection = {\n const padding = 0.85;\n const projection = d3\n .geoMercator()\n .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"},{"id":236,"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"},{"id":230,"value":"function getMercatorFromPixels(pos, zoom, tileSize = 256) {\n const res = (2 * Math.PI * 6378137) / tileSize / Math.pow(2, zoom);\n return {\n x: pos.x * res - (2 * Math.PI * 6378137) / 2.0,\n y: (2 * Math.PI * 6378137) / 2.0 - pos.y * res\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"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"},{"id":234,"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"},{"id":266,"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"},{"id":730,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"function round(value, digits) {\n return value ? parseFloat(value.toFixed(digits)) : NaN;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"mutable tileCoords = {\n var urlParams = new URLSearchParams(window.location.search);\n return {\n z: urlParams.has(\"z\") ? parseInt(urlParams.get(\"z\")) : initialTile.z,\n x: urlParams.has(\"x\") ? parseInt(urlParams.get(\"x\")) : initialTile.x,\n y: urlParams.has(\"y\") ? parseInt(urlParams.get(\"y\")) : initialTile.y,\n provider: urlParams.has(\"provider\")\n ? urlParams.get(\"provider\")\n : initialTile.provider\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"fileExtension = new URL(url).pathname.split(\".\").pop()","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"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"},{"id":124,"value":"tile = {\n if (mvt.ok) {\n return new VectorTile.VectorTile(new Protobuf(mvt.data));\n } else\n return {\n layers: {}\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"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}","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"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"},{"id":914,"value":"copyrightInfo = {\n const attribution = tileProviderAttribution.find(\n (element) => element.id == tileProvider.attributionId\n );\n if (attribution) {\n return await attribution.getAttribution();\n } else {\n return \"\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"## Similar Tools\n\n- [Vector Inspector](https://stevage.github.io/vector-inspector/) by Steve Bennett","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"## References\n\n- [Module require debugger](https://observablehq.com/@observablehq/module-require-debugger)\n- [Observable Notebooks Documentation](https://observablehq.com/documentation/notebooks/)","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"## 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.","pinned":false,"hidden":false,"mode":"md"},{"id":897,"value":"AZURE_ACCESS_TOKEN = \"7RkyY2xun2dPtbceJz2AFjPx2WL669f_k5IGXvfWLuk\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"HERE_ACCESS_TOKEN = \"xcWh7a01IMWs0t0muZzYntR7TnJhu5W2mDsg5bDeptE\" // get your own at https://developer.here.com","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"MAPBOX_ACCESS_TOKEN = \"pk.eyJ1IjoibXljeWNsZW1hcCIsImEiOiJjazRsNW9mY3cwaGV6M2psNWJ1ZTNueTFpIn0.yFXUQHd_ghVD2qoeOWAbQg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"MAPTILER_ACCESS_TOKEN = \"TGPyfofSi5JFXJy6MBFe\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"NEXTZEN_ACCESS_TOKEN = \"UVQZD7i0R8yk4Fd-m8csVw\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"## Settings","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"initialTile = {\n return { z: 14, x: 8717, y: 5683, provider: \"cloud-tileserver\" };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"previewStyle = {\n const boundingBox = {\n fill: \"#f80\",\n fillOpacity: \".05\",\n stroke: \"#f80\",\n strokeWidth: \"3\"\n };\n const polygon = {\n fill: \"#000\",\n fillOpacity: \".05\",\n stroke: \"#000\",\n strokeWidth: \"0.5\"\n };\n const lineString = {\n stroke: \"#000\",\n strokeWidth: \"0.5\"\n };\n const point = {\n fill: \"#0aa\",\n fillOpacity: \".5\",\n stroke: \"#000\",\n strokeWidth: \"0.1\"\n };\n\n return {\n boundingBox: boundingBox,\n polygon: polygon,\n lineString: lineString,\n point: point\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"height = 512","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"Protobuf = require(\"pbf@4.0.1/dist/pbf.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"VectorTile = import(\n \"https://unpkg.com/@mapbox/vector-tile@2.0.4/index.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"d3 = require(\"d3-geo@3.1.1\", \"d3-zoom@3.0.0\", \"d3-selection@3.0.0\", \"d3-array@3.2.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"import { table } from \"@henrythasler/fancy-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":796,"value":"## Backup","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"canvasPreview = {\n const width = 975;\n const height = 610;\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n context.canvas.style.maxWidth = \"100%\";\n context.lineJoin = \"round\";\n context.lineCap = \"round\";\n\n // Boundingbox\n context.fillStyle = \"#ff00ff0f\";\n context.strokeStyle = \"#f0f\";\n context.lineWidth = 2;\n context.beginPath();\n path(getGeoJsonBbox(tileBounds));\n context.fill();\n context.stroke();\n\n // Vectortile layers\n layers.map((layer) => {\n context.fillStyle = layer.Types.includes(\"Polygon\") ? \"#0000000F\" : \"none\";\n context.strokeStyle = \"black\";\n context.lineWidth = 0.75;\n context.beginPath();\n // if ([\"waterarea\", \"water_polygons\", \"buildings\"].includes(layer.Layer)) {\n path(layer.features);\n // }\n context.fill();\n context.stroke();\n });\n\n return null; //context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"require.resolve(\"d3-array\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}