From 9ea99c92f9e16e2fe2d0ba1cab098367c802bd35 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 15 Apr 2026 00:12:19 +0000
Subject: [PATCH] Get overview map working on review details page

---
 ts/components/ReviewPoolColumnDetail.vue | 50 +++++++++++++++++++-----
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/ts/components/ReviewPoolColumnDetail.vue b/ts/components/ReviewPoolColumnDetail.vue
index f97efc95..d69a1040 100644
--- a/ts/components/ReviewPoolColumnDetail.vue
+++ b/ts/components/ReviewPoolColumnDetail.vue
@@ -1,3 +1,20 @@
+<style scoped>
+.map-container {
+	border-radius: 10px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+	height: 500px;
+	margin-bottom: 20px;
+	margin-top: 20px;
+	align-items: center;
+	justify-content: center;
+	/* Prevent touch scrolling issues */
+	touch-action: pan-y pinch-zoom;
+}
+#map {
+	width: 100%;
+	height: 100%;
+}
+</style>
 <template>
 	<!-- No Selection State -->
 	<div
@@ -118,14 +135,7 @@
 
 		<!-- Map Components -->
 		<div class="map-container" v-if="session.organization">
-			<MapMultipoint
-				ref="mapMultipoint"
-				id="map"
-				:bounds="mapBounds"
-				:markers="mapMarkers"
-				:organizationId="session.organization.id"
-				:tegola="session.urls?.tegola ?? ''"
-			></MapMultipoint>
+			<MapLocator :markers="markers" v-model="mapCamera"></MapLocator>
 		</div>
 		<div v-else>
 			<p>loading...</p>
@@ -144,14 +154,15 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import MapMultipoint from "@/components/MapMultipoint.vue";
+import { computed, ref } from "vue";
+import MapLocator from "@/components/MapLocator.vue";
 import MapProxiedArcgisTile from "@/components/MapProxiedArcgisTile.vue";
 import { formatAddress } from "@/format";
 import { useSessionStore } from "@/store/session";
 import type { MapClickEvent, Marker } from "@/types";
 import { Bounds, Contact, Pool, ReviewTask, User } from "@/type/api";
 import type { Location } from "@/type/api";
+import { Camera } from "@/type/map";
 
 interface Props {
 	loading: boolean;
@@ -161,6 +172,7 @@ interface Props {
 	newPoolLocation: Location;
 	selectedTask?: ReviewTask;
 }
+const mapCamera = ref<Camera>(new Camera());
 const props = defineProps<Props>();
 const poolCondition = ref<string>("unknown");
 const poolLocation = ref<Location>({
@@ -170,6 +182,24 @@ const poolLocation = ref<Location>({
 const siteOwner = ref<Contact>(new Contact());
 const siteResident = ref<Contact>(new Contact());
 const session = useSessionStore();
+const markers = computed((): Marker[] => {
+	if (!poolLocation.value) {
+		return [];
+	}
+	if (
+		poolLocation.value.latitude == 0.0 &&
+		poolLocation.value.longitude == 0.0
+	) {
+		return [];
+	}
+	const marker = {
+		color: "#FF0000",
+		draggable: false,
+		id: "x",
+		location: poolLocation.value,
+	};
+	return [marker];
+});
 function doPoolLocation(event: MapClickEvent) {
 	console.log("pool location", event);
 }