feat(maplibre): HillshadeLayer

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>

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>

components/src/maplibre/HillshadeLayer/index.js

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