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}


npm install --save deck.gl

main.js

import { DeckGL } from '@deck.gl/core';
import { TerrainLayer } from '@deck.gl/geo-layers';

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/maps/satellite-v4/{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 DeckGL({
  parent: document.getElementById("map"),
  initialViewState: {
    latitude: 46.20,
    longitude: -122.20,
    zoom: 11.5,
    bearing: 140,
    pitch: 60,
    maxPitch: 89
  },
  controller: true,
  layers: [
    new TerrainLayer({
      id: 'terrain',
      minZoom: 0,
      maxZoom: 12,
      elevationDecoder: ELEVATION_DECODER,
      elevationData: TERRAIN_IMAGE,
      texture: SURFACE_IMAGE,
      wireframe: false,
      color: [255, 255, 255]
    }),
  ],
});

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex" />
    <title>How to display a 3D terrain layer in Deck.gl | NPM example</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#map {
  height: 100vh;
  width: 100vw;
}

<html>

<head>
  <script src="https://unpkg.com/deck.gl@9.2.5/dist.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    #map {
      height: 100vh;
      width: 100vw;
    }
  </style>
</head>

<body>
  <div id="map"></div>
</body>

<script type="text/javascript">
  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/maps/satellite-v4/{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({
    parent: document.getElementById("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]
      }),
    ],
  });    
</script>

</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.