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; + };
- + + + +
+ + + + + +
+
+
+