From a88aa4c8a057b600faa4538a7b7ca63545af2f6f Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Fri, 24 Apr 2026 00:36:18 +0000
Subject: [PATCH] Change cursor when the user hovers over a layer

---
 ts/map/Map.vue   | 14 +++++++++++++-
 ts/view/Dash.vue |  8 +++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ts/map/Map.vue b/ts/map/Map.vue
index 30657708..6d60b5eb 100644
--- a/ts/map/Map.vue
+++ b/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>
diff --git a/ts/view/Dash.vue b/ts/view/Dash.vue
index 854bd43d..0deca7b2 100644
--- a/ts/view/Dash.vue
+++ b/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) {