2f:Tdd8,{ let container = html`

` yield container const map = (container.value = new maplibregl.Map({ boxZoom: true, pitch: 0, bearing: 0, container, center: [-68.1336229, -16.4955455], zoom: 15, style: "https://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json", scrollZoom: true })) map.on("load", function () { map.addSource("vida", { type: "vector", url:"pmtiles://https://data.source.coop/vida/google-microsoft-open-buildings/pmtiles/go_ms_building_footprints.pmtiles", attribution: '© Google-Microsoft Open Buildings - combined by VIDA' }) map.addLayer({ id: "vida", type: "fill", source: "vida", "source-layer":"building_footprints", paint: { "fill-outline-color": "#e9d8be", "fill-color": "#f3eadc", "fill-opacity": { base: 1, stops: [ [8, 0], [16, .8] ] } } }) map.addSource("pois", { type: "vector", url: "pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/overture-pois.pmtiles", attribution: '© Overture Maps Foundation' }) map.addLayer({ id: 'pois', type: 'circle', source: 'pois', 'source-layer': 'pois', paint: { 'circle-color': '#b3d3e8', 'circle-stroke-color': '#879ba8', 'circle-opacity': { base: 1, stops: [ [8, 0], [16, .9] ] }, 'circle-radius': [ 'interpolate', ['exponential',2], ['zoom'], 0, 1, 18, 9 ], 'circle-stroke-width': [ 'interpolate', ['exponential',2], ['zoom'], 12, 0, 14, .2 ], } }) map.addSource('labels', { type: 'raster', tiles: [ 'https://a.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png' ], tileSize: 256 }) map.addLayer({ id: 'labels-layer', type: 'raster', source: 'labels', paint: { "raster-opacity": .8, } }) map.addLayer({ id: 'pois_fake', type: 'circle', source: 'pois', 'source-layer': 'pois', paint: { 'circle-color': 'rgba(0,0,0,0)', 'circle-radius': [ 'interpolate', ['exponential',2], ['zoom'], 0, 5, 18, 15 ], } }) }) const popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false }) map.on("mouseenter", "pois_fake", (e) => { map.getCanvas().style.cursor = "pointer"; const poi = e.features[0] popup. setHTML(`

${poi.properties.name}

${poi.properties.category_main}

`). setLngLat(poi.geometry.coordinates). addTo(map) }); map.on("mouseleave", "pois_fake", () => { map.getCanvas().style.cursor = ""; popup.remove() }); map.addControl(new maplibregl.NavigationControl()) map.addControl( new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, showAccuracyCircle: false, showUserLocation: true }), 'top-right' ) }30:[] 2d:{"title":"Filling the city","cells":[{"id":0,"value":"# Filling the city\n## with PMTiles","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"pmtiles = import(\"https://cdn.skypack.dev/pmtiles@2.7.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"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"}],"files":"$W30","stdlib":"1","titling":"auto"}