Terrain3D

May 20, 2022

Categories: Cool-stuff
Authors: Oliver Wipfli

The Terrain3D pull request of Max Demmelbauer from Toursprung was merged into main. Thanks for all the hard work!

You can now try out the 3D feature yourself with the pre-release version MapLibre GL JS v2.2.0-pre.2.

Here is a stand-alone Terrain3D example:

<!DOCTYPE html>
<html>
  <head>
    <title>MapLibre GL JS Terrain3D Example</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <script src="https://unpkg.com/maplibre-gl@2.2.0-pre.2/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@2.2.0-pre.2/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>

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

    <script>
      var map = (window.map = new maplibregl.Map({
        container: "map",
        zoom: 12,
        center: [11.39085, 47.27574],
        pitch: 52,
        hash: true,
        style: {
          version: 8,
          sources: {
            osm: {
              type: "raster",
              tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
              tileSize: 256,
              attribution: "&copy; OpenStreetMap Contributors",
              maxzoom: 19,
            },
            terrainSource: {
              type: "raster-dem",
              url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json",
              tileSize: 256,
            },
            hillshadeSource: {
              type: "raster-dem",
              url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json",
              tileSize: 256,
            },
          },
          layers: [
            {
              id: "osm",
              type: "raster",
              source: "osm",
            },
            {
              id: "hills",
              type: "hillshade",
              source: "hillshadeSource",
              layout: { visibility: "visible" },
              paint: { "hillshade-shadow-color": "#473B24" },
            },
          ],
          terrain: {
            source: "terrainSource",
            exaggeration: 1,
          },
        },
        maxZoom: 18,
        maxPitch: 85,
      }));

      map.addControl(
        new maplibregl.NavigationControl({
          visualizePitch: true,
          showZoom: true,
          showCompass: true,
        }),
      );

      map.addControl(
        new maplibregl.TerrainControl({
          source: "terrainSource",
          exaggeration: 1,
        }),
      );
    </script>
  </body>
</html>