From 0c97410c87564c2587030920d6e66ebd4c3cb052 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 17 Apr 2024 12:21:56 +0200
Subject: [PATCH] refresh layers after style change

---
 website/src/lib/components/GPX.svelte         | 36 ++++++++------
 .../layer-control/LayerControl.svelte         | 49 +++++++++++++------
 2 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/website/src/lib/components/GPX.svelte b/website/src/lib/components/GPX.svelte
index ad294e3b..32cf32d4 100644
--- a/website/src/lib/components/GPX.svelte
+++ b/website/src/lib/components/GPX.svelte
@@ -5,25 +5,31 @@
 
 	export let file: GPXFile;
 
-	$: if ($map) {
-		$map.on('load', () => {
+	function addGPXLayer() {
+		if (!$map.getSource('gpx')) {
 			$map.addSource('gpx', {
 				type: 'geojson',
 				data: file.toGeoJSON()
 			});
-			$map.addLayer({
-				id: 'gpx',
-				type: 'line',
-				source: 'gpx',
-				layout: {
-					'line-join': 'round',
-					'line-cap': 'round'
-				},
-				paint: {
-					'line-color': '#888',
-					'line-width': 8
-				}
-			});
+		}
+		$map.addLayer({
+			id: 'gpx',
+			type: 'line',
+			source: 'gpx',
+			layout: {
+				'line-join': 'round',
+				'line-cap': 'round'
+			},
+			paint: {
+				'line-color': '#888',
+				'line-width': 8
+			}
+		});
+	}
+
+	$: if ($map) {
+		$map.on('style.load', () => {
+			addGPXLayer();
 		});
 	}
 </script>
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index a9f5cb3e..3caf8c6b 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -24,6 +24,30 @@
 			$map.setStyle(basemaps[defaultBasemap]);
 		});
 	}
+
+	let addOverlayLayer: { [key: string]: () => void } = {};
+
+	function addOverlayLayerForId(id: string) {
+		return () => {
+			if ($map) {
+				if (!$map.getSource(id)) {
+					$map.addSource(id, overlays[id]);
+				}
+				$map.addLayer({
+					id,
+					type: overlays[id].type === 'raster' ? 'raster' : 'line',
+					source: id,
+					paint: {
+						...(id in opacities
+							? overlays[id].type === 'raster'
+								? { 'raster-opacity': opacities[id] }
+								: { 'line-opacity': opacities[id] }
+							: {})
+					}
+				});
+			}
+		};
+	}
 </script>
 
 <CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
@@ -43,7 +67,9 @@
 						name="basemaps"
 						onValueChange={(id) => {
 							if ($map) {
-								$map.setStyle(basemaps[id]);
+								$map.setStyle(basemaps[id], {
+									diff: false
+								});
 							}
 						}}
 					/>
@@ -55,25 +81,16 @@
 						name="overlays"
 						multiple={true}
 						onValueChange={(id, checked) => {
+							if (!addOverlayLayer.hasOwnProperty(id)) {
+								addOverlayLayer[id] = addOverlayLayerForId(id);
+							}
 							if ($map) {
 								if (checked) {
-									if (!$map.getSource(id)) {
-										$map.addSource(id, overlays[id]);
-									}
-									$map.addLayer({
-										id,
-										type: overlays[id].type === 'raster' ? 'raster' : 'line',
-										source: id,
-										paint: {
-											...(id in opacities
-												? overlays[id].type === 'raster'
-													? { 'raster-opacity': opacities[id] }
-													: { 'line-opacity': opacities[id] }
-												: {})
-										}
-									});
+									addOverlayLayer[id]();
+									$map.on('style.load', addOverlayLayer[id]);
 								} else {
 									$map.removeLayer(id);
+									$map.off('style.load', addOverlayLayer[id]);
 								}
 							}
 						}}