From 28df5da925cb7ecb3baefafe1b732728765d4804 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 2 Oct 2025 14:33:12 +0200 Subject: [PATCH 1/3] Build feature --- .../MapStyle/SWRDataLabDark.stories.svelte | 15 +++++++++++++++ .../src/maplibre/MapStyle/SWRDataLabDark.ts | 10 +++++----- .../src/maplibre/MapStyle/SWRDataLabLight.ts | 5 +---- components/src/maplibre/MapStyle/types.ts | 8 ++++++++ 4 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 components/src/maplibre/MapStyle/types.ts diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte index ef4fdf93..9d41afd1 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte +++ b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte @@ -30,6 +30,21 @@ + + +
+
+ + + +
+
+ +
diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts index cb9cfe1a..9f6e747a 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts +++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts @@ -7,6 +7,7 @@ import makeTransit from './components/Transit'; import makePlaceLabels from './components/PlaceLabels'; import makeWalking from './components/Walking'; import makeRoads from './components/Roads'; +import type { StyleOptions } from './types'; const tokens = { sans_regular: ['SWR Sans Regular'], @@ -49,10 +50,6 @@ const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWa const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens); const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens); -interface StyleOptions { - enableBuildingExtrusions?: boolean; -} - interface styleFunction { (options?: StyleOptions): StyleSpecification; } @@ -60,6 +57,9 @@ interface styleFunction { const style: styleFunction = (opts) => { const options = { enableBuildingExtrusions: false, + roads: { + showLabels: true + }, ...opts } as StyleOptions; @@ -127,7 +127,7 @@ const style: styleFunction = (opts) => { // 7. Labels ...walkingLabels, - ...roadLabels, + ...(options.roads?.showLabels ? roadLabels : []), // 8. Building extrusions ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []), diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts index 0e666aee..b78845ca 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts @@ -7,6 +7,7 @@ import makeTransit from './components/Transit'; import makePlaceLabels from './components/PlaceLabels'; import makeWalking from './components/Walking'; import makeRoads from './components/Roads'; +import type { StyleOptions } from './types'; const tokens = { sans_regular: ['SWR Sans Regular'], @@ -49,10 +50,6 @@ const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWa const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens); const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens); -interface StyleOptions { - enableBuildingExtrusions?: boolean; -} - interface styleFunction { (options?: StyleOptions): StyleSpecification; } diff --git a/components/src/maplibre/MapStyle/types.ts b/components/src/maplibre/MapStyle/types.ts new file mode 100644 index 00000000..34038225 --- /dev/null +++ b/components/src/maplibre/MapStyle/types.ts @@ -0,0 +1,8 @@ +interface StyleOptions { + enableBuildingExtrusions?: boolean; + roads?: { + showLabels?: boolean; + }; +} + +export type { StyleOptions }; From 8cdaa6db77ee9076195afa3bd783b880555120d6 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 2 Oct 2025 14:35:13 +0200 Subject: [PATCH 2/3] Extend docs --- components/src/maplibre/MapStyle/SWRDataLabLight.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx index 6a502c5e..4c66b524 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx @@ -82,6 +82,10 @@ Call `SWRDataLabLight()` to construct a style document and pass the result to th ```ts interface StyleOptions { enableBuildingExtrusions?: boolean; + roads?: { + showLabels?: boolean + } + } ``` From 4def03167fdd3f44e8e7b643b542132f08f72ab5 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Sun, 5 Oct 2025 12:24:23 +0200 Subject: [PATCH 3/3] Build out feature --- .../maplibre/GeoJSONSource/GeoJSONSource.mdx | 4 + .../GeoJSONSource.stories.svelte | 70 +- .../GeoJSONSource/GeoJSONSource.svelte | 19 +- .../maplibre/GeoJSONSource/test/square.json | 17 + .../test/stuttgart-waermenetze.json | 667 ++++++++++++++++++ .../maplibre/VectorLayer/VectorLayer.svelte | 9 +- 6 files changed, 763 insertions(+), 23 deletions(-) create mode 100644 components/src/maplibre/GeoJSONSource/test/square.json create mode 100644 components/src/maplibre/GeoJSONSource/test/stuttgart-waermenetze.json 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 ae3f88d0..3c3244f3 100644 --- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte @@ -8,36 +8,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; + };
- + + + +
+ + + + + +
+ + +