fix hillshading visibility (#942)

Co-authored-by: Flomp <Flomp@users.noreply.github.com>

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

@@ -115,6 +115,7 @@
     let hoveringTrail: boolean = false;
 
     let mapLoaded: boolean = false;
+    let terrainEnabled: boolean | null = null;
 
     const trailColors = [
         "#3549bb", // blue
@@ -289,6 +290,25 @@
         }
     }
 
+    function syncHillshadingVisibility() {
+        if (!map?.getLayer("hillshading")) {
+            terrainEnabled = null;
+            return;
+        }
+
+        const isTerrainEnabled = Boolean(map.getTerrain());
+        if (isTerrainEnabled === terrainEnabled) {
+            return;
+        }
+
+        map.setLayoutProperty(
+            "hillshading",
+            "visibility",
+            isTerrainEnabled ? "visible" : "none",
+        );
+        terrainEnabled = isTerrainEnabled;
+    }
+
     export function refreshElevationProfile() {
         if (activeTrail !== null && data[activeTrail]) {
             epc?.setData(data[activeTrail]!, waypoints);
@@ -898,9 +918,14 @@
                         page.data.settings?.terrain?.hillshading,
                     ),
                 );
+                syncHillshadingVisibility();
             }
         });
 
+        map.on("render", () => {
+            syncHillshadingVisibility();
+        });
+
         map.on("moveend", (e) => {
             onmoveend?.(e.target);
         });

web/src/lib/vendor/maplibre-layer-manager/terrain-layer.ts

@@ -5,6 +5,8 @@ export class TerrainLayer implements BaseLayer {
     spec: StyleSpecification;
 
     constructor(terrainURL: string, hillshadingURL?: string) {
+        const hillshadingEnabled = Boolean(hillshadingURL);
+
         this.spec = {
             version: 8,
             name: "terrain",
@@ -13,7 +15,7 @@ export class TerrainLayer implements BaseLayer {
                     type: "raster-dem",
                     url: terrainURL,
                 },
-                ...(hillshadingURL ? {
+                ...(hillshadingEnabled ? {
                     hillshading: {
                         type: "raster-dem",
                         url: hillshadingURL
@@ -21,11 +23,14 @@ export class TerrainLayer implements BaseLayer {
                 } : {})
 
             },
-            layers: [{
+            layers: hillshadingEnabled ? [{
                 id: "hillshading",
                 source: "terrain",
                 type: "hillshade",
-            }]
+                layout: {
+                    visibility: "none",
+                },
+            }] : []
 
         }