30: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; }31:[] 2e:{"title":"Slippy Map Tile","cells":[{"id":0,"value":"# Slippy Map Tile","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"### ${Object.entries(mapMarker)\n .map(([key, val]) => key + \":\" + \" \" + val)\n .join(\", \")}","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"{\n map.getSource(\"bbox\").setData(markerTile);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"markerTileCoords = getZXYTile({ ...mapMarker, zoom })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":150,"value":"turf = require(\"@turf/turf@6.5.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"import { getZXYTile } from \"@abenrob/osm-tile-math\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import { TileXYToBoundingBox } from \"@abenrob/azure-tile-math\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"viewof recenter = Inputs.button(\"re-center\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}