feat(VectorLayer): Make filter reactive (#332)

Author: awesomephant

components/src/maplibre/VectorLayer/VectorLayer.stories.svelte

@@ -10,12 +10,21 @@
 	import type { GeoJSON } from 'geojson';
 
 	import { SWRDataLabLight } from '../MapStyle';
+	import type { FilterSpecification } from 'maplibre-gl';
+	import { tokens } from '../../DesignTokens';
 
 	const { Story } = defineMeta({
 		title: 'Maplibre/Layer/VectorLayer',
 		component: VectorLayer
 	});
 
+	const filters: FilterSpecification[] = [
+		['<', 'coverage_2025', 1],
+		['>', 'coverage_2025', 1]
+	];
+
+	let selectedFilter: any = $state(0);
+
 	let hovered: any = $state();
 	const handleMouseMove = (e) => {
 		hovered = e.features?.[0];
@@ -104,6 +113,14 @@
 
 <Story asChild name="Filter">
 	<DesignTokens theme="light">
+		<div class="controls">
+			<label for="filter-select">Select filter</label>
+			<select name="filter-select" id="filter-select" bind:value={selectedFilter}>
+				{#each filters as f, i}
+					<option value={i}>{JSON.stringify(f)}</option>
+				{/each}
+			</select>
+		</div>
 		<div class="container">
 			<Map showDebug={true} style={SWRDataLabLight()}>
 				<VectorTileSource
@@ -115,9 +132,9 @@
 					sourceLayer="coverage"
 					type="fill"
 					id="coverage-fill"
-					filter={['<', 'coverage_2025', 1]}
+					filter={filters[selectedFilter]}
 					paint={{
-						'fill-color': '#ce541c'
+						'fill-color': tokens.shades.forest.base
 					}}
 				/>
 				<AttributionControl position="bottom-left" />
@@ -131,4 +148,8 @@
 		width: 100%;
 		height: 600px;
 	}
+	.controls {
+		margin-bottom: 1em;
+		font-family: monospace;
+	}
 </style>

components/src/maplibre/VectorLayer/VectorLayer.svelte

@@ -10,7 +10,8 @@
 		type SymbolLayoutProps,
 		type LinePaintProps,
 		type MapGeoJSONFeature,
-		type MapLayerMouseEvent
+		type MapLayerMouseEvent,
+		type FilterSpecification
 	} from 'maplibre-gl';
 
 	import { getMapContext } from '../context.svelte.js';
@@ -24,7 +25,7 @@
 		/**
 		 * Maplibre [filter expression](https://maplibre.org/maplibre-style-spec/layers/#filter)
 		 */
-		filter?: any[];
+		filter?: FilterSpecification;
 		type: 'line' | 'fill' | 'circle' | 'symbol';
 		placeBelow?: string;
 		visible?: boolean;
@@ -91,6 +92,13 @@
 		}
 	});
 
+	// Make filter reactive
+	$effect(() => {
+		if (styleLoaded && filter) {
+			map?.setFilter(id, filter);
+		}
+	});
+
 	$effect(() => resetLayerEventListener(map, 'click', id, onclick));
 	$effect(() => resetLayerEventListener(map, 'mousemove', id, onmousemove));
 	$effect(() => resetLayerEventListener(map, 'mouseleave', id, onmouseleave));