From d3fefc24785539d96e00ac8fcfd5ba4526aeece0 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 7 Oct 2025 17:18:21 +0200
Subject: [PATCH 1/3] Block out feature

---
 .../VectorLayer/VectorLayer.stories.svelte    | 24 +++++++++++++++++
 .../maplibre/VectorLayer/VectorLayer.svelte   | 27 ++++++++++---------
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
index c87fab9b..6de9b446 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
+++ b/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%;
diff --git a/components/src/maplibre/VectorLayer/VectorLayer.svelte b/components/src/maplibre/VectorLayer/VectorLayer.svelte
index 6f36b805..1b5b68bf 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.svelte
+++ b/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';
@@ -30,6 +30,7 @@
 		layout?: LineLayoutProps | FillLayoutProps | CircleLayoutProps | SymbolLayoutProps;
 		hovered?: MapGeoJSONFeature | undefined;
 		selected?: MapGeoJSONFeature | undefined;
+		filter?;
 
 		onclick?: (e: MapLayerMouseEvent) => any;
 		onmousemove?: (e: MapLayerMouseEvent) => any;
@@ -44,6 +45,7 @@
 		type,
 		paint,
 		layout,
+		filter,
 		hovered = $bindable(),
 		selected = $bindable(),
 		minZoom = 0,
@@ -62,6 +64,7 @@
 	const layerSpec = {
 		id,
 		type,
+		...(filter ? { filter } : {}),
 		source: sourceId,
 		'source-layer': sourceLayer || '',
 		layout: $state.snapshot(layout) ?? {},

From 87b985553c220fc60abaf29be92ae88792191a73 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 7 Oct 2025 17:22:10 +0200
Subject: [PATCH 2/3] Extend docs

---
 components/src/maplibre/VectorLayer/VectorLayer.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.svelte b/components/src/maplibre/VectorLayer/VectorLayer.svelte
index 1b5b68bf..40ba2873 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.svelte
+++ b/components/src/maplibre/VectorLayer/VectorLayer.svelte
@@ -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;
@@ -30,7 +34,6 @@
 		layout?: LineLayoutProps | FillLayoutProps | CircleLayoutProps | SymbolLayoutProps;
 		hovered?: MapGeoJSONFeature | undefined;
 		selected?: MapGeoJSONFeature | undefined;
-		filter?;
 
 		onclick?: (e: MapLayerMouseEvent) => any;
 		onmousemove?: (e: MapLayerMouseEvent) => any;
@@ -40,12 +43,12 @@
 		id,
 		sourceId,
 		sourceLayer,
+		filter,
 		visible = true,
 		placeBelow = 'label-place-major-city',
 		type,
 		paint,
 		layout,
-		filter,
 		hovered = $bindable(),
 		selected = $bindable(),
 		minZoom = 0,

From 17c61c9309bd2a4a7dc3b06e2534b7d12f52d518 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 7 Oct 2025 17:33:58 +0200
Subject: [PATCH 3/3] Extend docs

---
 components/src/maplibre/Maplibre.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/src/maplibre/Maplibre.mdx b/components/src/maplibre/Maplibre.mdx
index c398601c..c9a4cf3e 100644
--- a/components/src/maplibre/Maplibre.mdx
+++ b/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