Add maps for site review

ts/components/ReviewSiteColumnDetail.vue

@@ -1,8 +1,61 @@
-<style scoped></style>
-<template></template>
+<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;
+}
+</style>
+<template>
+	<div class="map-container" v-if="session.organization">
+		<MapLocator
+			:markers="mapMarkers"
+			:useSatellite="true"
+			v-model="mapCamera"
+		></MapLocator>
+	</div>
+	<div class="map-container" v-if="session.organization && session.urls">
+		<MapProxiedArcgisTile
+			:markers="mapMarkers"
+			:organizationId="session.organization.id"
+			:tegola="session.urls!.tegola"
+			:urlTiles="session.urls!.tile"
+			v-model="_mapFlyoverCamera"
+		></MapProxiedArcgisTile>
+	</div>
+</template>
 <script setup lang="ts">
+import { ref, watch } from "vue";
+import MapLocator from "@/components/MapLocator.vue";
+import MapProxiedArcgisTile from "@/components/MapProxiedArcgisTile.vue";
+import { useSessionStore } from "@/store/session";
+import { Site } from "@/type/api";
+import { Camera } from "@/type/map";
+import type { Marker } from "@/types";
+
 interface Emits {
 	(e: "update:modelValue", value: any): void;
 }
-interface Props {}
+interface Props {
+	mapFlyoverCamera: Camera;
+	mapMarkers: Marker[];
+	selectedSite: Site | undefined;
+}
+const _mapFlyoverCamera = ref<Camera>(new Camera());
+const mapCamera = ref<Camera>(new Camera());
+const props = defineProps<Props>();
+const session = useSessionStore();
+
+watch(
+	() => props.mapFlyoverCamera,
+	(newMapFlyoverCamera: Camera) => {
+		console.log("map flyover camera update", newMapFlyoverCamera);
+		_mapFlyoverCamera.value = newMapFlyoverCamera;
+	},
+);
 </script>

ts/view/review/Site.vue

@@ -36,7 +36,11 @@ body {
 			/>
 		</template>
 		<template #center>
-			<ReviewSiteColumnDetail />
+			<ReviewSiteColumnDetail
+				:mapFlyoverCamera="mapFlyoverCamera"
+				:mapMarkers="mapMarkers"
+				:selectedSite="selectedSite"
+			/>
 		</template>
 		<template #right>
 			<ReviewSiteColumnAction />
@@ -64,6 +68,7 @@ interface Props {}
 
 const props = withDefaults(defineProps<Props>(), {});
 
+const mapFlyoverCamera = ref<Camera>(new Camera());
 const storeSite = useStoreSite();
 const selectedSiteID = ref<number>(0);
 const selectedSite = computed((): Site | undefined => {
@@ -72,6 +77,19 @@ const selectedSite = computed((): Site | undefined => {
 	}
 	return storeSite.byID(selectedSiteID.value);
 });
+const mapMarkers = computed<Marker[]>(() => {
+	const site = selectedSite.value;
+	if (!(site && site.address.location)) {
+		return [];
+	}
+	const markers = {
+		color: "#FF0000",
+		draggable: false,
+		id: "address",
+		location: site.address.location,
+	};
+	return [markers];
+});
 function siteDeselect(id: number): void {
 	if (selectedSiteID.value == id) {
 		selectedSiteID.value = 0;
@@ -85,6 +103,7 @@ function siteSelect(id: number): void {
 		console.log("no site", id);
 		return;
 	}
+	mapFlyoverCamera.value = new Camera(site.address.location, 20);
 	console.log("selecting site", id, site);
 }