06 · Terrain and hillshade

The Matterhorn in 3D, from real elevation: AWS's open Terrain Tiles (Terrarium encoding, no key). One raster-dem source feeds both the hillshade layer, which shades the slopes, and setTerrain, which lifts the map onto them.

Open it full screen · Edit and run it · Full source: 06-terrain.ts

map.on('style.load', () => {
  map.addSource('dem', {
    type: 'raster-dem',
    tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],
    tileSize: 256,
    encoding: 'terrarium',
  })
  map.addStyleLayer({ id: 'hillshade', type: 'hillshade', source: 'dem' }, 'water')
  map.setTerrain({ source: 'dem', exaggeration: 1.3 })
})

← Heatmap · Clusters →