From 2d87dcc368336bd08c6cf909680f54b5f5ccd4f7 Mon Sep 17 00:00:00 2001
From: Oliver Wipfli <oliver.wipfli@leichteralsluft.ch>
Date: Tue, 19 Apr 2022 17:39:49 +0200
Subject: [PATCH] Use demotiles.maplibre.org

---
 debug/terrain.html | 150 +++++++++++++++++++++++++--------------------
 1 file changed, 82 insertions(+), 68 deletions(-)
diff --git a/debug/terrain.html b/debug/terrain.html
index d373dc67ffb..afdb56cc836 100644
--- a/debug/terrain.html
+++ b/debug/terrain.html
@@ -1,79 +1,93 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-   <title>MapLibre GL JS debug page for terrian</title>
-   <meta charset='utf-8'>
-   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-   <link rel='stylesheet' href='../dist/maplibre-gl.css' />
-   <style>
-       body { margin: 0; padding: 0; }
-       html, body, #map { height: 100%; }
-   </style>
+    <title>MapLibre GL JS debug page for terrian</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='../dist/maplibre-gl.css' />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        #map {
+            height: 100%;
+        }
+    </style>
 </head>
 
 <body>
-<div id='map'></div>
-
-<script src='../dist/maplibre-gl-dev.js'></script>
-<script>
+    <div id='map'></div>
 
-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://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
-                tileSize: 256,
-                attribution: '&copy; OpenStreetMap Contributors',
-                maxzoom: 19
-            },
-            terrain: {
-                type: 'raster-dem',
-                url: 'https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
-                tileSize: 256
+    <script src='../dist/maplibre-gl-dev.js'></script>
+    <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://a.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
+                }
             },
-        },
-        layers: [
-            {
-                id: 'osm',
-                type: 'raster',
-                source: 'osm'
-            },
-            {
-                id: 'hills',
-                type: 'hillshade',
-                source: 'terrain',
-                layout: {'visibility': 'visible'},
-                paint: {'hillshade-exaggeration': 0.33}
-            }
-        ],
-        terrain: {
-            source: 'terrain',
-            exaggeration: 1
-        }
-    },
-    maxZoom: 18,
-    maxPitch: 85
-});
+            maxZoom: 18,
+            maxPitch: 85
+        });
 
-map.addControl(new maplibregl.NavigationControl({
-    visualizePitch: true,
-    showZoom: true,
-    showCompass: true
-}));
+        map.addControl(new maplibregl.NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        }));
 
-map.addControl(
-    new maplibregl.TerrainControl({
-        source: 'terrain',
-        exaggeration: 1
-    })
-);
-</script>
+        map.addControl(
+            new maplibregl.TerrainControl({
+                source: 'terrain',
+                exaggeration: 1
+            })
+        );
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
