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:
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/maplibre-gl@2.2.0-pre.2/dist/maplibre-gl.js"></script>
11 <link
12 href="https://unpkg.com/maplibre-gl@2.2.0-pre.2/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://tile.openstreetmap.org/{z}/{x}/{y}.png"],
45 tileSize: 256,
46 attribution: "© 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>