feat(GeoJSONSource): Add promoteId, generateId props

components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx

@@ -42,3 +42,7 @@ Loads vector data from a [GeoJSON](https://geojson.org/) object or file.
 ```
 
 <Controls />
+
+## Notes
+
+- If you want to use hover, selection or other interactions relying on `feature-state` make sure to set `promoteId` (to use a field from the feature data as an ID) or `generateId` (to use the index).

components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte

@@ -9,36 +9,32 @@
 
 	import { SWRDataLabLight } from '../MapStyle';
 	import { tokens } from '../../DesignTokens';
+	import squareGeo from './test/square.json';
+	import stuttgartGeo from './test/stuttgart-waermenetze.json';
 
 	const { Story } = defineMeta({
 		title: 'Maplibre/Source/GeoJSONSource',
 		component: GeoJSONSource
 	});
 
-	const geoJSON = {
-		type: 'GeometryCollection',
-		geometries: [
-			{
-				type: 'Polygon',
-				coordinates: [
-					[
-						[7.99298752775212, 50.07410328331564],
-						[11.709726710536899, 50.07410328331564],
-						[11.709726710536899, 52.08770466696292],
-						[7.99298752775212, 52.08770466696292],
-						[7.99298752775212, 50.07410328331564]
-					]
-				]
-			}
-		]
-	} as GeoJSON.GeoJSON;
+	let hovered: any = $state();
+	const handleMouseMove = (e) => {
+		hovered = e.features?.[0];
+	};
+	const handleMouseLeave = () => {
+		hovered = null;
+	};
 </script>
 
 <Story asChild name="Default">
 	<DesignTokens theme="light">
 		<div class="container">
 			<Map showDebug={true} style={SWRDataLabLight()}>
-				<GeoJSONSource id="demo" data={geoJSON} attribution="Demo attribution" />
+				<GeoJSONSource
+					id="demo"
+					data={squareGeo as GeoJSON.GeoJSON}
+					attribution="Demo attribution"
+				/>
 				<VectorLayer
 					sourceId="demo"
 					placeBelow="boundary-country"
@@ -57,6 +53,44 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="ID Promotion">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map
+				showDebug={true}
+				style={SWRDataLabLight()}
+				cursor={hovered ? 'pointer' : ''}
+				initialLocation={{
+					lng: 9.223869970354485,
+					lat: 48.798414513866504,
+					zoom: 11.462711766264558
+				}}
+			>
+				<GeoJSONSource
+					id="demo"
+					data={stuttgartGeo as GeoJSON.GeoJSON}
+					attribution="Demo attribution"
+					promoteId="id"
+				/>
+				<VectorLayer
+					bind:hovered
+					onmousemove={handleMouseMove}
+					onmouseleave={handleMouseLeave}
+					sourceId="demo"
+					placeBelow="boundary-country"
+					id="test"
+					type="fill"
+					paint={{
+						'fill-color': tokens.shades.red.dark1,
+						'fill-opacity': ['case', ['boolean', ['feature-state', 'hovered'], false], 1, 0.1]
+					}}
+				/>
+				<AttributionControl />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 100%;

components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte

@@ -14,14 +14,31 @@
 		 */
 		attribution?: string;
 		maxZoom?: number;
+		/**
+		 * Use a field from the feature data for IDs. Must coerce to integer.
+		 */
+		promoteId?: string;
+		/**
+		 * Use the feature index for IDs. Overrides `promoteId`.
+		 */
+		generateId?: boolean;
 	}
 
-	const { maxZoom = 24, id, data, attribution = '' }: GeoJSONSourceProps = $props();
+	const {
+		maxZoom = 24,
+		id,
+		data,
+		attribution = '',
+		promoteId,
+		generateId = false
+	}: GeoJSONSourceProps = $props();
 
 	const sourceSpec: GeoJSONSourceSpecification = {
 		type: 'geojson',
 		maxzoom: maxZoom,
 		attribution,
+		promoteId,
+		generateId,
 		data
 	};
 </script>

components/src/maplibre/GeoJSONSource/test/square.json

@@ -0,0 +1,17 @@
+{
+	"type": "GeometryCollection",
+	"geometries": [
+		{
+			"type": "Polygon",
+			"coordinates": [
+				[
+					[7.99298752775212, 50.07410328331564],
+					[11.709726710536899, 50.07410328331564],
+					[11.709726710536899, 52.08770466696292],
+					[7.99298752775212, 52.08770466696292],
+					[7.99298752775212, 50.07410328331564]
+				]
+			]
+		}
+	]
+}