From 510edcf344c65ff7f09dab2a4ee50b41e5ebbbfd Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 8 May 2024 21:51:52 +0200
Subject: [PATCH] overlays below traces

---
 website/src/lib/components/Map.svelte         | 11 ++++++++
 .../layer-control/LayerControl.svelte         | 27 ++++++++++---------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte
index 4220b6f4..d6c47760 100644
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -100,6 +100,17 @@
 
 		newMap.on('style.load', toggleTerrain);
 		newMap.on('pitch', toggleTerrain);
+
+		newMap.on('style.load', () => {
+			// add dummy layer to place the overlay layers below
+			newMap.addLayer({
+				id: 'overlays',
+				type: 'background',
+				paint: {
+					'background-color': 'rgba(0, 0, 0, 0)'
+				}
+			});
+		});
 	});
 
 	$: if ($map) {
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index 824cb3b8..7e366c20 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -69,18 +69,21 @@
 					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] }
-								: {})
-						}
-					});
+					$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] }
+									: {})
+							}
+						},
+						'overlays'
+					);
 				} catch (e) {
 					// No reliable way to check if the map is ready to add sources and layers
 				}