Published
Edited
Dec 21, 2020
2 stars
{
let container = html`<div style='height:500px;' />`;
yield container;
let map = new mapboxgl.Map({
container,
// centers in the South Bay, with the Sierras on the horizon
center: [-121.65,37.45],
zoom: 9.5,
pitch: 83,
bearing: 68,
// paste your style URL below
style: "mapbox://styles/brsbl/ckixuf6fm1am619rrv1namv8n",
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': 11 });
// add a sky layer that will show when the map is highly pitched
map.addLayer({
'id': 'sky',
'type': 'sky',
'paint': {
'sky-type': 'gradient',
'sky-gradient': [
// in order to use a gradient for the sky, we need to interpolate between 2 colors
'interpolate',
// any valid interpolation expression works, but I'm using linear https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#interpolate
['linear'],
['sky-radial-progress'],
0.9,
// first color we're going to use in the gradient
'rgba(255, 0, 0, 0.2)',
1,
// first color we're going to use in the gradient
'rgba(246, 237, 136, 1)'
],
'sky-gradient-center': [0, 0],
'sky-gradient-radius': 90,
'sky-opacity': [
'interpolate',
['exponential', 0.1],
['zoom'],
5,
0,
22,
1
],
'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.
