From 472a3e84a51a17ebf0f2fa6746d298d30eeb7b6a Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 28 May 2026 14:45:44 +0200
Subject: [PATCH 1/6] Block out files

---
 .../HillshadeLayer.stories.svelte             | 32 ++++++++++
 .../HillshadeLayer/HillshadeLayer.svelte      | 59 +++++++++++++++++++
 .../src/maplibre/HillshadeLayer/index.js      |  2 +
 3 files changed, 93 insertions(+)
 create mode 100644 components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
 create mode 100644 components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte
 create mode 100644 components/src/maplibre/HillshadeLayer/index.js

diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
new file mode 100644
index 00000000..531c6b94
--- /dev/null
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
@@ -0,0 +1,32 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import Map from '../Map/Map.svelte';
+	import HillshadeLayer from './HillshadeLayer.svelte';
+	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+
+	import { SWRDataLabLight } from '../MapStyle';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Layer/HillshadeLayer',
+		component: HillshadeLayer
+	});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map showDebug={true} style={SWRDataLabLight()}>
+				<AttributionControl position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 100%;
+		height: 600px;
+	}
+</style>
diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte b/components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte
new file mode 100644
index 00000000..7ade7b8e
--- /dev/null
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { type AddLayerObject } from 'maplibre-gl';
+
+	import { getMapContext } from '../context.svelte.js';
+	import { onDestroy } from 'svelte';
+	import { resetLayerEventListener } from '../utils.js';
+
+	interface HillshadeLayerProps extends Omit<
+		maplibregl.HillshadeLayerSpecification,
+		'id' | 'source' | 'source-layer'
+	> {
+		id: string;
+		sourceId: string;
+		sourceLayer?: string;
+		placeBelow?: string;
+		visible?: boolean;
+		minZoom?: number;
+		maxZoom?: number;
+	}
+	const {
+		id,
+		sourceId,
+		sourceLayer,
+		placeBelow,
+		type,
+		paint,
+		layout,
+		hovered = $bindable(),
+		selected = $bindable(),
+		minZoom = 0,
+		maxZoom = 24,
+		onclick,
+		onmousemove,
+		onmouseleave
+	}: HillshadeLayerProps = $props();
+
+	const ctx = getMapContext();
+	let beforeId: string | undefined = $state();
+
+	const layerSpec = $derived({
+		id,
+		type,
+		source: sourceId,
+		'source-layer': sourceLayer || '',
+		layout: layout ?? {},
+		paint: paint ?? {},
+		minzoom: minZoom,
+		maxzoom: maxZoom
+	}) as AddLayerObject;
+
+	$effect(() => {
+		ctx.waitForStyleLoaded((m) => {
+			ctx.addLayer(layerSpec, placeBelow);
+		});
+	});
+	onDestroy(() => {
+		if (ctx.map && ctx.map.getLayer(id)) ctx.map.removeLayer(id);
+	});
+</script>
diff --git a/components/src/maplibre/HillshadeLayer/index.js b/components/src/maplibre/HillshadeLayer/index.js
new file mode 100644
index 00000000..d69c1f5a
--- /dev/null
+++ b/components/src/maplibre/HillshadeLayer/index.js
@@ -0,0 +1,2 @@
+import HillshadeLayer from './HillshadeLayer.svelte';
+export default HillshadeLayer;

From 0c6e0861c619fe4183d552cc7fc9b8b39a21b128 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 17 Jun 2026 11:46:26 +0200
Subject: [PATCH 2/6] Block out feature

---
 .../GeoJSONSource/GeoJSONSource.svelte        | 13 ++-----
 .../HillshadeLayer.stories.svelte             | 13 +++++++
 .../HillshadeLayer/HillshadeLayer.svelte      | 12 +-----
 .../HillshadeSource/HillshadeSource.svelte    | 38 +++++++++++++++++++
 .../src/maplibre/HillshadeSource/index.js     |  2 +
 .../src/maplibre/Source/MapSource.svelte      |  4 +-
 .../VectorTileSource/VectorTileSource.svelte  | 15 ++------
 .../{VectorTileSource => }/fetchTileJson.ts   |  2 +-
 components/src/maplibre/types.ts              | 13 +++++++
 9 files changed, 78 insertions(+), 34 deletions(-)
 create mode 100644 components/src/maplibre/HillshadeSource/HillshadeSource.svelte
 create mode 100644 components/src/maplibre/HillshadeSource/index.js
 rename components/src/maplibre/{VectorTileSource => }/fetchTileJson.ts (90%)

diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte
index 7be2f3a4..1803e942 100644
--- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte
+++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte
@@ -2,18 +2,13 @@
 	// See: https://maplibre.org/maplibre-gl-js/docs/API/classes/GeoJSONSource/
 	import { type GeoJSONSourceSpecification } from 'maplibre-gl';
 	import MapSource from '../Source/MapSource.svelte';
+	import type { SourceProps } from '../types';
 
-	interface GeoJSONSourceProps {
-		id: string;
+	interface GeoJSONSourceProps extends Omit<SourceProps, "children"> {
 		/**
 		 * GeoJSON object or URL
 		 */
 		data: GeoJSON.GeoJSON | string;
-		/**
-		 * Attribution string for your data, usually rendered using an `<AttributionControl>`
-		 */
-		attribution?: string;
-		maxZoom?: number;
 		/**
 		 * Use a field from the feature data for IDs. Must coerce to integer.
 		 */
@@ -35,7 +30,7 @@
 		generateId = false
 	}: GeoJSONSourceProps = $props();
 
-	const sourceSpec: GeoJSONSourceSpecification = {
+	const sourceSpec: GeoJSONSourceSpecification = $derived({
 		type: 'geojson',
 		maxzoom: maxZoom,
 		attribution,
@@ -43,7 +38,7 @@
 		generateId,
 		lineMetrics,
 		data
-	};
+	});
 </script>
 
 <MapSource {id} {sourceSpec} />
diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
index 531c6b94..34b0e434 100644
--- a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
@@ -7,6 +7,7 @@
 	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
 
 	import { SWRDataLabLight } from '../MapStyle';
+	import HillshadeSource from '../HillshadeSource/HillshadeSource.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Maplibre/Layer/HillshadeLayer',
@@ -18,6 +19,18 @@
 	<DesignTokens theme="light">
 		<div class="container">
 			<Map showDebug={true} style={SWRDataLabLight()}>
+			  <HillshadeSource id='hillshade' url="https://tiles-dev.datenhub.net/tiles/elevation/tiles.json">
+					<HillshadeLayer sourceId="hillshade" id="test"
+					  paint={{
+                    'hillshade-method': 'standard',
+                    'hillshade-illumination-direction': 315,
+                    'hillshade-shadow-color': '#000000',
+                    'hillshade-highlight-color': '#FFFFFF',
+                    'hillshade-accent-color': '#000000',
+                    'hillshade-exaggeration': 0.5
+                }}
+            />
+					</HillshadeSource>
 				<AttributionControl position="bottom-left" />
 			</Map>
 		</div>
diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte b/components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte
index 7ade7b8e..421bd5f2 100644
--- a/components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.svelte
@@ -3,11 +3,10 @@
 
 	import { getMapContext } from '../context.svelte.js';
 	import { onDestroy } from 'svelte';
-	import { resetLayerEventListener } from '../utils.js';
 
 	interface HillshadeLayerProps extends Omit<
 		maplibregl.HillshadeLayerSpecification,
-		'id' | 'source' | 'source-layer'
+		'id' | 'source' | 'source-layer' | 'type'
 	> {
 		id: string;
 		sourceId: string;
@@ -22,24 +21,17 @@
 		sourceId,
 		sourceLayer,
 		placeBelow,
-		type,
 		paint,
 		layout,
-		hovered = $bindable(),
-		selected = $bindable(),
 		minZoom = 0,
 		maxZoom = 24,
-		onclick,
-		onmousemove,
-		onmouseleave
 	}: HillshadeLayerProps = $props();
 
 	const ctx = getMapContext();
-	let beforeId: string | undefined = $state();
 
 	const layerSpec = $derived({
 		id,
-		type,
+		type: "hillshade",
 		source: sourceId,
 		'source-layer': sourceLayer || '',
 		layout: layout ?? {},
diff --git a/components/src/maplibre/HillshadeSource/HillshadeSource.svelte b/components/src/maplibre/HillshadeSource/HillshadeSource.svelte
new file mode 100644
index 00000000..4578ba87
--- /dev/null
+++ b/components/src/maplibre/HillshadeSource/HillshadeSource.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { type PromoteIdSpecification, type RasterDEMSourceSpecification, type VectorSourceSpecification,  } from 'maplibre-gl';
+
+	import MapSource from '../Source/MapSource.svelte';
+	import type { SourceProps } from '../types';
+	import fetchTileJSON from '../fetchTileJson';
+
+	interface HillshadeSourceProps extends SourceProps {
+		url?: string;
+		tiles?: string[];
+		promoteId?: PromoteIdSpecification;
+	}
+
+	const {
+		minZoom,
+		maxZoom,
+		id,
+		url,
+		tiles,
+		attribution,
+		promoteId,
+		children
+	}: HillshadeSourceProps = $props();
+
+	let tileJsonData = $derived(url ? await fetchTileJSON(url) : {});
+
+	const sourceSpec: RasterDEMSourceSpecification = $derived({
+		type: 'raster-dem',
+	  tileSize: 256,
+		tiles: tiles || tileJsonData.tiles || [],
+		maxzoom: maxZoom || tileJsonData.maxZoom || 24,
+		minzoom: minZoom || tileJsonData.minZoom || 0,
+		attribution: attribution || tileJsonData.attribution || '',
+		promoteId
+	});
+</script>
+
+<MapSource {id} {sourceSpec} {children} />
diff --git a/components/src/maplibre/HillshadeSource/index.js b/components/src/maplibre/HillshadeSource/index.js
new file mode 100644
index 00000000..d69c1f5a
--- /dev/null
+++ b/components/src/maplibre/HillshadeSource/index.js
@@ -0,0 +1,2 @@
+import HillshadeLayer from './HillshadeLayer.svelte';
+export default HillshadeLayer;
diff --git a/components/src/maplibre/Source/MapSource.svelte b/components/src/maplibre/Source/MapSource.svelte
index d1596f2f..9d535ed7 100644
--- a/components/src/maplibre/Source/MapSource.svelte
+++ b/components/src/maplibre/Source/MapSource.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { onDestroy, onMount, type Snippet } from 'svelte';
-	import { type Map, type SourceSpecification } from 'maplibre-gl';
+	import { type GeoJSONSourceSpecification, type Map, type RasterDEMSourceSpecification, type VectorSourceSpecification } from 'maplibre-gl';
 	import { getMapContext } from '../context.svelte.js';
 
 	interface MapSourceProps {
 		id: string;
 		source?: maplibregl.VectorTileSource | maplibregl.GeoJSONSource;
-		sourceSpec: SourceSpecification;
+		sourceSpec: VectorSourceSpecification | GeoJSONSourceSpecification | RasterDEMSourceSpecification;
 		onLoad?: (map: Map, url?: string, data?: string) => undefined;
 		children?: Snippet;
 	}
diff --git a/components/src/maplibre/VectorTileSource/VectorTileSource.svelte b/components/src/maplibre/VectorTileSource/VectorTileSource.svelte
index 1a27f4fe..b0848e10 100644
--- a/components/src/maplibre/VectorTileSource/VectorTileSource.svelte
+++ b/components/src/maplibre/VectorTileSource/VectorTileSource.svelte
@@ -1,23 +1,14 @@
 <script lang="ts">
 	import { type PromoteIdSpecification, type VectorSourceSpecification } from 'maplibre-gl';
-	import type { TileJsonData } from './types';
 
 	import MapSource from '../Source/MapSource.svelte';
-	import fetchTileJSON from './fetchTileJson';
-	import type { Snippet } from 'svelte';
+	import fetchTileJSON from '../fetchTileJson';
+	import type { SourceProps } from '../types';
 
-	interface VectorTileSourceProps {
-		id: string;
+	interface VectorTileSourceProps extends SourceProps{
 		url?: string;
 		tiles?: string[];
-		minZoom?: number;
-		maxZoom?: number;
-		/**
-		 * Attribution string for your data, usually rendered using an `<AttributionControl/>`
-		 */
-		attribution?: string;
 		promoteId?: PromoteIdSpecification;
-		children?: Snippet;
 	}
 
 	const {
diff --git a/components/src/maplibre/VectorTileSource/fetchTileJson.ts b/components/src/maplibre/fetchTileJson.ts
similarity index 90%
rename from components/src/maplibre/VectorTileSource/fetchTileJson.ts
rename to components/src/maplibre/fetchTileJson.ts
index 3d6fe0f2..e7cb332a 100644
--- a/components/src/maplibre/VectorTileSource/fetchTileJson.ts
+++ b/components/src/maplibre/fetchTileJson.ts
@@ -1,4 +1,4 @@
-import { type TileJsonData } from './types';
+import { type TileJsonData } from './VectorTileSource/types';
 
 // Workaround for https://github.com/versatiles-org/versatiles-rs/issues/184
 // Drop when/if this lands: https://github.com/maplibre/maplibre-gl-js/issues/182
diff --git a/components/src/maplibre/types.ts b/components/src/maplibre/types.ts
index 56873f80..2736e705 100644
--- a/components/src/maplibre/types.ts
+++ b/components/src/maplibre/types.ts
@@ -3,6 +3,7 @@ import type {
 	FillLayerSpecification,
 	LineLayerSpecification
 } from 'maplibre-gl';
+import type { Snippet } from 'svelte';
 
 export type Layer =
 	| LineLayerSpecification
@@ -40,3 +41,15 @@ export interface Location {
 	zoom: number;
 	pitch?: number;
 }
+
+export interface SourceProps {
+  id: string;
+  minZoom?: number;
+	maxZoom?: number;
+		/**
+		 * Attribution string for your data, usually rendered using an `<AttributionControl/>`
+		 */
+  attribution?: string;
+  children?: Snippet;
+
+}

From 1e420b31dc77c09c3626c5f9fc3076b458a8620e Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 17 Jun 2026 11:57:09 +0200
Subject: [PATCH 3/6] improve docs

---
 .../src/maplibre/HillshadeLayer/HillshadeLayer.mdx  | 13 +++++++++++++
 .../HillshadeLayer/HillshadeLayer.stories.svelte    |  3 ++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 components/src/maplibre/HillshadeLayer/HillshadeLayer.mdx

diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.mdx b/components/src/maplibre/HillshadeLayer/HillshadeLayer.mdx
new file mode 100644
index 00000000..4c6c83ad
--- /dev/null
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.mdx
@@ -0,0 +1,13 @@
+
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Story, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+import * as HillshadeLayerStories from './HillshadeLayer.stories.svelte';
+
+<Meta of={HillshadeLayerStories} />
+
+# HillshadeLayer
+
+Experimental hilshade layer. Uses a `raster-dem` source to render real-time raster hillshading.
+
+<Stories />
+<Controls />
diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
index 34b0e434..5eea4785 100644
--- a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
@@ -11,7 +11,8 @@
 
 	const { Story } = defineMeta({
 		title: 'Maplibre/Layer/HillshadeLayer',
-		component: HillshadeLayer
+		component: HillshadeLayer,
+		tags: ["experimental"]
 	});
 </script>
 

From be91790c49bde72e8521ee9f0beb75df6cae30a9 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 17 Jun 2026 11:57:52 +0200
Subject: [PATCH 4/6] point to production tile server

---
 .../src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
index 5eea4785..fcd94e2f 100644
--- a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
@@ -20,7 +20,7 @@
 	<DesignTokens theme="light">
 		<div class="container">
 			<Map showDebug={true} style={SWRDataLabLight()}>
-			  <HillshadeSource id='hillshade' url="https://tiles-dev.datenhub.net/tiles/elevation/tiles.json">
+			  <HillshadeSource id='hillshade' url="https://tiles.datenhub.net/tiles/elevation/tiles.json">
 					<HillshadeLayer sourceId="hillshade" id="test"
 					  paint={{
                     'hillshade-method': 'standard',

From 72910c6522b20923c274adef92f3fc52bba50f1a Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 17 Jun 2026 12:01:13 +0200
Subject: [PATCH 5/6] rename hillshade to raster dem

---
 components/src/index.js                                   | 2 ++
 .../maplibre/HillshadeLayer/HillshadeLayer.stories.svelte | 8 ++++----
 components/src/maplibre/HillshadeSource/index.js          | 2 --
 .../RasterDEMSource.svelte}                               | 6 +++---
 components/src/maplibre/RasterDEMSource/index.js          | 2 ++
 5 files changed, 11 insertions(+), 9 deletions(-)
 delete mode 100644 components/src/maplibre/HillshadeSource/index.js
 rename components/src/maplibre/{HillshadeSource/HillshadeSource.svelte => RasterDEMSource/RasterDEMSource.svelte} (84%)
 create mode 100644 components/src/maplibre/RasterDEMSource/index.js

diff --git a/components/src/index.js b/components/src/index.js
index a3e4ba1d..24c9cdf6 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -34,7 +34,9 @@ export { default as GeocoderControl } from './maplibre/GeocoderControl/GeocoderC
 export { default as NavigationControl } from './maplibre/NavigationControl/NavigationControl.svelte';
 export { default as ScaleControl } from './maplibre/ScaleControl/ScaleControl.svelte';
 export { default as VectorLayer } from './maplibre/VectorLayer/VectorLayer.svelte';
+export { default as HillshadeLayer } from './maplibre/HillshadeLayer/HillshadeLayer.svelte';
 export { default as VectorTileSource } from './maplibre/VectorTileSource/VectorTileSource.svelte';
+export { default as RasterDEMSource } from './maplibre/RasterDEMSource/RasterDEMSource.svelte';
 export { default as GeoJSONSource } from './maplibre/GeoJSONSource/GeoJSONSource.svelte';
 export { default as ArrowSource } from './maplibre/ArrowSource/ArrowSource.svelte';
 export { default as MapSource } from './maplibre/Source/MapSource.svelte';
diff --git a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
index fcd94e2f..437e8295 100644
--- a/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
+++ b/components/src/maplibre/HillshadeLayer/HillshadeLayer.stories.svelte
@@ -7,7 +7,7 @@
 	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
 
 	import { SWRDataLabLight } from '../MapStyle';
-	import HillshadeSource from '../HillshadeSource/HillshadeSource.svelte';
+	import RasterDEMSource from '../RasterDEMSource/RasterDEMSource.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Maplibre/Layer/HillshadeLayer',
@@ -20,8 +20,8 @@
 	<DesignTokens theme="light">
 		<div class="container">
 			<Map showDebug={true} style={SWRDataLabLight()}>
-			  <HillshadeSource id='hillshade' url="https://tiles.datenhub.net/tiles/elevation/tiles.json">
-					<HillshadeLayer sourceId="hillshade" id="test"
+			  <RasterDEMSource id='dem' url="https://tiles.datenhub.net/tiles/elevation/tiles.json">
+					<HillshadeLayer sourceId="dem" id="test"
 					  paint={{
                     'hillshade-method': 'standard',
                     'hillshade-illumination-direction': 315,
@@ -31,7 +31,7 @@
                     'hillshade-exaggeration': 0.5
                 }}
             />
-					</HillshadeSource>
+					</RasterDEMSource>
 				<AttributionControl position="bottom-left" />
 			</Map>
 		</div>
diff --git a/components/src/maplibre/HillshadeSource/index.js b/components/src/maplibre/HillshadeSource/index.js
deleted file mode 100644
index d69c1f5a..00000000
--- a/components/src/maplibre/HillshadeSource/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import HillshadeLayer from './HillshadeLayer.svelte';
-export default HillshadeLayer;
diff --git a/components/src/maplibre/HillshadeSource/HillshadeSource.svelte b/components/src/maplibre/RasterDEMSource/RasterDEMSource.svelte
similarity index 84%
rename from components/src/maplibre/HillshadeSource/HillshadeSource.svelte
rename to components/src/maplibre/RasterDEMSource/RasterDEMSource.svelte
index 4578ba87..95b607dd 100644
--- a/components/src/maplibre/HillshadeSource/HillshadeSource.svelte
+++ b/components/src/maplibre/RasterDEMSource/RasterDEMSource.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { type PromoteIdSpecification, type RasterDEMSourceSpecification, type VectorSourceSpecification,  } from 'maplibre-gl';
+	import { type PromoteIdSpecification, type RasterDEMSourceSpecification,  } from 'maplibre-gl';
 
 	import MapSource from '../Source/MapSource.svelte';
 	import type { SourceProps } from '../types';
 	import fetchTileJSON from '../fetchTileJson';
 
-	interface HillshadeSourceProps extends SourceProps {
+	interface RasterDEMSourceProps extends SourceProps {
 		url?: string;
 		tiles?: string[];
 		promoteId?: PromoteIdSpecification;
@@ -20,7 +20,7 @@
 		attribution,
 		promoteId,
 		children
-	}: HillshadeSourceProps = $props();
+	}: RasterDEMSourceProps = $props();
 
 	let tileJsonData = $derived(url ? await fetchTileJSON(url) : {});
 
diff --git a/components/src/maplibre/RasterDEMSource/index.js b/components/src/maplibre/RasterDEMSource/index.js
new file mode 100644
index 00000000..4c6895d6
--- /dev/null
+++ b/components/src/maplibre/RasterDEMSource/index.js
@@ -0,0 +1,2 @@
+import RasterDEMSource from './RasterDEMSource.svelte';
+export default RasterDEMSource;

From 4235855bfc0bf036333a7b4c00eb64d114b8373c Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 17 Jun 2026 12:06:24 +0200
Subject: [PATCH 6/6] Fix unrelated compiler warning

---
 components/src/maplibre/ArrowSource/ArrowSource.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/ArrowSource/ArrowSource.svelte b/components/src/maplibre/ArrowSource/ArrowSource.svelte
index dd8139ad..14faaf81 100644
--- a/components/src/maplibre/ArrowSource/ArrowSource.svelte
+++ b/components/src/maplibre/ArrowSource/ArrowSource.svelte
@@ -32,13 +32,13 @@
 
 	const { id, arrows = [], attribution = '' }: ArrowSourceProps = $props();
 
-	const ars: JsonArrow[] = arrows.map((a) => {
+	const ars: JsonArrow[] = $derived(arrows.map((a) => {
 		return {
 			width: a.width || 10,
 			points: quadraticToPoints(a.a, a.b, a.c),
 			headScale: a.headScale
 		};
-	});
+	}));
 
 	const arrowsToJson = (arrows: JsonArrow[] = []) => {
 		if (!map) return { type: 'FeatureCollection', features: [] } as GeoJSON.GeoJSON;
@@ -83,6 +83,7 @@
 	};
 
 	let sourceSpec: GeoJSONSourceSpecification = $state({
+	  // svelte-ignore state_referenced_locally
 		attribution,
 		type: 'geojson',
 		promoteId: 'id',