working on protomaps.com
Public
Edited
May 22, 2023
3 forks
2 stars
{
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://s3.us-west-2.amazonaws.com/us-west-2.opendata.source.coop/google-research-open-buildings/google-open-buildings.pmtiles"
}
},
layers: [
{
id:"fill",
type:"fill",
source:"sample",
"source-layer":"buildings",
paint:{
"fill-color":"#aaa"
}
},
{
id:"stroke",
type:"line",
source:"sample",
"source-layer":"buildings",
paint:{
"line-color":"#333",
"line-width": [
"interpolate",
["exponential", 2],
["zoom"],
// Zoom 0, line-width 8
0, 2,
// Zoom 22, line-width 1
15, 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.
