Published
Edited
Dec 12, 2020
2 forks
17 stars
{
let container = html`<div style='height:500px;' />`;
yield container;
let map = new mapboxgl.Map({
container,
center: [139.141, 35.444],
zoom: 17,
pitch: 80,
bearing: -100,
style: "mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y",
scrollZoom: true
});
map.addControl(new mapboxgl.NavigationControl(), "top-right");
map.on('load', function () {
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 with exaggerated height
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.
