2f:[{"id":"bac3af7f0e07112ff509f3aec28e47691e1d679aad620db5a7b7d78f891e345f84893d257e6a78a078e138b99b549d9f418270b663ed75d180b6713499ac8bc6","href":"https://static.observableusercontent.com/files/bac3af7f0e07112ff509f3aec28e47691e1d679aad620db5a7b7d78f891e345f84893d257e6a78a078e138b99b549d9f418270b663ed75d180b6713499ac8bc6","name":"planet.pmtiles","type":"application/octet-stream","lastModified":1750671902452.388,"size":43373326}] 2d:{"title":"Mapbox Vector Tiles from ProtoMaps (pmtiles)","cells":[{"id":0,"value":"# Mapbox Vector Tiles from ProtoMaps (`pmtiles`)\n\nThis notebook demonstrates using [d3-tile](https://github.com/d3/d3-tile) to display [Mercator-projected](https://d3js.org/d3-geo/cylindrical#geoMercator) [Mapbox vector tiles](/@mbostock/mapbox-vector-tiles). It's a fork of [Mapbox Vector Tiles](https://observablehq.com/@d3/mapbox-vector-tiles) by [@mbstock](https://observablehq.com/@mbostock), but fetching the tile data from a `pmtiles` file ([see ProtoMaps](https://protomaps.com/)), so no need for API key.","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"map = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"tiles = Promise.all(\n tile().map(async (d) => {\n const tileData = await getTileData(...d);\n d.layers = new VectorTile(new Protobuf(tileData)).layers;\n return d;\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"geojson(tiles[1], tiles[1].layers.transportation_name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3\n .geoMercator()\n .center([4.3517, 50.85])\n .scale(Math.pow(2, 21) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n .precision(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"function geojson([x, y, z], 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(x, y, z);\n if (filter.call(null, f, i, features)) features.push(f);\n }\n return { type: \"FeatureCollection\", features };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"VectorTile = (\n await import(\"https://unpkg.com/@mapbox/vector-tile@2.0.3/index.js?module\")\n).VectorTile","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"Protobuf = require(\"pbf@4/dist/pbf.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3-geo@3\", \"d3-fetch@3\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"pmtiles = import(\"https://cdn.skypack.dev/pmtiles@2.7.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"getTileData = async (x, y, z) => {\n const resp = await new pmtiles.PMTiles(\n \"https://tile.openstreetmap.jp/static/planet.pmtiles\"\n ).getZxy(z, x, y);\n const data = resp.data;\n console.log(data, x, y, z);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"text = function (geojson) {\n if (!geojson) return;\n return geojson.features.map((feature) => {\n if (feature.geometry.type === \"Point\") {\n const [x, y] = projection(feature.geometry.coordinates);\n const svgFrag = svg`${feature.properties.name_int}`;\n console.log(svgFrag);\n\n return svgFrag;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}