From 65cbf5e75139c28890d88c6309489bead3088c16 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Mon, 14 Oct 2024 16:42:05 +0200
Subject: [PATCH] fix updating overlay opacity

---
 website/src/lib/assets/layers.ts              |  2 +-
 .../layer-control/LayerControl.svelte         | 21 +++++++++++--------
 .../layer-control/LayerControlSettings.svelte | 13 ++++++------
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/website/src/lib/assets/layers.ts b/website/src/lib/assets/layers.ts
index 82b787e8..a81de75d 100644
--- a/website/src/lib/assets/layers.ts
+++ b/website/src/lib/assets/layers.ts
@@ -758,7 +758,7 @@ export const overpassTree: LayerTreeType = {
 export const defaultBasemap = 'mapboxOutdoors';
 
 // Default overlays used (none)
-export const defaultOverlays = {
+export const defaultOverlays: LayerTreeType = {
     overlays: {
         world: {
             waymarked_trails: {
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index 968a8468..fa3ec522 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -84,18 +84,21 @@
 	}
 
 	function updateOverlays() {
-		if ($map && $currentOverlays) {
+		if ($map && $currentOverlays && $opacities) {
 			let overlayLayers = getLayers($currentOverlays);
 			try {
-				let activeOverlays = $map
-					.getStyle()
-					.imports.filter((i) => i.id !== 'basemap' && i.id !== 'overlays');
-				let toRemove = activeOverlays.filter((i) => !overlayLayers[i.id]);
-				toRemove.forEach((i) => {
-					$map.removeImport(i.id);
+				let activeOverlays = $map.getStyle().imports.reduce((acc, i) => {
+					if (!['basemap', 'overlays', 'glyphs-and-sprite'].includes(i.id)) {
+						acc[i.id] = i;
+					}
+					return acc;
+				}, {});
+				let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
+				toRemove.forEach((id) => {
+					$map.removeImport(id);
 				});
 				let toAdd = Object.entries(overlayLayers)
-					.filter(([id, selected]) => selected && !activeOverlays.some((j) => j.id === id))
+					.filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
 					.map(([id]) => id);
 				toAdd.forEach((id) => {
 					addOverlay(id);
@@ -106,7 +109,7 @@
 		}
 	}
 
-	$: if ($map && $currentOverlays) {
+	$: if ($map && $currentOverlays && $opacities) {
 		updateOverlays();
 	}
 
diff --git a/website/src/lib/components/layer-control/LayerControlSettings.svelte b/website/src/lib/components/layer-control/LayerControlSettings.svelte
index 1cde4c06..0a9da30e 100644
--- a/website/src/lib/components/layer-control/LayerControlSettings.svelte
+++ b/website/src/lib/components/layer-control/LayerControlSettings.svelte
@@ -157,15 +157,16 @@
 										max={1}
 										step={0.1}
 										disabled={$selectedOverlay === undefined}
-										onValueChange={() => {
+										onValueChange={(value) => {
 											if ($selectedOverlay) {
-												$opacities[$selectedOverlay.value] = $overlayOpacity[0];
-												if ($map) {
-													if ($map.getLayer($selectedOverlay.value)) {
-														$map.removeLayer($selectedOverlay.value);
-														$currentOverlays = $currentOverlays;
+												if ($map && isSelected($currentOverlays, $selectedOverlay.value)) {
+													try {
+														$map.removeImport($selectedOverlay.value);
+													} catch (e) {
+														// No reliable way to check if the map is ready to remove sources and layers
 													}
 												}
+												$opacities[$selectedOverlay.value] = value[0];
 											}
 										}}
 									/>