2e:null 2f:["$","title",null,{"children":"Leaflet maps with serverless tilesets | Protomaps | Observable"}] 34:[{"id":"cca10026728f83b97f28bf91e29f5606923ca9201dfd61a1eb30b6411a38ded7ba584a07194d6412aa04eb3495b4ebfffcad275640c6e2f01ca070fed7b27a54","href":"https://static.observableusercontent.com/files/cca10026728f83b97f28bf91e29f5606923ca9201dfd61a1eb30b6411a38ded7ba584a07194d6412aa04eb3495b4ebfffcad275640c6e2f01ca070fed7b27a54","name":"osm_carto@3.pmtiles","type":"application/octet-stream","lastModified":1622091284867.187,"size":1906199}] 32:{"id":"0f9262123bbd6f32","slug":"leaflet-tilesets","title":"Leaflet maps with serverless tilesets","thumbnail":"2aa8eb7d5d569c83bb4d2b4f696656caeae9b3ab283608c60b7769c76e860e11","access_level":"public","create_time":"$D2021-05-27T03:46:41.212Z","update_time":"$D2021-05-27T13:58:53.503Z","view_time":null,"first_public_time":"$D2021-05-27T04:40:31.590Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"9155771b236ecacc","login":"protomaps","name":"Protomaps","avatar_url":"https://avatars-next.observableusercontent.com/85f49610348c4ff58a6b1d4b11a7f4f711e6ce28e2e5450f869a6db2bd97d966","tier":"starter_2024"},"version":242,"publish_version":242,"role":null,"authored":false,"authors":[{"type":"individual","id":"795280345015fde4","login":"protomaps","name":"Protomaps","avatar_url":"https://avatars-next.observableusercontent.com/85f49610348c4ff58a6b1d4b11a7f4f711e6ce28e2e5450f869a6db2bd97d966","tier":null}],"members":[{"type":"individual","id":"795280345015fde4","login":"protomaps","name":"Protomaps","avatar_url":"https://avatars-next.observableusercontent.com/85f49610348c4ff58a6b1d4b11a7f4f711e6ce28e2e5450f869a6db2bd97d966","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Leaflet maps with serverless tilesets","cells":[{"id":236,"value":"md`# Leaflet maps with serverless tilesets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"{\n async function getTile(z,x,y) {\n let result = await tileset.getZxy(z,x,y)\n let range = 'bytes=' + result[0] + '-' + (result[0]+result[1]-1)\n let b = await fetch(tileset.url,{headers:{Range:range}})\n let buf = await b.arrayBuffer()\n var blob = new Blob( [buf], { type: \"image/png\" } )\n return window.URL.createObjectURL(blob)\n }\n return html`\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`Map notebooks on Observable like [Hello, Leaflet](https://observablehq.com/@mbostock/hello-leaflet) include a third party tile layer:\n\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\").addTo(map);\n\nWhat if you could load arbitrary self-hosted tilesets into notebooks with the same ease as images, videos, JSON and CSV data? The technique is like [Cloud Optimized GeoTIFFs](https://observablehq.com/@dulldrums/cloud-optimized-geotiffs), but much more lightweight.\n\nHere's an interactive Leaflet map displaying a single-file tileset stored at this DigitalOcean Spaces URL:\n\n https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"{\n const container = html`

`;\n yield container;\n let map = new L.map(container,{maxZoom:4}).setView([38,-100],3)\n const p = new pmtiles.PMTiles(\"https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles\")\n p.leafletLayer({attribution:'© OpenStreetMap contributors'}).addTo(map)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`\n## How it works\n\nLet's load a different URL into a new [PMTiles](https://github.com/protomaps/PMTiles) object, which fetches the first 512 kilobytes via a [HTTP Range request](https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"tileset = new pmtiles.PMTiles(\"https://protomaps-static.sfo3.digitaloceanspaces.com/PowersOfTwo.pmtiles\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`\n## Metadata\n\nThe PMTiles object stores metadata, such as the format of the internal tiles, the bounding box, the maximum zoom level, and how the data should be attributed:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"metadata = await tileset.metadata()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`\nWe can calculate the center point of the tile bounds:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"startPoint = {\n let bounds = metadata['bounds'].split(',')\n let minX = +bounds[0]\n let minY = +bounds[1]\n let maxX = +bounds[2]\n let maxY = +bounds[3]\n return [(minY+maxY)/2,(minX+maxX)/2]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`We can query for the byte offset for the Z:0 X:0 Y:0 tile, which is then used to issue an HTTP Range request for the tile image:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"{\n return await tileset.getZxy(0,0,0) \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"{\n const container = html`

`;\n yield container;\n let map = new L.map(container,{maxZoom:14}).setView(startPoint,14) \n tileset.leafletLayer({attribution:metadata.attribution}).addTo(map)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`## Observable File Attachments\n\nObservable supports [SQLite databases as File Attachments](https://observablehq.com/@observablehq/sqlite). It would be nice to attach a PMTiles file in the same way; however this seems to run up against CORS limitations in published notebooks - unpublished notebooks work fine.\n\nThe below code snippet will fail with \"Preflight response is not successful\" when the browser issues an OPTIONS request:\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"{\n let url = await FileAttachment('osm_carto@3.pmtiles').url()\n let p = new pmtiles.PMTiles(url)\n return await p.metadata()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`\nThe [PMTiles](http://github.com/protomaps/pmtiles) library is built as an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) JavaScript file, so we need to load it (see [How to require stubborn modules](https://observablehq.com/@observablehq/how-to-require-stubborn-modules)) into the notebook like this: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"pmtiles = require(\"pmtiles@0.2.1\").catch(() => window.pmtiles)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`\n## Next steps\n* See the blog post [Dynamic Maps, Static Storage](http://protomaps.com/blog/dynamic-maps-static-st…)\n* Rendering RGB terrain tiles for hillshading\n* Loading and styling vector map features and labels\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"