JavaScript Maps SDK

3D Terrain

Use the Terrain Control to enable 3D terrain on the map. Requires Trimble Maps v4.0.0 or later. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>3D Terrain</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trimble-oss/modus-bootstrap@2.0.10/dist/css/modus-bootstrap.min.css" />
    <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.css" />
    <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div class="position-absolute m-3" style="z-index: 1; top: 0; left: 0">
      <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.TERRAIN)">Terrain</button>
      <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.SATELLITE)">Satellite</button>
      <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.TRANSPORTATION_DARK)">Transportation Dark</button>
    </div>
    <script>
      TrimbleMaps.setAPIKey("68B06901AF7DA34884CE5FB7A202A743");

      const map = (window.map = new TrimbleMaps.Map({
        container: "map",
        zoom: 14.5,
        center: [-106.114, 39.576],
        bearing: 270,
        pitch: 56,
        region: "ww",
        style: TrimbleMaps.Common.Style.TRANSPORTATION,
        maxZoom: 18,
        maxPitch: 85,
      }));
        map.showTileBoundaries = true;
        map.addControl(
        new TrimbleMaps.NavigationControl({
          visualizePitch: true,
          showZoom: true,
          showCompass: true,
        }),
      );
      map.on("styledata", () => {
        // Add new sources and layers
        if (!map.getSource("hillshadeSource")) {
          map.addSource("hillshadeSource", {
            type: "raster-dem",
            tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],
            encoding: "terrarium",
            tileSize: 256,
            maxzoom: 14
          });
        }
        if (!map.getSource("terrainSource")) {
          map.addSource("terrainSource", {
            type: "raster-dem",
            tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],
            encoding: "terrarium",
            tileSize: 256,
            maxzoom: 14
          });
        }
        if (!map.getLayer("hills")) {
          map.addLayer(
            {
              id: "hills",
              type: "hillshade",
              source: "hillshadeSource",
              layout: { visibility: "visible" },
              paint: { "hillshade-shadow-color": "#473B24" },
            },
            "admin_boundary",
          );
        }
      });
      map.on("terrain", (ev) => {
      if (map.getLayer("hills")) {
            if (ev && ev.target && ev.target.terrain) {
              map.setLayoutProperty(
                        "hills",
                        "visibility",
                        "visible"
                    );
          } else {
            map.setLayoutProperty(
                        "hills",
                        "visibility",
                        "none"
                    );
          }
          }
      });
      map.on("sourcedata", (e) => {
        if (e.sourceId === "terrainSource" && e.isSourceLoaded) {
          // enable the terrain control once terrain sources are loaded.
          map.setTerrain({
            source: "terrainSource",
            exaggeration: 1,
          });
        }
      });
      map.on("load", () => {
        // adding the terrain Control to map.
        map.addControl(
          new TrimbleMaps.TerrainControl({
            source: "terrainSource",
          }),
        );
      });
    </script>
  </body>
</html>
Last updated April 10, 2025.