diff --git a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
index 8f977d16..f28cc09e 100644
--- a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
+++ b/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);
         });
diff --git a/web/src/lib/vendor/maplibre-layer-manager/terrain-layer.ts b/web/src/lib/vendor/maplibre-layer-manager/terrain-layer.ts
index 9704e522..335d12b6 100644
--- a/web/src/lib/vendor/maplibre-layer-manager/terrain-layer.ts
+++ b/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,13 +23,16 @@ export class TerrainLayer implements BaseLayer {
                 } : {})
 
             },
-            layers: [{
+            layers: hillshadingEnabled ? [{
                 id: "hillshading",
                 source: "terrain",
                 type: "hillshade",
-            }]
+                layout: {
+                    visibility: "none",
+                },
+            }] : []
 
         }
 
     }
-}
\ No newline at end of file
+}