Public
Edited
Mar 2, 2024
Insert cell
Insert cell
Insert cell
Insert cell
pane = {
const container = yield html`<div style="height:800px;">`
const style_url = 'https://tile.openstreetmap.jp/styles/maptiler-toner-en/style.json'
let style = await fetch(style_url).then((resp) => resp.json())

style.layers[style.layers.findIndex(layer => {return layer.id == 'water'})]['paint']['fill-color'] = '#ddd'
for (let id of ['boundary_state', 'boundary_country_z5-', 'boundary_country_z0-4']) {
style.layers[style.layers.findIndex(layer => {return layer.id == id})]['paint']['line-color'] = '#ddd'
}

const map = (container.value = new maplibregl.Map({
container,
center: [56.6, 27.8],
zoom: 3,
style: style,
}));
map.addControl(new maplibregl.FullscreenControl())
}
Insert cell

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.
Learn more