From f299bd79b2fc5a7a64dd7178792595ab6558f825 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 26 Jun 2026 16:30:05 +0200
Subject: [PATCH 1/2] Build out feature

---
 .../VectorLayer/VectorLayer.stories.svelte    | 53 +++++++++++++++++--
 .../maplibre/VectorLayer/VectorLayer.svelte   | 16 +++++-
 components/src/maplibre/context.svelte.ts     |  5 ++
 components/src/maplibre/types.ts              | 15 +++---
 4 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
index e44d33d3..ecba132a 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
+++ b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
@@ -11,7 +11,7 @@
 	import SamplePoints from './sample-points.json';
 
 	import { SWRDataLabLight } from '../MapStyle';
-	import type { FilterSpecification } from 'maplibre-gl';
+	import type { Feature, FilterSpecification, MapGeoJSONFeature } from 'maplibre-gl';
 	import { tokens } from '../../DesignTokens';
 
 	const { Story } = defineMeta({
@@ -24,14 +24,17 @@
 		['>', 'coverage_2025', 1]
 	];
 
+	const layers: string[] = ['hochwasser_depth_L', 'hochwasser_depth_M', 'hochwasser_depth_H'];
+
 	let selectedFilter: any = $state(0);
+	let selectedLayer: any = $state(0);
 
-	let hovered: any = $state();
-	const handleMouseMove = (e) => {
+	let hovered: MapGeoJSONFeature | undefined = $state();
+	const handleMouseMove = (e: any) => {
 		hovered = e.features?.[0];
 	};
 	const handleMouseLeave = () => {
-		hovered = null;
+		hovered = undefined;
 	};
 </script>
 
@@ -170,6 +173,48 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="Reactive SourceLayer">
+	<DesignTokens theme="light">
+		<div class="controls">
+			<label for="filter-select">Select layer</label>
+			<select name="layer-select" id="layer-select" bind:value={selectedLayer}>
+				{#each layers as l, i}
+					<option value={i}>{l}</option>
+				{/each}
+			</select>
+		</div>
+		<div class="container">
+			<Map
+				showDebug={true}
+				style={SWRDataLabLight()}
+				initialLocation={{
+					lng: 8.311766543077056,
+					lat: 49.700849765957486,
+					zoom: 12.422750784646452
+				}}
+			>
+				<VectorTileSource
+					id="test-source"
+					tiles={[
+						`https://static.datenhub.net/data/components/hochwasser_DERP.versatiles?{z}/{x}/{y}`
+					]}
+				>
+					<VectorLayer
+						sourceId="test-source"
+						sourceLayer={layers[selectedLayer]}
+						type="fill"
+						id="coverage-fill"
+						paint={{
+							'fill-color': tokens.shades.red.base
+						}}
+					/>
+				</VectorTileSource>
+				<AttributionControl position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 100%;
diff --git a/components/src/maplibre/VectorLayer/VectorLayer.svelte b/components/src/maplibre/VectorLayer/VectorLayer.svelte
index 251f2664..caaf4cdc 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.svelte
+++ b/components/src/maplibre/VectorLayer/VectorLayer.svelte
@@ -50,7 +50,6 @@
 
 	const ctx = getMapContext();
 
-	let beforeId: string | undefined = $state();
 	let prevSelected: string | number | undefined = $state();
 	let prevHovered: string | number | undefined = $state();
 
@@ -66,19 +65,32 @@
 		maxzoom: maxZoom
 	}) as AddLayerObject;
 
+	// svelte-ignore state_referenced_locally
+	const initialSourceLayer = sourceLayer;
+
 	$effect(() => {
 		ctx.waitForStyleLoaded((m) => {
 			ctx.addLayer(layerSpec, placeBelow);
 		});
 	});
 
-	// Make filter reactive
+	// make filter reactive
 	$effect(() => {
 		if (ctx.map && ctx.styleLoaded && filter) {
 			ctx.map.setFilter(id, filter);
 		}
 	});
 
+	// make sourceLayer reactive
+	// There is no setSourceLayer() method in maplibre, so we delete and re-create the layer instead
+	// Comparing initialSourceLayer ensures we don't do this on the initial render
+	$effect(() => {
+		if (ctx.map && ctx.styleLoaded && sourceLayer !== initialSourceLayer) {
+			ctx.map.removeLayer(id);
+			ctx.addLayer(layerSpec, placeBelow);
+		}
+	});
+
 	$effect(() => resetLayerEventListener(ctx.map, 'click', id, onclick));
 	$effect(() => resetLayerEventListener(ctx.map, 'mousemove', id, onmousemove));
 	$effect(() => resetLayerEventListener(ctx.map, 'mouseleave', id, onmouseleave));
diff --git a/components/src/maplibre/context.svelte.ts b/components/src/maplibre/context.svelte.ts
index 2a925545..3c177d97 100644
--- a/components/src/maplibre/context.svelte.ts
+++ b/components/src/maplibre/context.svelte.ts
@@ -26,6 +26,7 @@ export class MapContext {
 	minzoom = $state(0);
 	maxzoom = $state(24);
 	styleLoaded = $state(false);
+	idle = $state(false);
 	private _pending: ((map: maplibregl.Map) => void)[] = [];
 	private _listener?: maplibregl.Listener = undefined;
 
@@ -39,6 +40,7 @@ export class MapContext {
 			this._map?.off('styledata', this._listener);
 			this._listener = undefined;
 		}
+
 		// Set new map instance and bind new event listeners
 		this._map = value;
 		if (this._map) {
@@ -89,6 +91,9 @@ export class MapContext {
 		});
 		this._pending = [];
 	}
+	private _onIdle(e: maplibregl.MapLibreEvent) {
+		this.idle = true;
+	}
 }
 
 export class SourceContext {
diff --git a/components/src/maplibre/types.ts b/components/src/maplibre/types.ts
index 2736e705..e09611bc 100644
--- a/components/src/maplibre/types.ts
+++ b/components/src/maplibre/types.ts
@@ -43,13 +43,12 @@ export interface Location {
 }
 
 export interface SourceProps {
-  id: string;
-  minZoom?: number;
+	id: string;
+	minZoom?: number;
 	maxZoom?: number;
-		/**
-		 * Attribution string for your data, usually rendered using an `<AttributionControl/>`
-		 */
-  attribution?: string;
-  children?: Snippet;
-
+	/**
+	 * Attribution string for your data, usually rendered using an `<AttributionControl/>`
+	 */
+	attribution?: string;
+	children?: Snippet;
 }

From 9f087584fbbb0115564d8d4284d74022610ae9c7 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 26 Jun 2026 16:35:06 +0200
Subject: [PATCH 2/2] revert unrelated change

---
 .../src/maplibre/VectorLayer/VectorLayer.stories.svelte       | 2 +-
 components/src/maplibre/context.svelte.ts                     | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
index ecba132a..c5ce2aae 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
+++ b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
@@ -173,7 +173,7 @@
 	</DesignTokens>
 </Story>
 
-<Story asChild name="Reactive SourceLayer">
+<Story asChild name="feat/460">
 	<DesignTokens theme="light">
 		<div class="controls">
 			<label for="filter-select">Select layer</label>
diff --git a/components/src/maplibre/context.svelte.ts b/components/src/maplibre/context.svelte.ts
index 3c177d97..750d0439 100644
--- a/components/src/maplibre/context.svelte.ts
+++ b/components/src/maplibre/context.svelte.ts
@@ -26,7 +26,6 @@ export class MapContext {
 	minzoom = $state(0);
 	maxzoom = $state(24);
 	styleLoaded = $state(false);
-	idle = $state(false);
 	private _pending: ((map: maplibregl.Map) => void)[] = [];
 	private _listener?: maplibregl.Listener = undefined;
 
@@ -91,9 +90,6 @@ export class MapContext {
 		});
 		this._pending = [];
 	}
-	private _onIdle(e: maplibregl.MapLibreEvent) {
-		this.idle = true;
-	}
 }
 
 export class SourceContext {