feat(VectorLayer): Reactive sourceLayer

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="feat/460">
+	<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%;

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));

components/src/maplibre/context.svelte.ts

@@ -39,6 +39,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) {

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;
 }