2c:null 2d:["$","title",null,{"children":"Filling the city | Mauricio Foronda | Observable"}] 32: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' ) }33:[] 30:{"id":"0b69ce19126ea645","slug":null,"title":"Filling the city","thumbnail":"887699415f7ab8c78549b38cc75dac4bd5a57e020e2c0a09b9f11fee3f93ac11","access_level":"public","create_time":"$D2023-10-03T11:59:07.397Z","update_time":"$D2023-10-04T15:28:49.753Z","view_time":null,"first_public_time":"$D2023-10-03T11:59:07.397Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"475974948549302f","login":"mauforonda","name":"Mauricio Foronda","avatar_url":"https://avatars-next.observableusercontent.com/4cc3af3b792916571df54649e193dbdbf80a875b4e37b1def6ecb0480c561075","tier":"starter_2024"},"version":62,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"018969b4abf63b07","login":"mauforonda","name":"Mau Foronda","avatar_url":"https://avatars-next.observableusercontent.com/513f52feadea4c57a52e2ab0f2fbdad66bf45a132acf7f9fbb19eb61e86e345f","tier":null}],"members":[{"type":"individual","id":"018969b4abf63b07","login":"mauforonda","name":"Mau Foronda","avatar_url":"https://avatars-next.observableusercontent.com/513f52feadea4c57a52e2ab0f2fbdad66bf45a132acf7f9fbb19eb61e86e345f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Filling the city","cells":[{"id":0,"value":"# Filling the city\n## with PMTiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"pmtiles = import(\"https://cdn.skypack.dev/pmtiles@2.7.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"