{
const container = html`<div style="height:600px;">`;
yield container;
var map = new maplibregl.Map({
container: container, // container id
style: {
version: 8,
sources: {
sample: {
type:"vector",
url:"pmtiles://https://data.source.coop/vida/google-microsoft-open-buildings/pmtiles/go_ms_building_footprints.pmtiles"
}
},
layers: [
{
id:"fill",
type:"fill",
source:"sample",
"source-layer":"building_footprints",
paint:{
"fill-color":"#aaa"
}
},
{
id:"stroke",
type:"line",
source:"sample",
"source-layer":"building_footprints",
paint:{
"line-color":"#333",
"line-width": [
"interpolate",
["exponential", 2],
["zoom"],
// Zoom 0, line-width 8
0, 1.3,
// Zoom 5, line-width 8
4, 1,
// Zoom 22, line-width 1
13, 0.5
]
}
}
]
},
center: [0, 0], // starting position [lng, lat]
zoom: 1 // starting zoom
});
}
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.
