28:null 29:["$","title",null,{"children":"Slippy Map Tile | Adam Roberts | Observable"}] 2e:T52d,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // Create the "map" object with the maplibre.Map constructor, referencing // the container div const mapRef = (container.value = new maplibre.Map({ container, center: [13.415299, 52.523296], zoom: 13, maplibreLogo: true, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", attributionControl: true })); await new Promise((resolve, reject) => { mapRef.on("load", async () => { mapRef.addSource("bbox", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "bbox", type: "line", source: "bbox", layout: {}, paint: { "line-color": "#F00", "line-width": 4 } }); mapRef.addLayer({ id: "label", type: "symbol", source: "bbox", layout: { "text-field": ["get", "label"], "text-anchor": "center", "text-justify": "auto", "text-size": 28 }, paint: { "text-color": "#F00" } }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }2f:[] 2c:{"id":"397c4da5f405fc84","slug":"slippy-map-tile","title":"Slippy Map Tile","thumbnail":"a8d408e56c282e0788b75d0f47840e326c35a2e4b779e8836e9878abf9419fdc","access_level":"public","create_time":"$D2022-12-13T16:21:38.127Z","update_time":"$D2023-04-04T09:44:40.571Z","view_time":null,"first_public_time":"$D2022-12-14T07:09:29.931Z","has_unpublished_edits":null,"fork":{"id":"53f900161ea1600c","slug":"traffic-data-details","title":"Traffic Data Details","owner":{"id":"b873ed05f5a7d959","login":"targomo","name":"Targomo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a6ec2755c98ab89f","login":"abenrob","name":"Adam Roberts","avatar_url":"https://avatars-next.observableusercontent.com/35b4f71c800d4e6c9e2cfa93d55a4f89515f41428620d3050060df33504db2e1","tier":"starter_2024"},"version":600,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"59ca7144f8ccf1d1","login":"abenrob","name":"Adam Roberts","avatar_url":"https://avatars-next.observableusercontent.com/35b4f71c800d4e6c9e2cfa93d55a4f89515f41428620d3050060df33504db2e1","tier":null}],"members":[{"type":"individual","id":"59ca7144f8ccf1d1","login":"abenrob","name":"Adam Roberts","avatar_url":"https://avatars-next.observableusercontent.com/35b4f71c800d4e6c9e2cfa93d55a4f89515f41428620d3050060df33504db2e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0b6784da72980a38","slug":"geospatial","title":"Geospatial","owner":{"id":"a6ec2755c98ab89f","login":"abenrob","name":"Adam Roberts"}},"type":"notebook","body":{"title":"Slippy Map Tile","cells":[{"id":0,"value":"# Slippy Map Tile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"### ${Object.entries(mapMarker)\n .map(([key, val]) => key + \":\" + \" \" + val)\n .join(\", \")}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"viewof zoom = Inputs.range([0, 20], {\n value: 14,\n step: 1,\n label: \"Tile zoom level\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"html`

drag the marker to identify a new tile source, and ${viewof recenter} to zoom to the tile boundaries

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"{\n map.getSource(\"bbox\").setData(markerTile);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"markerTileCoords = getZXYTile({ ...mapMarker, zoom })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"markerTile = {\n const [z, x, y] = markerTileCoords;\n const properties = { label: `z: ${z}, x: ${x}, y: ${y}` };\n return turf.bboxPolygon(TileXYToBoundingBox(x, y, z, 256), {\n properties\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"{\n recenter;\n const [minX, minY, maxX, maxY] = turf.bbox(markerTile);\n if (minX !== undefined && minY !== undefined && maxX !== undefined && maxY) {\n map.fitBounds(\n [\n { lng: minX, lat: minY },\n { lng: maxX, lat: maxY }\n ],\n { padding: 50 }\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof mapMarker = {\n const inp = Inputs.input({\n lat: map.getCenter().lat,\n lng: map.getCenter().lng\n });\n const marker = new maplibre.Marker({\n draggable: true\n })\n .setLngLat({\n lat: map.getCenter().lat,\n lng: map.getCenter().lng\n })\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n inp.value = marker.getLngLat();\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"maplibre = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"turf = require(\"@turf/turf@6.5.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"import { getZXYTile } from \"@abenrob/osm-tile-math\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"import { TileXYToBoundingBox } from \"@abenrob/azure-tile-math\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"viewof recenter = Inputs.button(\"re-center\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"