map = {
const container = html`<div style='width: 960px; height: 540px;'></div>`;
yield container;
const map = new mapboxgl.Map({
accessToken: mapboxAccessToken,
bounds: [5.94, 45.81, 10.51, 47.81],
fitBoundsOptions: { padding: 16 },
container,
style:
"https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json"
});
map.on("load", () => {
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
maxzoom: 14
});
// add the DEM source as a terrain layer
map.setTerrain({ source: "mapbox-dem", exaggeration: 1 });
// add a sky layer that will show when the map is highly pitched
map.addLayer({
id: "sky",
type: "sky",
paint: {
"sky-type": "atmosphere",
"sky-atmosphere-sun": [0.0, 0.0],
"sky-atmosphere-sun-intensity": 15
}
});
});
invalidation.then(() => map.remove());
}
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.
