Get overview map working on review details page

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