2f:T685,viewof map = { const container = html`

`; let resolve container.value = new Promise(_ => resolve = _) yield container; const map = new maplibregl.Map({ container: container, // center: [0, 0], center: [-68.1336229, -16.4955455], zoom: 15, style: "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json", }) map.on("load", () => { map.addSource("sample", sample.source) Array.isArray(sample.layers) ? sample.layers.forEach(layer => map.addLayer(layer)) : map.addLayer(sample.layers) map.addSource('labels', labels.source) map.addLayer(labels.layer) }) const mouseenter = (e) => { map.getCanvas().style.cursor = "pointer"; const feature = e.features[0] let tooltip = [] Object.keys(feature.properties).forEach(p => { tooltip.push( `

${feature.properties[p]} ${p}

` ) }) popup.setHTML(tooltip.join("")). setLngLat(Array.isArray(feature.geometry.coordinates[0]) ? feature.geometry.coordinates[0][0] : feature.geometry.coordinates). addTo(map) } const mouseleave = () => { map.getCanvas().style.cursor = ""; popup.remove() } const popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false }) map.on("mouseenter", sample.popup_layer, mouseenter); map.on("mouseleave", sample.popup_layer, mouseleave); resolve(map) }30:[] 2d:{"title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"(map.getBounds())","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"labels = ({\n source: {\n type: 'raster',\n tiles: [\n 'https://a.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png'\n ],\n tileSize: 256\n },\n layer: {\n id: 'labels-layer',\n type: 'raster',\n source: 'labels',\n paint: {\n \"raster-opacity\": .8,\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"// sample = ({\n// source: {\n// type:\"vector\",\n// url:\"pmtiles://https://data.source.coop/vida/google-microsoft-open-buildings/pmtiles/go_ms_building_footprints.pmtiles\",\n// attribution: '© Google-Microsoft Open Buildings via VIDA'\n// },\n// layers: [\n// {\n// id:\"fill\",\n// type:\"fill\",\n// source:\"sample\",\n// \"source-layer\":\"building_footprints\",\n// paint:{\n// \"fill-color\":\"#b4c7e0\"\n// }\n// },\n// {\n// id:\"stroke\",\n// type:\"line\",\n// source:\"sample\",\n// \"source-layer\":\"building_footprints\",\n// paint:{\n// \"line-color\":\"#6d87a8\",\n// \"line-width\": [\n// \"interpolate\",\n// [\"exponential\", 2],\n// [\"zoom\"],\n// 0, 1.3,\n// 4, 1,\n// 13, 0.5\n// ]\n// }\n// }\n// ],\n// popup_layer: 'fill' // what layer id to use for popups\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"// sample = ({\n// source: {\n// type:\"vector\",\n// url:\"pmtiles://https://data.source.coop/cholmes/overture/overture-buildings.pmtiles\",\n// attribution: '© Overture Maps Foundation'\n// },\n// layers: [\n// {\n// id:\"fill\",\n// type:\"fill\",\n// source:\"sample\",\n// \"source-layer\":\"buildings\",\n// paint:{\n// \"fill-color\":\"#b4c7e0\"\n// }\n// },\n// {\n// id:\"stroke\",\n// type:\"line\",\n// source:\"sample\",\n// \"source-layer\":\"buildings\",\n// paint:{\n// \"line-color\":\"#6d87a8\",\n// \"line-width\": [\n// \"interpolate\",\n// [\"exponential\", 2],\n// [\"zoom\"],\n// 0, 1.3,\n// 4, 1,\n// 13, 0.5\n// ]\n// }\n// }\n// ],\n// popup_layer: 'fill' // what layer id to use for popups\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"sample = ({\n source: {\n type:\"vector\",\n url:\"pmtiles://https://data.source.coop/cholmes/google-open-buildings/google-open-buildings.pmtiles\",\n attribution: '© Google Open Buildings'\n },\n layers: [\n {\n id:\"fill\",\n type:\"fill\",\n source:\"sample\",\n \"source-layer\":\"buildings\",\n paint:{\n \"fill-color\":\"#b4c7e0\"\n }\n },\n {\n id:\"stroke\",\n type:\"line\",\n source:\"sample\",\n \"source-layer\":\"buildings\",\n paint:{\n \"line-color\":\"#6d87a8\",\n \"line-width\": [\n \"interpolate\",\n [\"exponential\", 2],\n [\"zoom\"],\n 0, 1.3,\n 4, 1,\n 13, 0.5\n ]\n }\n }\n ],\n popup_layer: 'fill' // what layer id to use for popups\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"maplibregl = {\n const [module, styleURL] = await Promise.all([\n require(\"maplibre-gl@3.1.0\"),\n require.resolve(\"maplibre-gl@3.1.0/dist/maplibre-gl.css\")\n ]);\n \n const style = document.head.appendChild(\n html``\n );\n invalidation.then(() => style.remove());\n\n let protocol = new pmtiles.Protocol();\n module.addProtocol(\"pmtiles\",protocol.tile);\n \n return module;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"pmtiles = import(\"https://cdn.skypack.dev/pmtiles@2.7.0\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}