feat(VectorLayer): Add filter prop

components/src/maplibre/Maplibre.mdx

@@ -75,6 +75,7 @@ This example initialises a map using the SWRDataLabLight style, adds an addition
 - **[NavigationControl](?path=/docs/maplibre-control-navigationcontrol--docs)**: Renders zoom buttons and optional compass
 - **[GeocoderControl](?path=/docs/maplibre-control-geocodercontrol--docs)**: Renders a search input using [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) and any supported forward geocoding service (currently [maptiler](https://www.maptiler.com/) only)
 - **[AttributionControl](?path=/docs/maplibre-control-attributioncontrol--docs)**: Renders maplibre's default attribution control
+- **[InspectControl](?path=/docs/maplibre-control-inspectcontrol--docs)**: Renders maplibre's [inspect control](https://maplibre.org/maplibre-gl-inspect/API/index.html)
 - **[Custom controls](?path=/docs/maplibre-control-mapcontrol--docs)**: Renders arbitrary HTML inside maplibre's layout
 
 ### Extras
@@ -85,6 +86,7 @@ This example initialises a map using the SWRDataLabLight style, adds an addition
 ### Styles
 
 - **[SWR Data Lab Light](?path=/docs/maplibre-style-swr-data-lab-light--docs)**: Light-themed basemap using SWR colours and typefaces
+- **[SWR Data Lab Dark](?path=/docs/maplibre-style-swr-data-lab-dark--docs)**: Dark-themed basemap using SWR colours and typefaces
 - Any valid MapLibre style specification, such as [versatiles-style](https://github.com/versatiles-org/versatiles-style) (see [demo](?path=/story/map-map--alternate-style))
 
 ## Known issues

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

@@ -102,6 +102,30 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="Filter">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map showDebug={true} style={SWRDataLabLight()}>
+				<VectorTileSource
+					id="ev-infra-source"
+					url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
+				/>
+				<VectorLayer
+					sourceId="ev-infra-source"
+					sourceLayer="coverage"
+					type="fill"
+					id="coverage-fill"
+					filter={['<', 'coverage_2025', 1]}
+					paint={{
+						'fill-color': '#ce541c'
+					}}
+				/>
+				<AttributionControl position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 100%;

components/src/maplibre/VectorLayer/VectorLayer.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type {
-		AddLayerObject,
-		CircleLayoutProps,
-		CirclePaintProps,
-		FillLayoutProps,
-		FillPaintProps,
-		LineLayoutProps,
-		SymbolPaintProps,
-		SymbolLayoutProps,
-		LinePaintProps,
-		MapGeoJSONFeature,
-		MapLayerMouseEvent
+	import {
+		type AddLayerObject,
+		type CircleLayoutProps,
+		type CirclePaintProps,
+		type FillLayoutProps,
+		type FillPaintProps,
+		type LineLayoutProps,
+		type SymbolPaintProps,
+		type SymbolLayoutProps,
+		type LinePaintProps,
+		type MapGeoJSONFeature,
+		type MapLayerMouseEvent
 	} from 'maplibre-gl';
 
 	import { getMapContext } from '../context.svelte.js';
@@ -21,6 +21,10 @@
 		id: string;
 		sourceId: string;
 		sourceLayer?: string;
+		/**
+		 * Maplibre [filter expression](https://maplibre.org/maplibre-style-spec/layers/#filter)
+		 */
+		filter?: any[];
 		type: 'line' | 'fill' | 'circle' | 'symbol';
 		placeBelow?: string;
 		visible?: boolean;
@@ -39,6 +43,7 @@
 		id,
 		sourceId,
 		sourceLayer,
+		filter,
 		visible = true,
 		placeBelow = 'label-place-major-city',
 		type,
@@ -62,6 +67,7 @@
 	const layerSpec = {
 		id,
 		type,
+		...(filter ? { filter } : {}),
 		source: sourceId,
 		'source-layer': sourceLayer || '',
 		layout: $state.snapshot(layout) ?? {},