working on protomaps.com
{
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
});
}
View = import('https://cdn.skypack.dev/ol/View.js');
Style = import('https://cdn.skypack.dev/ol/style/Style.js');
Stroke = import('https://cdn.skypack.dev/ol/style/Stroke.js');
Fill = import('https://cdn.skypack.dev/ol/style/Fill.js');
VectorTile = import('https://cdn.skypack.dev/ol/layer/VectorTile.js');
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
olpmtiles = import("https://unpkg.com/ol-pmtiles@0.1.0/src/index.js")
vectorLayer = new VectorTile({
declutter: true,
source: new olpmtiles.PMTilesVectorSource({
url: "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles",
attributions: ["© Land Information New Zealand"]
}),
style: new Style({
stroke: new Stroke({
color: 'gray',
width: 1,
}),
fill: new Fill({
color: 'rgba(20,20,20,0.9)',
})
})
});
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.
