adds hillshading

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -339,7 +339,7 @@
         }
     }
 
-    function addCaretLayer(id?: string) {        
+    function addCaretLayer(id?: string) {
         if (!map || !id) {
             return;
         }
@@ -656,16 +656,31 @@
                 addTrailLayer(t, t.id ?? i.toString(), i, data?.at(i));
             });
 
-            if (
-                showTerrain &&
-                $page.data.settings?.terrain &&
-                !map?.getSource("terrain")
-            ) {
+            if (showTerrain) {
                 try {
-                    map!.addSource("terrain", {
-                        type: "raster-dem",
-                        url: $page.data.settings.terrain,
-                    });
+                    if (
+                        $page.data.settings?.terrain?.terrain &&
+                        !map?.getSource("terrain")
+                    ) {
+                        map!.addSource("terrain", {
+                            type: "raster-dem",
+                            url: $page.data.settings?.terrain?.terrain,
+                        });
+                    }
+                    if (
+                        $page.data.settings?.terrain?.hillshading &&
+                        !map?.getSource("hillshading")
+                    ) {
+                        map!.addSource("hillshading", {
+                            type: "raster-dem",
+                            url: $page.data.settings?.terrain?.hillshading,
+                        });
+                        map!.addLayer({
+                            id: "hillshading",
+                            source: "terrain",
+                            type: "hillshade",
+                        });
+                    }
                 } catch (e) {}
             }
         });

web/src/lib/models/settings.ts

@@ -7,7 +7,7 @@ class Settings {
   location?: { name: string, lat: number, lon: number };
   category?: string;
   tilesets?: {name: string, url: string}[]
-  terrain?: string;
+  terrain?: { terrain: string, hillshading: string};
   user?: string;
 
   constructor(
@@ -19,7 +19,7 @@ class Settings {
       location?: { name: string, lat: number, lon: number }
       category?: string
       tilesets?: {name: string, url: string}[]
-      terrain?: string;
+      terrain?: { terrain: string, hillshading: string};
     }
   ) {
     this.unit = unit;

web/src/routes/settings/display/+page.svelte

@@ -50,13 +50,15 @@
     let customTilesetName: string = "";
     let customTilesetURL: string = "";
     let terrainURL: string = "";
+    let hillshadingURL: string = "";
 
     onMount(() => {
         citySearchQuery = settings?.location?.name ?? "";
         selectedLanguage = settings?.language || "en";
         selectedMapFocus = settings?.mapFocus ?? "trails";
 
-        terrainURL = settings?.terrain ?? "";
+        terrainURL = settings?.terrain.terrain ?? "";
+        hillshadingURL = settings?.terrain.hillshading ?? "";
     });
 
     async function searchCities(q: string) {
@@ -134,9 +136,13 @@
     async function handleTerrainAdd() {
         await settings_update({
             id: settings!.id,
-            terrain: terrainURL,
+            terrain: { terrain: terrainURL, hillshading: hillshadingURL },
         });
     }
+
+    $: terrainSaveEnabled =
+        terrainURL !== settings.terrain?.terrain ||
+        hillshadingURL !== settings.terrain.hillshading;
 </script>
 
 <svelte:head>
@@ -225,12 +231,19 @@
                             placeholder="https://.../tiles.json"
                         ></TextField>
                     </div>
+                    <div class="basis-full">
+                        <TextField
+                            label="Hillshading URL"
+                            bind:value={hillshadingURL}
+                            placeholder="https://.../tiles.json"
+                        ></TextField>
+                    </div>
                     <button
-                        disabled={terrainURL == settings?.terrain}
+                        disabled={!terrainSaveEnabled}
                         class="btn-icon mt-6"
-                        class:hover:!bg-background={terrainURL == settings?.terrain}
+                        class:hover:!bg-background={!terrainSaveEnabled}
                         on:click={handleTerrainAdd}
-                        class:text-gray-500={terrainURL == settings?.terrain}
+                        class:text-gray-500={!terrainSaveEnabled}
                         ><i class="fa fa-save"></i></button
                     >
                 </div>