added terrain source

src/components/MainMapMaplibre.tsx

@@ -1,6 +1,6 @@
 import { Style } from "mapbox-gl";
 import maplibregl, { MapLibreEvent } from "maplibre-gl";
-import Map from "react-map-gl";
+import Map, { Source } from "react-map-gl";
 
 // load the maplibre CSS styles
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -14,33 +14,42 @@ const MainMap: React.FC = () => {
     // resize the map once loaded
     (e as MapLibreEvent).target.resize();
     setTimeout(() => e.target.resize(), 500);
+
+    // add terrain control
+    // (e as MapLibreEvent).target.addControl(
+    //   new maplibregl.TerrainControl({
+    //     source: "terrainSource",
+    //     exaggeration: 1.5,
+    //   }),
+    //   "top-left"
+    // );
   };
 
   // some hard-coded styles
-  const stamenStyle = {
-    version: 8,
-    sources: {
-      terrainSource: {
-        type: "raster",
-        tiles: [
-          "https://stamen-tiles.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.jpg",
-        ],
-        tileSize: 256,
-        attribution:
-          'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
-        // maxzoom: 10,
-      },
-    },
-    layers: [
-      {
-        id: "terrainSource",
-        source: "terrainSource",
-        type: "raster",
-      },
-    ],
-  } as Style;
+  // const stamenStyle = {
+  //   version: 8,
+  //   sources: {
+  //     terrainSource: {
+  //       type: "raster",
+  //       tiles: [
+  //         "https://stamen-tiles.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.jpg",
+  //       ],
+  //       tileSize: 256,
+  //       attribution:
+  //         'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
+  //       // maxzoom: 10,
+  //     },
+  //   },
+  //   layers: [
+  //     {
+  //       id: "terrainSource",
+  //       source: "terrainSource",
+  //       type: "raster",
+  //     },
+  //   ],
+  // } as Style;
 
-  const osmStyle = {
+  const mapStyle = {
     version: 8,
     sources: {
       osm: {
@@ -50,29 +59,53 @@ const MainMap: React.FC = () => {
         attribution: "&copy; OpenStreetMap Contributors",
         maxzoom: 19,
       },
+      // found here: https://betterprogramming.pub/using-3d-terrain-in-your-web-apps-1c0c56ae07e1
+      terrainSource: {
+        type: "raster-dem",
+        tiles: [
+          'https://api.ellipsis-drive.com/v3/path/085f5e10-63b6-4e8f-a4c6-dce9689100d3/raster/timestamp/3179fa80-60ad-41c7-ae67-cdd5eeeca693/tile/{z}/{x}/{y}?style={"method":"terrainRgb","parameters":{"alpha":1,"bandNumber":1}}',
+        ],
+        tileSize: 256,
+        maxzoom: 13,
+      },
     },
     layers: [
       {
         id: "osm",
         type: "raster",
         source: "osm",
       },
+      {
+        id: "hillshade",
+        source: "terrainSource",
+        type: "hillshade",
+      },
     ],
+    // terrain: {
+    //   source: "terrainSource",
+    //   exaggeration: 1,
+    // },
   } as Style;
 
   return (
     <Map
       mapLib={maplibregl}
       style={{ width: "100%", height: "100%" }}
       onLoad={(m) => onLoad(m)}
-      mapStyle={osmStyle}
+      mapStyle={mapStyle}
       initialViewState={{
         longitude: 8.088652,
         latitude: 47.88443,
         zoom: 15,
-        // pitch: 52,
+        pitch: 45,
         // 47.884438269626294, 8.088652498339387
       }}
+      terrain={{
+        source: "terrainSource",
+        exaggeration: 1,
+      }}
+      maxPitch={85}
+      // hillshade={{}}
     >
       <InventorySource />
       <BaseLayerSource />