Add AR Overlay to minimap

package.json

@@ -31,6 +31,7 @@
 		"leaflet": "^1.9.4",
 		"luxon": "^3.7.2",
 		"mapbox-gl": "^3.12.0",
+		"milsymbol": "^3.0.4",
 		"ol": "^6.2.1",
 		"ol-layerswitcher": "^3.8.1",
 		"osh-js": "git+ssh://git@github.com/Botts-Innovative-Research/osh-js.git",

src/lib/icons.ts

@@ -40,7 +40,7 @@ export const ICON_OPTIONS: IconItem[] = [
 	// Waypoint
 	{ id: 14, label: 'Round Pin', icon: 'round-pin', category: 'waypoint' }, // Not an mdi icon
 	// FOI
-	// { id: 15, label: 'Building', icon: 'domain', category: ['foi'] },
+	{ id: 15, label: 'Building', icon: 'domain', category: 'foi' },
 ];
 
 /**

src/modules/map/components/MapToolStatus.vue

@@ -1,74 +1,79 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { useMapStore } from '@/stores/mapstore';
+import { useSettingsStore } from '@/stores/settingsstore';
+import { ICON_BASE, ICON_OPTIONS, iconPathBuilder } from '@/lib/icons';
+import { getColoredIconUrl } from '../services/colorId.service';
 
 const mapStore = useMapStore();
+const settingsStore = useSettingsStore();
+
+const isActive = computed(() => {
+	return !!mapStore.isGeoPTZSelected || !!mapStore.selectedWaypoints;
+});
 
 const isHovered = ref(false);
 </script>
 
 <template>
-	<v-card
-		class="pa-2 elevation-10"
-		:style="{
-			position: 'absolute',
-			zIndex: 2000,
-			marginTop: '1%',
-			marginLeft: '1%',
-		}"
-		@mouseenter="isHovered = true"
-		@mouseleave="isHovered = false"
-	>
-		<v-card-text class="d-flex flex-column ga-2">
-			<!-- GeoPTZ -->
-			<div class="d-flex align-center ga-2">
+	<v-fade-transition>
+		<v-card
+			class="ma-0 elevation-10"
+			:style="{
+				position: 'absolute',
+				zIndex: 2000,
+				marginTop: '1%',
+				marginLeft: '1%',
+			}"
+			@mouseenter="isHovered = true"
+			@mouseleave="isHovered = false"
+			v-show="isActive"
+		>
+			<v-card-text class="d-flex flex-column ga-2 pa-2">
+				<!-- GeoPTZ -->
 				<div
-					class="status-dot"
-					:class="mapStore.isGeoPTZSelected ? 'bg-green' : 'bg-grey'"
-				/>
-
-				<span>GeoPTZ</span>
-
-				<transition name="fade-slide-x">
-					<span
-						v-if="isHovered"
-						class="ml-1 text-grey"
-					>
-						{{ mapStore.isGeoPTZSelected ? 'selected' : 'not selected' }}
-					</span>
-				</transition>
-			</div>
-
-			<!-- Mission Builder -->
-			<div class="d-flex align-center ga-2">
+					class="d-flex align-center ga-2"
+					v-show="mapStore.isGeoPTZSelected"
+				>
+					<v-icon
+						icon="mdi-crosshairs-gps"
+						color="green"
+					/>
+					<span>GeoPTZ</span>
+					<transition name="fade-slide-x">
+						<span
+							v-if="isHovered"
+							class="ml-1 text-grey"
+						>
+							cursor active
+						</span>
+					</transition>
+				</div>
+				<!-- Mission Builder -->
 				<div
-					class="status-dot"
-					:class="mapStore.selectedWaypoints ? 'bg-green' : 'bg-grey'"
-				/>
-
-				<span>Mission Builder</span>
-
-				<transition name="fade-slide-x">
-					<span
-						v-if="isHovered"
-						class="ml-1 text-grey"
-					>
-						{{ mapStore.selectedWaypoints ? 'selected' : 'not selected' }}
-					</span>
-				</transition>
-			</div>
-		</v-card-text>
-	</v-card>
+					class="d-flex align-center ga-2"
+					v-show="!!mapStore.selectedWaypoints"
+				>
+					<v-icon
+						icon="mdi-crosshairs-gps"
+						color="green"
+					/>
+					<span>Mission Builder</span>
+					<transition name="fade-slide-x">
+						<span
+							v-if="isHovered"
+							class="ml-1 text-grey"
+						>
+							cursor active
+						</span>
+					</transition>
+				</div>
+			</v-card-text>
+		</v-card>
+	</v-fade-transition>
 </template>
 
 <style scoped>
-.status-dot {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	flex-shrink: 0;
-}
-
 .fade-slide-x-enter-active,
 .fade-slide-x-leave-active {
 	transition: all 0.2s ease;

src/modules/map/composables/useMap.ts

@@ -13,7 +13,7 @@ import { Geometry, OSHVisualization } from '@/lib/OSHConnectDataStructs';
 import ConSysApi from 'osh-js/source/core/datasource/consysapi/ConSysApi.datasource.js';
 import { createCesiumAdapter } from '../adapters/cesium.adapter';
 import { taskGeoPTZ } from '../services/geoPTZ.service';
-import { MapAdapter } from '../adapters/types';
+import { MapAdapter, MapPoint } from '../adapters/types';
 import { createLeafletAdapter } from '../adapters/leaflet.adapter';
 import { useSettingsStore } from '@/stores/settingsstore';
 import { isMapLayerCompatible, SupportedMapLayer } from '../supportedMapLayers';
@@ -108,6 +108,15 @@ export function useMap() {
 			mapAdapter.value?.addLayer(foi.layer);
 			mapAdapter.value?.updateMarker(foi.props);
 		});
+
+		// Rebuild all waypoints
+		waypointLayers.value = [];
+		await Promise.all(
+			mapStore.missionWaypoints.map(async (waypoint: MapPoint, index: number) => {
+				await addWaypointLayer(waypoint, index);
+			})
+		);
+		drawMissionPath(mapStore.missionWaypoints);
 	}
 	watch(mapType, async () => {
 		await switchMap();
@@ -359,20 +368,30 @@ export function useMap() {
 
 			// Add waypoints
 			for (const [index, waypoint] of waypoints.entries()) {
-				const result = await createWaypointLayer(waypoint, index.toString());
-				if (result) {
-					mapAdapter.value?.addLayer(result.layer);
-					waypointLayers.value.push(result.layer);
-					if (result.props) mapAdapter.value?.updateMarker(result.props);
-				}
-			}
-
-			// Handle polyline if waypoints >= 2
-			if (waypoints.length >= 2) {
-				mapAdapter.value.drawMissionPath(waypoints);
+				await addWaypointLayer(waypoint, index);
 			}
+			// Draw mission path
+			drawMissionPath(waypoints);
 		}
 	);
+	async function addWaypointLayer(waypoint: MapPoint, index: number) {
+		if (!mapAdapter.value) return;
+
+		const result = await createWaypointLayer(waypoint, index.toString());
+		if (result) {
+			mapAdapter.value?.addLayer(result.layer);
+			waypointLayers.value.push(result.layer);
+			if (result.props) mapAdapter.value?.updateMarker(result.props);
+		}
+	}
+	function drawMissionPath(waypoints: MapPoint[]) {
+		if (!mapAdapter.value) return;
+
+		// Handle polyline if waypoints >= 2
+		if (waypoints.length >= 2) {
+			mapAdapter.value.drawMissionPath(waypoints);
+		}
+	}
 	function clearMission() {
 		for (const layer of waypointLayers.value) {
 			mapAdapter.value?.removeLayer(layer);