diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx b/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx
index cacf5af0..d8f75675 100644
--- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx
+++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx
@@ -42,3 +42,7 @@ Loads vector data from a [GeoJSON](https://geojson.org/) object or file.
```
+
+## 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).
\ No newline at end of file
diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte
index a74c5cfe..80b4447b 100644
--- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte
+++ b/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;
+ };