{
let container = html`<div style='height:800px;' />`
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(`
<div style="font-weight: bold"; margin: 0px>${poi.properties.name}</div>
<div style="font-size: .8em; opacity: .5; margin: 0px">${poi.properties.category_main}</div>`).
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'
)
}
buildings = ({
source: {
type: "vector",
url:"pmtiles://https://data.source.coop/vida/google-microsoft-open-buildings/pmtiles/go_ms_building_footprints.pmtiles",
attribution: '© <a href="https://beta.source.coop/repositories/vida/google-microsoft-open-buildings/description">Google-Microsoft Open Buildings via VIDA</a>'
},
layer: {
id: "vida",
type: "fill",
source: "buildings",
"source-layer":"building_footprints",
paint: {
"fill-outline-color": '#afc4cc',
"fill-color": "rgba(209, 228, 235, .8)",
"fill-opacity": {
base: 1,
stops: [
[8, 0],
[16, .8]
]
}
}
}
})
poblacion = ({
source: {
type: 'raster',
tiles: [
'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}'
],
tileSize: 256,
attribution: '<a href="https://datosurbanosdebolivia.abe.bo/atlas_ciudades">CPV 2012 via ONU Habitat</a>'
},
layer: {
id: 'poblacion-layer',
type: 'raster',
source: 'poblacion',
paint: {
"raster-opacity": .25,
}
}
})
places = ({
source: {
type: "vector",
url: "pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/overture-pois.pmtiles",
attribution: '© <a href="https://overturemaps.org">Overture Maps Foundation</a>'
},
layer: {
id: 'places',
type: 'circle',
source: 'places',
'source-layer': 'pois',
paint: {
'circle-color': '#85bfd4',
'circle-stroke-color': '#85979e',
'circle-opacity': {
base: 1,
stops: [
[8, 0],
[16, .7]
]
},
'circle-radius': [
'interpolate',
['exponential',2],
['zoom'],
0, 1,
18, 9
],
'circle-stroke-width': [
'interpolate',
['exponential',2],
['zoom'],
12, 0,
14, .2
],
}
}
})
placesFake = ({
id: 'placesfake',
type: 'circle',
source: 'places',
'source-layer': 'pois',
paint: {
'circle-color': 'rgba(0,0,0,0)',
'circle-radius': [
'interpolate',
['exponential',2],
['zoom'],
0, 5,
18, 15
],
}
})
labels = ({
source: {
type: 'raster',
tiles: [
'https://a.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png'
],
tileSize: 256
},
layer: {
id: 'labels-layer',
type: 'raster',
source: 'labels',
paint: {
"raster-opacity": .8,
}
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
