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/[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: "© 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>