Make it possible to click on either map to choose a pool

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);
 	});
 

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,

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"

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>

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,

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