Terrain3D MapLibre

Categories: cool-stuff
Authors: Oliver Wipfli

The Terrain3D #1022 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:

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>MapLibre GL JS Terrain3D Example</title>
 5    <meta charset="utf-8" />
 6    <meta
 7      name="viewport"
 8      content="width=device-width, initial-scale=1.0, user-scalable=no"
 9    />
10    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
11    <link
12      href="https://unpkg.com/[email protected]/dist/maplibre-gl.css"
13      rel="stylesheet"
14    />
15    <style>
16      body {
17        margin: 0;
18        padding: 0;
19      }
20
21      html,
22      body,
23      #map {
24        height: 100%;
25      }
26    </style>
27  </head>
28
29  <body>
30    <div id="map"></div>
31
32    <script>
33      var map = (window.map = new maplibregl.Map({
34        container: "map",
35        zoom: 12,
36        center: [11.39085, 47.27574],
37        pitch: 52,
38        hash: true,
39        style: {
40          version: 8,
41          sources: {
42            osm: {
43              type: "raster",
44              tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
45              tileSize: 256,
46              attribution: "&copy; OpenStreetMap Contributors",
47              maxzoom: 19,
48            },
49            terrainSource: {
50              type: "raster-dem",
51              url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json",
52              tileSize: 256,
53            },
54            hillshadeSource: {
55              type: "raster-dem",
56              url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json",
57              tileSize: 256,
58            },
59          },
60          layers: [
61            {
62              id: "osm",
63              type: "raster",
64              source: "osm",
65            },
66            {
67              id: "hills",
68              type: "hillshade",
69              source: "hillshadeSource",
70              layout: { visibility: "visible" },
71              paint: { "hillshade-shadow-color": "#473B24" },
72            },
73          ],
74          terrain: {
75            source: "terrainSource",
76            exaggeration: 1,
77          },
78        },
79        maxZoom: 18,
80        maxPitch: 85,
81      }));
82
83      map.addControl(
84        new maplibregl.NavigationControl({
85          visualizePitch: true,
86          showZoom: true,
87          showCompass: true,
88        })
89      );
90
91      map.addControl(
92        new maplibregl.TerrainControl({
93          source: "terrainSource",
94          exaggeration: 1,
95        })
96      );
97    </script>
98  </body>
99</html>