full-stack dilettante
Public
Edited
Aug 16, 2023
addTerrainShading = {
configureStyle;
if (map.getLayer("terrain")) map.removeLayer("terrain");
if (map.getSource("terrain")) map.removeSource("terrain");
map.addSource("terrain", {
type: "raster",
tileSize: 256,
maxzoom: 14,
tiles: [
`https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=${mapboxgl.accessToken}`
]
});
map.addLayer({
id: "terrain",
type: "raster",
source: "terrain",
paint: {
// prettier-ignore
'raster-color': [
'interpolate', ["linear"], ['raster-value'],
0,'rgb(48, 167, 228)',
45, 'rgb(57, 143, 83)',
250, 'rgb(116, 166, 129)',
500, 'rgb(178, 205, 174)',
750, 'rgb(188, 195, 169)',
1000, 'rgb(221, 207, 153)',
1500, 'rgb(211, 174, 114)',
2000, 'rgb(207, 155, 103)',
2500, 'rgb(179, 120, 85)',
3500, 'rgb(227, 210, 197)',
6000, 'rgb(255, 255, 255)'
],
"raster-color-mix": [
0.1 * 256 * 256 * 256,
0.1 * 256 * 256,
0.1 * 256,
-10000
],
"raster-color-range": [0, 8848],
"raster-opacity": 0.8
}
});
map.addSource('mapbox-dem-3d', {
'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-3d', 'exaggeration': 1.5 });
// Add some fog for the hell of it
map.setFog({
'range': [-1, 10],
'horizon-blend': 0.3,
'color': 'white',
'high-color': '#add8e6',
'space-color': '#d8f2ff',
'star-intensity': 0.0
});
}
addHillshade = {
addTerrainShading;
if (map.getLayer("hillshading")) map.removeLayer("hillshading");
if (map.getSource("mapbox-dem")) map.removeSource("mapbox-dem");
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 256,
maxzoom: 14
});
map.addLayer({
id: "hillshading",
source: "mapbox-dem",
type: "hillshade"
});
}
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.
