How to display a 3D terrain layer in Deck.gl

This example shows how to create a 3D map in Deck.gl. By utilizing MapTiler’s RGB terrain, you can enhance your maps by incorporating a realistic 3D terrain layer. Implementing the code provided below the map will allow you to achieve this effect.

Hold down the shift key to rotate the map

<html>
  <head>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
  </head>

  <body style="margin: 0; padding: 0; overflow: hidden; font-family: 'Open Sans', sans-serif">
    <div id="map" style="width: 100vw; height: 100vh"></div>
  </body>

  <script type="text/javascript">
    async function initialize() {
      const key = 'YOUR_MAPTILER_API_KEY_HERE';

      const TERRAIN_IMAGE = `https://api.maptiler.com/tiles/terrain-rgb-v2/{z}/{x}/{y}.webp?key=${key}`;
      const SURFACE_IMAGE = `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${key}`;

      const ELEVATION_DECODER = {
        rScaler: 6553.6,
        gScaler: 25.6,
        bScaler: 0.1,
        offset: -10000
      };

      // Create deck.gl map
      const deckgl = new deck.DeckGL({
        container: 'map',
        initialViewState: {
          latitude: 46.20,
          longitude: -122.20,
          zoom: 11.5,
          bearing: 140,
          pitch: 60,
          maxPitch: 89
        },
        controller: true,
        layers: [
          new deck.TerrainLayer({
            id: 'terrain',
            minZoom: 0,
            maxZoom: 12,
            elevationDecoder: ELEVATION_DECODER,
            elevationData: TERRAIN_IMAGE,
            texture: SURFACE_IMAGE,
            wireframe: false,
            color: [255, 255, 255]
          }),
        ],
      });
    }

    initialize();
  </script>
</html>
HTML

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Deck.gl