Public
Edited
Nov 13, 2020
5 forks
8 stars
mapContainer = html `<div style="height:500px"></div>`
postProcessEffect = new deck.PostProcessEffect(luma.tiltShift, {
blurRadius: 15,
gradientRadius: 200,
start: [0,0.5],
end: [1,0.5]
});
deckgl = {
// This is an Observable hack: clear previously generated content
mapContainer.innerHTML = '';
return new deck.DeckGL({
container: mapContainer,
map: mapboxgl,
mapboxApiAccessToken: MAPBOX_TOKEN,
mapStyle: 'mapbox://styles/mapbox/dark-v9',
initialViewState: {
longitude: 4.8,
latitude: 53.06,
zoom: 15,
pitch: 60,
bearing: 0
},
controller: true,
//effects: [postProcessEffect],
layers: [
terrainlayer,buildingtiles
]
});
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
terrainlayer = new deck.TerrainLayer({
id: 'terrain',
minZoom: 0,
maxZoom: 23,
strategy: 'no-overlap',
elevationDecoder: ELEVATION_DECODER,
elevationData: TERRAIN_IMAGE,
texture: SURFACE_IMAGE,
wireframe: false,
color: [255, 255, 255]
});
md` https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb
Note - the elevation rendered by this example is greatly exagerated!`
ELEVATION_DECODER = { return {
rScaler: 6553.6,
gScaler: 25.6,
bScaler: 0.1,
offset: -10000
}};
buildingtiles = new deck.Tile3DLayer({
id: 'tile-3d-layer',
data:'https://saturnus.geodan.nl/maquette_nl/data/buildingtiles_texel_4978/tileset.json',
loader: loaders.Tiles3DLoader,
loadOptions: {
// headers:header,
loadGLTF:true,
}
})
terraintiles = new deck.Tile3DLayer({
id: 'tile-3d-layer',
data:'https://saturnus.geodan.nl/maquette_nl/data/terraintiles_texel_4978/tileset.json',
loader: loaders.Tiles3DLoader,
loadOptions: {
// headers:header,
//loadGLTF:true,
}
})
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.2.8/dist/dist.dev.js');
luma = require('https://bundle.run/@luma.gl/shadertools@8.2.0')
loaders = require('@loaders.gl/3d-tiles@2.2.8/dist/dist.js')
mapboxgl = require('mapbox-gl@1.12.0/dist/mapbox-gl.js')
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.
