From bfb812d79a9eca2ac8ffbcbcb765f4caeb4b7182 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 24 Jul 2024 10:21:37 +0200
Subject: [PATCH] fix custom layer replacement, closes #22

---
 .../layer-control/CustomLayers.svelte         | 25 +++++++++++++++++--
 .../layer-control/LayerControl.svelte         | 21 ++++++++++------
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/website/src/lib/components/layer-control/CustomLayers.svelte b/website/src/lib/components/layer-control/CustomLayers.svelte
index a6db6593..bbb27464 100644
--- a/website/src/lib/components/layer-control/CustomLayers.svelte
+++ b/website/src/lib/components/layer-control/CustomLayers.svelte
@@ -39,6 +39,10 @@
 	}
 
 	function createLayer() {
+		if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
+			deleteLayer(selectedLayerId);
+		}
+
 		if (typeof maxZoom === 'string') {
 			maxZoom = parseInt(maxZoom);
 		}
@@ -106,6 +110,8 @@
 				$tree.basemaps['custom'][layerId] = true;
 				return $tree;
 			});
+
+			$currentBasemap = layerId;
 		} else {
 			selectedOverlayTree.update(($tree) => {
 				if (!$tree.overlays.hasOwnProperty('custom')) {
@@ -114,6 +120,16 @@
 				$tree.overlays['custom'][layerId] = true;
 				return $tree;
 			});
+
+			if ($map && $map.getSource(layerId)) {
+				// Reset source when updating an existing layer
+				if ($map.getLayer(layerId)) {
+					$map.removeLayer(layerId);
+				}
+				$map.removeSource(layerId);
+			}
+
+			$currentOverlays.overlays['custom'][layerId] = true;
 		}
 	}
 
@@ -142,8 +158,13 @@
 				$selectedBasemapTree.basemaps = tryDeleteLayer($selectedBasemapTree.basemaps, 'custom');
 			}
 		} else {
-			$currentOverlays = tryDeleteLayer($currentOverlays, layerId);
-			$previousOverlays = tryDeleteLayer($previousOverlays, layerId);
+			$currentOverlays.overlays['custom'][layerId] = false;
+			if ($previousOverlays.overlays['custom']) {
+				$previousOverlays.overlays['custom'] = tryDeleteLayer(
+					$previousOverlays.overlays['custom'],
+					layerId
+				);
+			}
 
 			$selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
 				$selectedOverlayTree.overlays['custom'],
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index 74b0026c..a6ea05a8 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -30,14 +30,19 @@
 		opacities
 	} = settings;
 
-	$: if ($map) {
-		// Set style depending on the current basemap
-		let basemap = basemaps.hasOwnProperty($currentBasemap)
-			? basemaps[$currentBasemap]
-			: $customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap];
-		$map.setStyle(basemap, {
-			diff: false
-		});
+	function setStyle() {
+		if ($map) {
+			let basemap = basemaps.hasOwnProperty($currentBasemap)
+				? basemaps[$currentBasemap]
+				: $customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap];
+			$map.setStyle(basemap, {
+				diff: false
+			});
+		}
+	}
+
+	$: if ($map && $currentBasemap) {
+		setStyle();
 	}
 
 	$: if ($map && $currentOverlays) {