From 9a97ef34b16b33c2f4c1d38aeb38f34a68ce089c Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 3 Mar 2026 19:14:44 +0100
Subject: [PATCH 1/2] Build out feature

---
 .../VectorLayer/VectorLayer.stories.svelte    | 21 ++++++++++++++++++-
 .../maplibre/VectorLayer/VectorLayer.svelte   | 12 +++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
index 64d2fab0..8fbb8a7b 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
+++ b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
@@ -16,6 +16,13 @@
 		component: VectorLayer
 	});
 
+	const filters = [
+		['<', 'coverage_2025', 1],
+		['>', 'coverage_2025', 1]
+	];
+
+	let selectedFilter: any = $state(0);
+
 	let hovered: any = $state();
 	const handleMouseMove = (e) => {
 		hovered = e.features?.[0];
@@ -104,6 +111,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,7 +130,7 @@
 					sourceLayer="coverage"
 					type="fill"
 					id="coverage-fill"
-					filter={['<', 'coverage_2025', 1]}
+					filter={filters[selectedFilter]}
 					paint={{
 						'fill-color': '#ce541c'
 					}}
@@ -131,4 +146,8 @@
 		width: 100%;
 		height: 600px;
 	}
+	.controls {
+		margin-bottom: 1em;
+		font-family: monospace;
+	}
 </style>
diff --git a/components/src/maplibre/VectorLayer/VectorLayer.svelte b/components/src/maplibre/VectorLayer/VectorLayer.svelte
index 40ba2873..e375ac38 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.svelte
+++ b/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));

From fe7619fdded9fc1bc8a74f533dce203de5a4d96e Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 3 Mar 2026 19:16:32 +0100
Subject: [PATCH 2/2] Tweak story

---
 .../src/maplibre/VectorLayer/VectorLayer.stories.svelte     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
index 8fbb8a7b..bd4989f5 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
+++ b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
@@ -10,13 +10,15 @@
 	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 = [
+	const filters: FilterSpecification[] = [
 		['<', 'coverage_2025', 1],
 		['>', 'coverage_2025', 1]
 	];
@@ -132,7 +134,7 @@
 					id="coverage-fill"
 					filter={filters[selectedFilter]}
 					paint={{
-						'fill-color': '#ce541c'
+						'fill-color': tokens.shades.forest.base
 					}}
 				/>
 				<AttributionControl position="bottom-left" />