UN Smart Maps Lead. We keep web maps open for a better world.
pane = {
const container = yield html`<div style="height:800px;">`
const map = (container.value = new maplibregl.Map({
container,
style: style,
}));
map.addControl(new maplibregl.FullscreenControl())
}
style = ({
"version": 8,
"center": [
135,
35
],
"zoom": 12,
"sources": {
"openmaptiles": {
"type": "vector",
"tiles": [
"https://tile.openstreetmap.jp/data/planet/{z}/{x}/{y}.pbf"
]
},
"et512": {
"type": "raster",
"tiles": [
"https://gateway.optgeo.org/{z}/{x}/{y}.webp"
]
},
"terrain": {
"type": "raster-dem",
"tiles": [
"https://gateway.optgeo.org/{z}/{x}/{y}.webp"
]
}
},
"sprite": "https://tile.openstreetmap.jp/styles/maptiler-toner-en/sprite",
"glyphs": "https://tile.openstreetmap.jp/fonts/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": [
"rgb",
255,
255,
255
]
}
},
{
"type": "raster",
"id": "et512",
"source": "et512"
},
{
"type": "fill",
"source": "openmaptiles",
"id": "water",
"source-layer": "water",
"paint": {
"fill-color": [
"rgb",
194,
200,
202
]
}
}
],
"terrain": {
"source": "terrain"
}
})
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.
