2c:null 2d:["$","title",null,{"children":"Filling the city 2 | Mauricio Foronda | Observable"}] 32:T6a9,{ 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/positron-nolabels-gl-style/style.json", scrollZoom: true })) map.on("load", function () { map.addSource("buildings", buildings.source) map.addLayer(buildings.layer) map.addSource("poblacion", poblacion.source) map.addLayer(poblacion.layer) map.addSource("places", places.source) map.addLayer(places.layer) map.addSource('labels', labels.source) map.addLayer(labels.layer) map.addLayer(placesFake) }) const mouseenter = function(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) } const mouseleave = function() { map.getCanvas().style.cursor = ""; popup.remove() } const popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false }) map.on("mouseenter", "placesfake", mouseenter); map.on("mouseleave", "placesfake", mouseleave); map.addControl(new maplibregl.NavigationControl()) map.addControl( new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, showAccuracyCircle: false, showUserLocation: true }), 'top-right' ) }33:[] 30:{"id":"978a0a9a6f697258","slug":null,"title":"Filling the city 2","thumbnail":"2ada745d70df990b7040027be20574ea2f3223ab0ac6ff32af6e3d073c7afebc","access_level":"public","create_time":"$D2023-10-04T13:57:02.684Z","update_time":"$D2023-10-07T20:07:49.222Z","view_time":null,"first_public_time":"$D2023-10-04T13:57:02.684Z","has_unpublished_edits":null,"fork":{"id":"0b69ce19126ea645","slug":null,"title":"Filling the city","owner":{"id":"475974948549302f","login":"mauforonda","name":"Mauricio Foronda"}},"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":161,"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":2,"collection":null,"type":"notebook","body":{"title":"Filling the city 2","cells":[{"id":0,"value":"# Filling the city 2\n## with PMTiles and ❤️","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"html`\n

\n ${Legend(\n d3.scaleOrdinal()\n .domain(['Sin datos', '1 - 30', '31 - 70', '71 - 100', '101 - 200', '201 - 301', '302 - 1599'])\n .range(['#ffffd4', '#ffe6a5', '#fec46c', '#fe9929', '#e67217', '#c4500a', '#993404']), {\n tickSize: 5,\n width: 350,\n title: 'Población en 2012'\n }\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"buildings = ({\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 layer: {\n id: \"vida\",\n type: \"fill\",\n source: \"buildings\",\n \"source-layer\":\"building_footprints\",\n paint: {\n \"fill-outline-color\": '#afc4cc',\n \"fill-color\": \"rgba(209, 228, 235, .8)\",\n \"fill-opacity\": {\n base: 1,\n stops: [\n [8, 0],\n [16, .8]\n ]\n }\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"poblacion = ({\n source: {\n type: 'raster',\n tiles: [\n 'https://pndic-geoserver.abe.bo/geoserver/pndic/wms?service=WMS&request=GetMap&layers=pndic:Poblacion&styles=&format=image/png&transparent=true&version=1.1.1&myLayerId=Población&tiled=false&id=1_2&width=256&height=256&srs=EPSG:3857&bbox={bbox-epsg-3857}'\n ],\n tileSize: 256,\n attribution: 'CPV 2012 via ONU Habitat'\n },\n layer: {\n id: 'poblacion-layer',\n type: 'raster',\n source: 'poblacion',\n paint: {\n \"raster-opacity\": .25,\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"places = ({\n source: {\n type: \"vector\",\n url: \"pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/overture-pois.pmtiles\",\n attribution: '© Overture Maps Foundation'\n },\n layer: {\n id: 'places',\n type: 'circle',\n source: 'places',\n 'source-layer': 'pois',\n paint: {\n 'circle-color': '#85bfd4',\n 'circle-stroke-color': '#85979e',\n 'circle-opacity': {\n base: 1,\n stops: [\n [8, 0],\n [16, .7]\n ]\n },\n 'circle-radius': [\n 'interpolate',\n ['exponential',2],\n ['zoom'],\n 0, 1, \n 18, 9 \n ],\n 'circle-stroke-width': [\n 'interpolate',\n ['exponential',2],\n ['zoom'],\n 12, 0, \n 14, .2\n ],\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"placesFake = ({\n id: 'placesfake',\n type: 'circle',\n source: 'places',\n 'source-layer': 'pois',\n paint: {\n 'circle-color': 'rgba(0,0,0,0)',\n 'circle-radius': [\n 'interpolate',\n ['exponential',2],\n ['zoom'],\n 0, 5, \n 18, 15 \n ],\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"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":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"},{"id":100,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"