feat(Map): Add cursor prop (#158)

Author: awesomephant

components/src/maplibre/Map/Map.svelte

@@ -25,9 +25,13 @@
 		projection?: ProjectionSpecification;
 		showDebug?: boolean;
 		options?: any;
+		/**
+		 * Set the mouse cursor. `""` (empty string) restores Maplibre's default behaviour. See VectorLayer/Default for a common usage example
+		 */
+		cursor?: string;
 		mapContext?: MapContext;
 		/**
-		 * "Use Ctrl + scroll to zoom"
+		 * Show "Use Ctrl + scroll to zoom" overlay
 		 */
 		cooperativeGestures?: boolean;
 		onmovestart?: (e: MapLibreEvent) => null;
@@ -50,6 +54,7 @@
 		allowRotation = false,
 		allowZoom = true,
 		showDebug = false,
+		cursor,
 		initialLocation: receivedInitialLocation,
 		// Future: This should become bindable.readonly when that becomes
 		// available, see: https://github.com/sveltejs/svelte/issues/7712
@@ -122,6 +127,12 @@
 		if (mapContext.map) mapContext.map.setStyle(style);
 	});
 
+	$effect(() => {
+		if (mapContext.map) {
+			mapContext.map.getCanvas().style.cursor = cursor ?? '';
+		}
+	});
+
 	$effect(() => {
 		if (mapContext.styleLoaded) {
 			mapContext.map?.setProjection(projection);

components/src/maplibre/VectorLayer/VectorLayer.stories.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Map from '../Map/Map.svelte';
 	import VectorLayer from './VectorLayer.svelte';
@@ -15,17 +15,27 @@
 		title: 'Maplibre/Layer/VectorLayer',
 		component: VectorLayer
 	});
+
+	let hovered: any = $state();
+	const handleMouseMove = (e) => {
+		hovered = e.features?.[0];
+	};
+	const handleMouseLeave = () => {
+		hovered = null;
+	};
 </script>
 
 <Story asChild name="Default">
 	<DesignTokens>
 		<div class="container">
-			<Map showDebug={true} style={SWRDataLabLight()}>
+			<Map showDebug={true} style={SWRDataLabLight()} cursor={hovered ? 'pointer' : ''}>
 				<VectorTileSource
 					id="ev-infra-source"
 					url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
 				/>
 				<VectorLayer
+					onmousemove={handleMouseMove}
+					onmouseleave={handleMouseLeave}
 					sourceId="ev-infra-source"
 					sourceLayer="coverage"
 					type="fill"
@@ -44,12 +54,22 @@
 					}}
 				/>
 				<VectorLayer
+					bind:hovered
 					sourceId="ev-infra-source"
 					sourceLayer="coverage"
 					id="ev-infra-outline"
 					type="line"
 					paint={{
-						'line-width': 0.5,
+						'line-width': [
+							'case',
+							[
+								'any',
+								['boolean', ['feature-state', 'hovered'], false],
+								['boolean', ['feature-state', 'selected'], false]
+							],
+							2,
+							0.5
+						],
 						'line-color': 'purple',
 						'line-opacity': 1
 					}}