27:null 28:["$","title",null,{"children":"Mapbox Vector Tiles from ProtoMaps (pmtiles) | Julien Colot | Observable"}] 2d:[{"id":"bac3af7f0e07112ff509f3aec28e47691e1d679aad620db5a7b7d78f891e345f84893d257e6a78a078e138b99b549d9f418270b663ed75d180b6713499ac8bc6","href":"https://static.observableusercontent.com/files/bac3af7f0e07112ff509f3aec28e47691e1d679aad620db5a7b7d78f891e345f84893d257e6a78a078e138b99b549d9f418270b663ed75d180b6713499ac8bc6","name":"planet.pmtiles","type":"application/octet-stream","lastModified":1750671902452.388,"size":43373326}] 2b:{"id":"c34323c2e626ec9a","slug":null,"title":"Mapbox Vector Tiles from ProtoMaps (pmtiles)","thumbnail":"e426eb4fdb881c6b05abc9d1e1903b1457d25056c549d7c47904f3a0e97127c3","access_level":"public","create_time":"$D2025-03-24T15:34:04.829Z","update_time":"$D2025-06-23T09:55:10.804Z","view_time":null,"first_public_time":"$D2025-03-25T11:16:33.270Z","has_unpublished_edits":null,"fork":{"id":"2710b07ba2cc1a8a","slug":"mapbox-vector-tiles","title":"Mapbox Vector Tiles","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":"starter_2024"},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bdc1cf58f834078","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":null}],"members":[{"type":"individual","id":"0bdc1cf58f834078","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":null,"role":"editor"},{"type":"team","id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"map = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"geojson(tiles[1], tiles[1].layers.transportation_name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"Protobuf = require(\"pbf@4/dist/pbf.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@3\", \"d3-fetch@3\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"pmtiles = import(\"https://cdn.skypack.dev/pmtiles@2.7.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"