31:[{"id":"cca10026728f83b97f28bf91e29f5606923ca9201dfd61a1eb30b6411a38ded7ba584a07194d6412aa04eb3495b4ebfffcad275640c6e2f01ca070fed7b27a54","href":"https://static.observableusercontent.com/files/cca10026728f83b97f28bf91e29f5606923ca9201dfd61a1eb30b6411a38ded7ba584a07194d6412aa04eb3495b4ebfffcad275640c6e2f01ca070fed7b27a54","name":"osm_carto@3.pmtiles","type":"application/octet-stream","lastModified":1622091284867.187,"size":1906199}] 2f:{"title":"Leaflet maps with serverless tilesets","cells":[{"id":236,"value":"md`# Leaflet maps with serverless tilesets`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":107,"value":"tileset = new pmtiles.PMTiles(\"https://protomaps-static.sfo3.digitaloceanspaces.com/PowersOfTwo.pmtiles\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":110,"value":"metadata = await tileset.metadata()","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`\nWe can calculate the center point of the tile bounds:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":172,"value":"{\n return await tileset.getZxy(0,0,0) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":57,"value":"pmtiles = require(\"pmtiles@0.2.1\").catch(() => window.pmtiles)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}