Change cursor when the user hovers over a layer

ts/map/Map.vue

@@ -25,15 +25,19 @@ import {
 	ref,
 	type Ref,
 	shallowRef,
+	watch,
 } from "vue";
 
 interface Props {
 	bounds?: maplibregl.LngLatBounds;
 	center?: maplibregl.LngLatLike;
+	cursor?: string;
 	zoom?: number;
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+	cursor: "",
+});
 
 const mapDiv = ref<HTMLElement | null>(null);
 const map: Ref<maplibregl.Map | null> = shallowRef(null);
@@ -150,4 +154,12 @@ onBeforeUnmount(() => {
 		map.value.remove();
 	}
 });
+watch(
+	() => props.cursor,
+	(newCursor) => {
+		if (map.value && map.value.loaded()) {
+			map.value.getCanvas().style.cursor = newCursor;
+		}
+	},
+);
 </script>

ts/view/Dash.vue

@@ -135,6 +135,7 @@
 				<Map
 					:bounds="mapBounds()"
 					@cell-click="doClickMap"
+					:cursor="mapCursor"
 					class="map"
 					:markers="[]"
 					:organizationId="session.organization?.id ?? 1"
@@ -234,7 +235,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import Map from "@/map/Map.vue";
 import Layer from "@/map/Layer.vue";
 import Source from "@/map/Source.vue";
@@ -265,6 +266,7 @@ const dashboard = reactive({
 	},
 	recentRequests: [],
 });
+const mapCursor = ref<string>("");
 const storeServiceRequest = useStoreServiceRequest();
 const storeSync = useStoreSync();
 const session = useSessionStore();
@@ -277,10 +279,10 @@ function doClickMap(cell: string) {
 	router.push("/_/cell/" + cell);
 }
 function doLayerMouseEnter() {
-	console.log("enter");
+	mapCursor.value = "pointer";
 }
 function doLayerMouseLeave() {
-	console.log("leave");
+	mapCursor.value = "";
 }
 function mapBounds(): maplibregl.LngLatBounds {
 	if (session.organization?.service_area) {