From e1f3c93a1d1442665ba406ccae1f59a5a222f035 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 16 Apr 2026 04:47:41 +0000
Subject: [PATCH] Make it possible to click on either map to choose a pool

---
 ts/components/MapLocator.vue               | 17 ++++++++++-------
 ts/components/MapProxiedArcgisTile.vue     |  9 +++++----
 ts/components/ReviewPoolColumnDetail.vue   |  9 +++++++--
 ts/components/ReviewPoolColumnList.vue     |  8 +++++++-
 ts/rmo/components/AddressAndMapLocator.vue |  8 ++++----
 ts/view/review/Pool.vue                    |  5 +----
 6 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/ts/components/MapLocator.vue b/ts/components/MapLocator.vue
index 718f4247..fb7c679d 100644
--- a/ts/components/MapLocator.vue
+++ b/ts/components/MapLocator.vue
@@ -164,14 +164,14 @@ import {
 	watch,
 } from "vue";
 import { boundsMarkers, boundsDefault } from "@/map-utils";
-import type { Marker } from "@/types";
+import type { MapClickEvent, Marker } from "@/types";
 import type { Location } from "@/type/api";
 import type { Camera, MoveEndEventInternal } from "@/type/map";
 
 // Emits interface
 interface Emits {
 	(e: "update:modelValue", value: Camera): void;
-	(e: "click", location: Location): void;
+	(e: "click", event: MapClickEvent): void;
 	(e: "marker-drag-end", location: Location): void;
 }
 
@@ -290,11 +290,14 @@ function initializeMap() {
 		}
 
 		clickTimeout.value = window.setTimeout(() => {
-			const location: Location = {
-				latitude: e.lngLat.lat,
-				longitude: e.lngLat.lng,
-			};
-			emit("click", location);
+			emit("click", {
+				location: {
+					latitude: e.lngLat.lat,
+					longitude: e.lngLat.lng,
+				},
+				map: _map,
+				point: e.point,
+			});
 		}, 100);
 	});
 
diff --git a/ts/components/MapProxiedArcgisTile.vue b/ts/components/MapProxiedArcgisTile.vue
index 954c2ef3..002721a7 100644
--- a/ts/components/MapProxiedArcgisTile.vue
+++ b/ts/components/MapProxiedArcgisTile.vue
@@ -140,12 +140,12 @@ import {
 
 import LayersControl from "@/components/LayersControl";
 import { boundsMarkers, boundsDefault } from "@/map-utils";
-import { MapClickEvent, Marker, Point } from "@/types";
+import { type MapClickEvent, type Marker, Point } from "@/types";
 import type { Location } from "@/type/api";
 import type { Camera, MoveEndEventInternal } from "@/type/map";
 
 interface Emits {
-	(e: "map-click", event: MapClickEvent): void;
+	(e: "click", event: MapClickEvent): void;
 	(e: "update:modelValue", value: Camera): void;
 }
 interface Props {
@@ -288,8 +288,9 @@ const initializeMap = () => {
 				type: "raster",
 			});
 
-			_map.on("click", (e) => {
-				emit("map-click", {
+			_map.on("click", (e: maplibregl.MapLayerMouseEvent) => {
+				e.preventDefault();
+				emit("click", {
 					location: {
 						latitude: e.lngLat.lat,
 						longitude: e.lngLat.lng,
diff --git a/ts/components/ReviewPoolColumnDetail.vue b/ts/components/ReviewPoolColumnDetail.vue
index 4d4a76a5..a25d7099 100644
--- a/ts/components/ReviewPoolColumnDetail.vue
+++ b/ts/components/ReviewPoolColumnDetail.vue
@@ -133,7 +133,12 @@
 
 		<!-- Map Components -->
 		<div class="map-container" v-if="session.organization">
-			<MapLocator :markers="mapMarkers" v-model="mapCamera"></MapLocator>
+			<MapLocator
+				@click="doPoolLocation"
+				:markers="mapMarkers"
+				:useSatellite="true"
+				v-model="mapCamera"
+			></MapLocator>
 		</div>
 		<div v-else>
 			<p>loading...</p>
@@ -145,7 +150,7 @@
 			v-show="selectedTask?.pool"
 		>
 			<MapProxiedArcgisTile
-				@map-click="doPoolLocation"
+				@click="doPoolLocation"
 				:markers="mapMarkers"
 				:organizationId="session.organization.id"
 				:tegola="session.urls!.tegola"
diff --git a/ts/components/ReviewPoolColumnList.vue b/ts/components/ReviewPoolColumnList.vue
index 3188416c..3e8e0e3d 100644
--- a/ts/components/ReviewPoolColumnList.vue
+++ b/ts/components/ReviewPoolColumnList.vue
@@ -16,6 +16,9 @@
 }
 </style>
 <template>
+	<div v-show="loading">
+		<p>Loading</p>
+	</div>
 	<!-- Error Alert -->
 	<div v-if="error" class="mt-3 alert alert-danger alert-dismissible">
 		{{ error }}
@@ -68,10 +71,13 @@ interface Emits {
 }
 interface Props {
 	error: string | null;
+	loading?: boolean;
 	selectedTaskID: number | null;
 	tasks: ReviewTask[];
 	total: number;
 }
 const emit = defineEmits<Emits>();
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+	loading: false,
+});
 </script>
diff --git a/ts/rmo/components/AddressAndMapLocator.vue b/ts/rmo/components/AddressAndMapLocator.vue
index 0bb270aa..8f8a91f2 100644
--- a/ts/rmo/components/AddressAndMapLocator.vue
+++ b/ts/rmo/components/AddressAndMapLocator.vue
@@ -67,7 +67,7 @@ import { Address } from "@/type/api";
 import type { Geocode, GeocodeSuggestion, Location } from "@/type/api";
 import { useStoreGeocode } from "@/store/geocode";
 import { Camera } from "@/type/map";
-import type { Marker } from "@/types";
+import type { MapClickEvent, Marker } from "@/types";
 
 interface Emits {
 	(e: "update:modelValue", value: Address): void;
@@ -125,10 +125,10 @@ async function doAddressSuggestionDetails(suggestion: GeocodeSuggestion) {
 	}
 	updateModel(data.address.gid, data.address.raw, data.address.location);
 }
-function doMapClick(location: Location) {
-	updateModel(props.modelValue.gid, props.modelValue.raw, location);
+function doMapClick(event: MapClickEvent) {
+	updateModel(props.modelValue.gid, props.modelValue.raw, event.location);
 	geocode
-		.reverse(location)
+		.reverse(event.location)
 		.then((code: Geocode) => {
 			updateModel(
 				code.address.gid,
diff --git a/ts/view/review/Pool.vue b/ts/view/review/Pool.vue
index d6bcf1f1..fd279895 100644
--- a/ts/view/review/Pool.vue
+++ b/ts/view/review/Pool.vue
@@ -62,16 +62,13 @@ body {
 	<ThreeColumn>
 		<template #left>
 			<ReviewPoolColumnList
-				v-show="storeReviewTask.all"
 				@doSelectTask="selectTask"
 				:error="error"
+				:loading="!!storeReviewTask.all()"
 				:selectedTaskID="selectedTaskID"
 				:tasks="storeReviewTask.all()"
 				:total="totalPending"
 			/>
-			<div v-show="!storeReviewTask.all">
-				<p>Loading</p>
-			</div>
 		</template>
 		<template #center>
 			<ReviewPoolColumnDetail