Add <GeoJSONSource>

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",

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';
+
+<Meta of={GeoJSONSourceStories} />
+
+# GeoJSONSource
+
+Loads vector data from a [GeoJSON](https://geojson.org/) object or file.
+
+```js
+<script lang="ts">
+  const demoData: GeoJSON.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]
+          ]
+        ]
+      }
+    ]
+  }
+</script>
+
+<Map>
+  <GeoJSONSource id='demo' data={demoData} attribution='Demo attribution' />
+  <VectorLayer
+    sourceId='demo'
+    id='demo-outline'
+    type='line'
+    paint={{'line-width': 15, 'line-color': 'red'}}
+  />
+  <AttributionControl />
+</Map>
+```
+
+<Controls />

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

@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Map from '../Map/Map.svelte';
+	import GeoJSONSource from './GeoJSONSource.svelte';
+	import VectorLayer from '../VectorLayer/VectorLayer.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+
+	import { SWRDataLabLight } from '../MapStyle';
+	import { tokens } from '../../DesignTokens';
+
+	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;
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="container">
+			<Map showDebug={true} style={SWRDataLabLight()}>
+				<GeoJSONSource id="demo" data={geoJSON} attribution="Demo attribution" />
+				<VectorLayer
+					sourceId="demo"
+					id="test-outline"
+					type="line"
+					paint={{
+						'line-width': 15,
+						'line-color': tokens.shades.red.dark1,
+						'line-opacity': 1
+					}}
+				/>
+				<AttributionControl />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 100%;
+		height: 600px;
+	}
+</style>

components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	// See: https://maplibre.org/maplibre-gl-js/docs/API/classes/GeoJSONSource/
+	import { type GeoJSONSourceSpecification } from 'maplibre-gl';
+	import MapSource from '../Source/MapSource.svelte';
+
+	interface GeoJSONSourceProps {
+		id: string;
+		/**
+		 * GeoJSON object or URL
+		 */
+		data: GeoJSON.GeoJSON | string;
+		/**
+		 * Attribution string for your data, usually rendered using an `<AttributionControl>`
+		 */
+		attribution?: string;
+		maxZoom?: number;
+	}
+
+	const { maxZoom = 24, id, data, attribution = '' }: GeoJSONSourceProps = $props();
+
+	const sourceSpec: GeoJSONSourceSpecification = {
+		type: 'geojson',
+		data,
+		maxzoom: maxZoom,
+		attribution
+	};
+</script>
+
+<MapSource {id} {sourceSpec} />

components/src/maplibre/GeoJSONSource/index.js

@@ -0,0 +1,2 @@
+import GeoJSONSource from './GeoJSONSource.svelte';
+export default GeoJSONSource;

components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte

@@ -34,7 +34,6 @@
 				<Map
 					showDebug
 					style={SWRDataLabLight({ enableBuildingExtrusions: true })}
-					enableBuildingExtrusions
 					maxZoom={20}
 					initialLocation={{
 						lng: 9.180503103314436,

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).
 
@@ -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
 

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,

components/src/maplibre/VectorTileSource/VectorTileSource.mdx

@@ -17,3 +17,5 @@ Loads tiled vector data from a tileserver. Any mablibre-supported tileserver wil
 	<VectorLayer sourceId="chargers" />
 </Map>
 ```
+
+<Controls />

components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte

@@ -20,6 +20,7 @@
 				<VectorTileSource
 					id="ev-infra-source"
 					url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
+					attribution="Demo attribution"
 				/>
 				<VectorLayer
 					sourceId="ev-infra-source"

components/src/maplibre/VectorTileSource/VectorTileSource.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	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 `<AttributionControl>`
+		 */
+		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
 	};
 </script>