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