From b22f6ff5747ffeafa8b62e01f83a55a2a37697aa Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Tue, 22 Jul 2025 16:41:53 +0200 Subject: [PATCH 1/7] Block out GeoJSONSource --- components/package.json | 3 +- .../GeoJSONSource.stories.svelte | 61 +++++++++++++++++++ .../GeoJSONSource/GeoJSONSource.svelte | 25 ++++++++ .../src/maplibre/GeoJSONSource/index.js | 2 + .../maplibre/VectorLayer/VectorLayer.svelte | 6 +- 5 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte create mode 100644 components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte create mode 100644 components/src/maplibre/GeoJSONSource/index.js diff --git a/components/package.json b/components/package.json index 545b5ed4..a84b7bb7 100644 --- a/components/package.json +++ b/components/package.json @@ -49,6 +49,7 @@ "@sveltejs/kit": "^2.22.2", "@sveltejs/package": "^2.3.12", "@sveltejs/vite-plugin-svelte": "^5.1.0", + "@types/geojson": "^7946.0.16", "@versatiles/style": "^5.6.0", "@vitest/browser": "^3.2.4", "@vitest/coverage-v8": "^3.2.4", @@ -61,9 +62,9 @@ "sass-embedded": "^1.89.2", "semantic-release": "^24.2.6", "storybook": "^9.0.15", - "svelte-preprocess": "^6.0.3", "svelte": "^5.23.0", "svelte-check": "^4.0.0", + "svelte-preprocess": "^6.0.3", "typescript": "^5.8.3", "vite": "^6.0.0", "vitest": "^3.1.1", diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte new file mode 100644 index 00000000..33c77480 --- /dev/null +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte @@ -0,0 +1,61 @@ + + + + +
+ + + + + +
+ + + + diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte new file mode 100644 index 00000000..1605b8a8 --- /dev/null +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte @@ -0,0 +1,25 @@ + + + diff --git a/components/src/maplibre/GeoJSONSource/index.js b/components/src/maplibre/GeoJSONSource/index.js new file mode 100644 index 00000000..786015f2 --- /dev/null +++ b/components/src/maplibre/GeoJSONSource/index.js @@ -0,0 +1,2 @@ +import GeoJSONSource from './GeoJSONSource.svelte'; +export default GeoJSONSource; diff --git a/components/src/maplibre/VectorLayer/VectorLayer.svelte b/components/src/maplibre/VectorLayer/VectorLayer.svelte index 8ccd2ffb..45b79205 100644 --- a/components/src/maplibre/VectorLayer/VectorLayer.svelte +++ b/components/src/maplibre/VectorLayer/VectorLayer.svelte @@ -10,7 +10,7 @@ SymbolLayoutProps, LinePaintProps, MapGeoJSONFeature, - MapLayerMouseEvent, + MapLayerMouseEvent } from 'maplibre-gl'; import { getMapContext } from '../context.svelte.js'; @@ -20,7 +20,7 @@ interface VectorLayerProps { id: string; sourceId: string; - sourceLayer: string; + sourceLayer?: string; type: 'line' | 'fill' | 'circle' | 'symbol'; placeBelow: string; visible?: boolean; @@ -62,7 +62,7 @@ id, type, source: sourceId, - 'source-layer': sourceLayer, + 'source-layer': sourceLayer || '', layout: $state.snapshot(layout) ?? {}, paint: $state.snapshot(paint) ?? {}, minzoom: minZoom, From 936563ec9a923bf18736a0a0210e1dccf59d6aa8 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Tue, 22 Jul 2025 16:43:15 +0200 Subject: [PATCH 2/7] Drop deprecated prop --- components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte index 256b001e..7782a9c4 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte @@ -34,7 +34,6 @@ Date: Tue, 22 Jul 2025 16:43:32 +0200 Subject: [PATCH 3/7] Rebuild lockfile --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 1981bf52..4a5f334d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "@sveltejs/kit": "^2.22.2", "@sveltejs/package": "^2.3.12", "@sveltejs/vite-plugin-svelte": "^5.1.0", + "@types/geojson": "^7946.0.16", "@versatiles/style": "^5.6.0", "@vitest/browser": "^3.2.4", "@vitest/coverage-v8": "^3.2.4", From 2bcb0e6562b71a6e7e46246a6436e610fcde4b60 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Tue, 22 Jul 2025 17:29:25 +0200 Subject: [PATCH 4/7] Iterate documentation --- .../maplibre/GeoJSONSource/GeoJSONSource.mdx | 44 +++++++++++++++++++ .../GeoJSONSource.stories.svelte | 7 +-- .../GeoJSONSource/GeoJSONSource.svelte | 14 +++--- .../VectorTileSource/VectorTileSource.mdx | 2 + .../VectorTileSource.stories.svelte | 1 + .../VectorTileSource/VectorTileSource.svelte | 11 +++-- 6 files changed, 67 insertions(+), 12 deletions(-) create mode 100644 components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx b/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx new file mode 100644 index 00000000..54b44ef5 --- /dev/null +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx @@ -0,0 +1,44 @@ +import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks'; + +import * as GeoJSONSourceStories from './GeoJSONSource.stories.svelte'; + + + +# GeoJSONSource + +Loads vector data from a [GeoJSON](https://geojson.org/) object or file. + +```js + + + + + + + +``` + + diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte index 33c77480..26031d4d 100644 --- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte @@ -7,6 +7,7 @@ import AttributionControl from '../AttributionControl/AttributionControl.svelte'; import { SWRDataLabLight } from '../MapStyle'; + import { tokens } from '../../DesignTokens'; const { Story } = defineMeta({ title: 'Maplibre/Source/GeoJSONSource', @@ -36,14 +37,14 @@
- + diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte index 1605b8a8..be84fb47 100644 --- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte @@ -1,23 +1,27 @@ diff --git a/components/src/maplibre/VectorTileSource/VectorTileSource.mdx b/components/src/maplibre/VectorTileSource/VectorTileSource.mdx index ff66c0ad..a9fff7b6 100644 --- a/components/src/maplibre/VectorTileSource/VectorTileSource.mdx +++ b/components/src/maplibre/VectorTileSource/VectorTileSource.mdx @@ -17,3 +17,5 @@ Loads tiled vector data from a tileserver. Any mablibre-supported tileserver wil ``` + + diff --git a/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte b/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte index b36a3c6c..03269e39 100644 --- a/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte +++ b/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte @@ -20,6 +20,7 @@ - import { type Snippet } from 'svelte'; import { type SourceSpecification } from 'maplibre-gl'; import MapSource from '../Source/MapSource.svelte'; @@ -8,16 +7,20 @@ url: string; minZoom?: number; maxZoom?: number; - children?: Snippet; + /** + * Attribution string for your data, usually rendered using an `` + */ + attribution?: string; } - const { minZoom = 0, maxZoom = 24, id, url }: VectorTileSourceProps = $props(); + const { minZoom = 0, maxZoom = 24, id, url, attribution }: VectorTileSourceProps = $props(); const sourceSpec: SourceSpecification = { type: 'vector', tiles: [url], maxzoom: maxZoom, - minzoom: minZoom + minzoom: minZoom, + attribution }; From 13de5ef0a45a84588b552a4c5fe07e0e702126ff Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Tue, 22 Jul 2025 17:33:12 +0200 Subject: [PATCH 5/7] Don't panic when attribution is unset --- components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte | 2 +- .../src/maplibre/VectorTileSource/VectorTileSource.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte index be84fb47..c5e96ff1 100644 --- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte @@ -16,7 +16,7 @@ attribution?: string; } - const { maxZoom = 24, id, data, attribution }: GeoJSONSourceProps = $props(); + const { maxZoom = 24, id, data, attribution = '' }: GeoJSONSourceProps = $props(); const sourceSpec: GeoJSONSourceSpecification = { type: 'geojson', diff --git a/components/src/maplibre/VectorTileSource/VectorTileSource.svelte b/components/src/maplibre/VectorTileSource/VectorTileSource.svelte index cbc4e4bc..62761ac7 100644 --- a/components/src/maplibre/VectorTileSource/VectorTileSource.svelte +++ b/components/src/maplibre/VectorTileSource/VectorTileSource.svelte @@ -13,7 +13,7 @@ attribution?: string; } - const { minZoom = 0, maxZoom = 24, id, url, attribution }: VectorTileSourceProps = $props(); + const { minZoom = 0, maxZoom = 24, id, url, attribution = '' }: VectorTileSourceProps = $props(); const sourceSpec: SourceSpecification = { type: 'vector', From 8a05161cb16a59cd3d459d1a7ed99feb4cfe88e6 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Tue, 22 Jul 2025 17:47:49 +0200 Subject: [PATCH 6/7] Iterate docs --- components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx | 8 ++++---- .../src/maplibre/GeoJSONSource/GeoJSONSource.svelte | 2 +- components/src/maplibre/Maplibre.mdx | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx b/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx index 54b44ef5..cacf5af0 100644 --- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.mdx @@ -30,11 +30,11 @@ Loads vector data from a [GeoJSON](https://geojson.org/) object or file. - + diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte index c5e96ff1..9cf1a230 100644 --- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte +++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte @@ -5,7 +5,6 @@ interface GeoJSONSourceProps { id: string; - maxZoom?: number; /** * GeoJSON object or URL */ @@ -14,6 +13,7 @@ * Attribution string for your data, usually rendered using an `` */ attribution?: string; + maxZoom?: number; } const { maxZoom = 24, id, data, attribution = '' }: GeoJSONSourceProps = $props(); diff --git a/components/src/maplibre/Maplibre.mdx b/components/src/maplibre/Maplibre.mdx index 06889000..7d3b2004 100644 --- a/components/src/maplibre/Maplibre.mdx +++ b/components/src/maplibre/Maplibre.mdx @@ -62,7 +62,8 @@ This example initialises a map using the SWRDataLabLight style, adds an addition ### Sources -- **[VectorTileSource](?path=/docs/maplibre-source-vectortilesource--docs)**: Loads a vector tile source supplied by a tileserver +- **[VectorTileSource](?path=/docs/maplibre-source-vectortilesource--docs)**: Loads vector tile data supplied by a tileserver +- **[GeoJSONSource](?path=/docs/maplibre-source-geojsonsource--docs)**: Loads a vector data from a GeoJSON object or file ### Layers From 6000834bb1f5839f6f30b897b4603427ad4683cf Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Tue, 22 Jul 2025 17:49:02 +0200 Subject: [PATCH 7/7] fix casing --- components/src/maplibre/Maplibre.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/src/maplibre/Maplibre.mdx b/components/src/maplibre/Maplibre.mdx index 7d3b2004..533e0dc9 100644 --- a/components/src/maplibre/Maplibre.mdx +++ b/components/src/maplibre/Maplibre.mdx @@ -7,7 +7,7 @@ import * as MapStyleStories from './MapStyle/SWRDataLabLight.stories.svelte'; # Maplibre -Lightweight svelte components and basemaps for rendering custom slippy maps using the [versatiles](https://docs.versatiles.org/) stack. +Lightweight Svelte components and basemaps for rendering custom slippy maps using the [versatiles](https://docs.versatiles.org/) stack. Based on [prior work](https://github.com/SWRdata/frontend_svelte_p012_spritpreise/blob/main/src/lib/components/Map/Map.svelte) from [Michael Kreil](https://github.com/MichaelKreil), [Jakob Bauer](https://github.com/AgricolaJKB), [dimfield](https://github.com/dimfeld/svelte-maplibre) and [MIRUNE](https://github.com/MIERUNE/svelte-maplibre-gl).