@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Map.vue

@@ -0,0 +1,972 @@
+<template>
+    <div
+        class='d-flex position-relative'
+        style='height: calc(100vh) !important;'
+        data-bs-theme='dark'
+        data-bs-theme-base='neutral'
+        data-bs-theme-primary='blue'
+    >
+        <div
+            ref='map'
+            style='width: 100%;'
+        />
+
+        <MapLoading v-if='loading || !mapStore.isLoaded' />
+
+        <template v-if='mapStore.isLoaded && !loading'>
+            <WarnConfiguration
+                v-if='warnConfiguration'
+                @close='warnConfiguration = false'
+            />
+            <WarnChannels
+                v-else-if='warnChannels'
+                @close='warnChannels = false'
+            />
+
+            <DrawOverlay
+                v-if='mapStore.draw.mode !== DrawToolMode.STATIC'
+            />
+
+            <GeoJSONInput
+                v-if='mapStore.toImport.length'
+                :features='mapStore.toImport'
+                @close='mapStore.toImport = []'
+                @done='mapStore.toImport = []'
+            />
+
+            <div
+                v-if='mode === "SetLocation"'
+                class='position-absolute bottom-0 text-white bg-dark rounded-top'
+                style='
+                    z-index: 1;
+                    left: calc(50% - 250px);
+                    width: 500px;
+                '
+            >
+                <div
+                    class='card user-select-none'
+                >
+                    <div class='card-header'>
+                        <div class='col-8'>
+                            <IconLocationPin
+                                class='me-2'
+                                :size='20'
+                            />
+                            <span>Click on the map to {{ mapStore.location === LocationState.Preset ? 'update' : 'set' }} your location</span>
+                        </div>
+                        <div class='col-4 d-flex align-items-center'>
+                            <div class='ms-auto btn-list'>
+                                <button
+                                    class='btn btn-sm btn-outline-light'
+                                    @click='exitManualMode'
+                                >
+                                    <IconLocation
+                                        :size='16'
+                                        class='me-1'
+                                    />
+                                    Use GPS
+                                </button>
+                                <TablerIconButton
+                                    title='Cancel Manual Location'
+                                    @click='cancelLocationSetting'
+                                >
+                                    <IconX
+                                        :size='24'
+                                        stroke='1'
+                                    />
+                                </TablerIconButton>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div
+                class='position-absolute bottom-0 begin-0 text-white'
+                style='
+                    z-index: 1;
+                    width: 250px;
+                    height: 40px;
+                    background-color: rgba(0, 0, 0, 0.5);
+                '
+                :style='{
+                    "border-radius": mapStore.selected.size ? "0px" : "0px 6px 0px 0px"
+                }'
+            >
+                <div
+                    class='d-flex align-items-center'
+                    style='height: 40px'
+                >
+                    <div
+                        class='hover-button h-100 d-flex align-items-center'
+                        style='width: 40px;'
+                    >
+                        <TablerIconButton
+                            v-if='mapStore.location === LocationState.Live'
+                            :title='locationTooltip'
+                            :hover='false'
+                            @click='setLocation'
+                        >
+                            <IconLocation
+                                style='margin: 5px 8px'
+                                :size='20'
+                                stroke='1'
+                                :color='locationColor'
+                            />
+                        </TablerIconButton>
+                        <TablerIconButton
+                            v-else-if='mapStore.location === LocationState.Preset'
+                            :title='locationTooltip'
+                            :hover='false'
+                            @click='setLocation'
+                        >
+                            <IconLocationPin
+                                title='Manual Location - Click to enable GPS'
+                                style='margin: 5px 8px'
+                                :size='20'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                        <TablerIconButton
+                            v-else
+                            title='Set Your Location Button'
+                            :hover='false'
+                            @click='setLocation'
+                        >
+                            <IconLocationOff
+                                title='Set Your Location Button (No Location currently set)'
+                                style='margin: 5px 8px'
+                                :size='20'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                    <div
+                        v-tooltip='"Zoom To Location"'
+                        style='line-height: 40px; width: calc(100% - 40px);'
+                        class='h-100 cursor-pointer text-center px-2 text-truncate subheader text-white hover-button user-select-none'
+                        @click='toLocation'
+                        v-text='mapStore.callsign'
+                    />
+                </div>
+            </div>
+            <div
+                v-if='mapStore.selected.size'
+                class='position-absolute begin-0 text-white bg-dark'
+                style='
+                    bottom: 40px;
+                    width: 250px;
+                '
+            >
+                <SelectFeats :selected='mapStore.selected' />
+            </div>
+
+            <div
+                v-if='mode === "Default"'
+                class='position-absolute top-0 beginning-0 text-white'
+            >
+                <div
+                    style='
+                        z-index: 1;
+                        height: 40px;
+                        max-width: 400px;
+                        background-color: rgba(0, 0, 0, 0.5);
+                        border-radius: 0px 0px 6px 0px;
+                    '
+                >
+                    <template v-if='!mapStore.mission'>
+                        <div
+                            class='hover-button d-flex align-items-center user-select-none cursor-pointer'
+                            @click='router.push("/menu/missions")'
+                        >
+                            <IconMap
+                                :size='32'
+                                stroke='1'
+                                style='margin: 3px 3px'
+                            />
+                            <div class='me-3'>
+                                No Mission
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class='d-flex align-items-center user-select-none'>
+                            <IconAmbulance
+                                :size='32'
+                                stroke='1'
+                                style='margin: 3px 3px'
+                            />
+
+                            <a
+                                class='me-3 text-truncate cursor-pointer text-white'
+                                @click='router.push(`/menu/missions/${mapStore.mission.meta.guid}`)'
+                                v-text='mapStore.mission.meta.name'
+                            />
+                        </div>
+                    </template>
+                </div>
+                <div
+                    class='border'
+                    style='
+                        z-index: 1;
+                        width: 40px;
+                        background-color: rgba(0, 0, 0, 0.2);
+                        border-radius: 0px 0px 6px 0px;
+                    '
+                >
+                    <div>
+                        <IconSearch
+                            v-tooltip='"Search"'
+                            tabindex='0'
+                            title='Search Button'
+                            :size='32'
+                            stroke='2'
+                            :color='searchBoxShown ? "#1E90FF" : "#ffffff"'
+                            style='margin: 3px 2px'
+                            class='cursor-pointer hover-button'
+                            @click='searchBoxShown = !searchBoxShown'
+                        />
+                    </div>
+
+                    <div
+                        v-if='mapStore.bearing !== 0'
+                        style='margin: 3px 3px'
+                        class='cursor-pointer hover-button'
+                        @click='mapStore.map.setBearing(0)'
+                    >
+                        <IconCircleArrowUp
+                            v-tooltip='"Snap to North"'
+                            tabindex='0'
+                            :alt='`Map Rotated to ${humanBearing}`'
+                            :transform='`rotate(${360 - mapStore.bearing})`'
+                            :size='32'
+                            stroke='2'
+                        />
+                        <div
+                            v-if='mapStore.bearing !== 0'
+                            class='text-center'
+                            v-text='humanBearing'
+                        />
+                    </div>
+                    <div
+                        v-if='mapStore.pitch !== 0'
+                        style='margin: 3px 3px'
+                        class='cursor-pointer hover-button'
+                        @click='mapStore.map.setPitch(0)'
+                    >
+                        <IconAngle
+                            v-tooltip='"Snap Flat"'
+                            tabindex='0'
+                            :alt='`Map Pitch to ${humanPitch}`'
+                            :size='32'
+                            stroke='2'
+                        />
+                        <div
+                            v-if='mapStore.pitch !== 0'
+                            class='text-center'
+                            v-text='humanPitch'
+                        />
+                    </div>
+                    <div
+                        v-if='displayZoom'
+                    >
+                        <IconPlus
+                            v-tooltip='"Zoom In"'
+                            role='button'
+                            tabindex='0'
+                            title='Zoom In Button'
+                            :size='32'
+                            stroke='2'
+                            class='cursor-pointer hover-button'
+                            style='margin: 3px 3px'
+                            @click='mapStore.map.setZoom(mapStore.map.getZoom() + 1);'
+                        />
+                        <IconMinus
+                            v-tooltip='"Zoom Out"'
+                            role='button'
+                            tabindex='0'
+                            title='Zoom Out Button'
+                            :size='32'
+                            stroke='2'
+                            class='cursor-pointer hover-button'
+                            style='margin: 3px 3px'
+                            @click='mapStore.map.setZoom(mapStore.map.getZoom() - 1);'
+                        />
+                    </div>
+
+                    <IconMountain
+                        v-if='mapStore.hasTerrain'
+                        v-tooltip='mapStore.isTerrainEnabled ? "Disable 3D Terrain" : "Enable 3D Terrain"'
+                        role='button'
+                        tabindex='0'
+                        title='3D Terrain'
+                        :size='32'
+                        stroke='2'
+                        class='cursor-pointer hover-button'
+                        :color='mapStore.isTerrainEnabled ? "#1E90FF" : "#FFFFFF"'
+                        style='margin: 3px 3px'
+                        @click='mapStore.isTerrainEnabled ? mapStore.removeTerrain() : mapStore.addTerrain()'
+                    />
+
+                    <IconLockAccess
+                        v-if='
+                            (mapStore.radial.cot && mapStore.locked.length >= 2)
+                                || (!mapStore.radial.cot && mapStore.locked.length >= 1)
+                        '
+                        v-tooltip='"Map is locked to marker - Click to Unlock"'
+                        title='Map is locked to marker - Click to Unlock'
+                        class='cursor-pointer hover-button'
+                        role='button'
+                        tabindex='0'
+                        color='red'
+                        :size='32'
+                        stroke='2'
+                        style='margin: 3px 3px'
+                        @click='mapStore.locked.splice(0, mapStore.locked.length)'
+                    />
+                </div>
+            </div>
+
+            <TablerModal
+                v-if='searchBoxShown'
+                size='lg'
+            >
+                <div class='modal-header'>
+                    <div class='modal-title'>
+                        Search
+                    </div>
+                    <button
+                        type='button'
+                        class='btn-close'
+                        aria-label='Close'
+                        @click='searchBoxShown = false'
+                    />
+                </div>
+                <div class='modal-body'>
+                    <SearchBox
+                        :autofocus='true'
+                        @select='searchBoxShown = false'
+                    />
+                </div>
+            </TablerModal>
+
+            <div
+                v-if='mapStore.isLoaded && mode === "Default"'
+                class='d-flex position-absolute top-0 text-white py-2'
+                style='
+                    z-index: 2;
+                    width: 120px;
+                    right: 60px;
+                    padding-left: 10px;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    border-radius: 0px 0px 0px 6px;
+                '
+            >
+                <TablerDropdown>
+                    <TablerIconButton
+                        id='map-notifications'
+                        title='Notifications Icon'
+                        class='hover-button'
+                        :hover='false'
+                    >
+                        <IconBell
+                            :size='40'
+                            stroke='1'
+                        />
+                    </TablerIconButton>
+                    <template #dropdown>
+                        <Notifications />
+                    </template>
+                </TablerDropdown>
+
+                <span
+                    v-if='notifications'
+                    class='badge bg-red mb-2'
+                />
+                <span
+                    v-else
+                    style='width: 10px;'
+                />
+
+                <DrawTools />
+            </div>
+
+            <div
+                v-if='mode === "Default"'
+                class='position-absolute top-0 end-0 text-white py-2'
+                style='z-index: 1; width: 60px; background-color: rgba(0, 0, 0, 0.5);'
+            >
+                <TablerIconButton
+                    v-if='noMenuShown'
+                    title='Open Menu'
+                    class='mx-2 hover-button'
+                    :hover='false'
+                    @click='router.push("/menu")'
+                >
+                    <IconMenu2
+                        :size='40'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerIconButton
+                    v-else
+                    title='Close Menu'
+                    class='mx-2 cursor-pointer'
+                    @click='closeAllMenu'
+                >
+                    <IconX
+                        :size='40'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+
+
+            <MainMenu
+                v-if='
+                    mapStore.isLoaded
+                        && (
+                            (noMenuShown && !isMobileDetected)
+                            || (!noMenuShown)
+                        )
+                '
+                :compact='noMenuShown'
+            />
+
+            <MultipleSelect
+                v-if='mapStore.select.feats.length'
+                @selected='selectFeat($event)'
+            />
+
+            <RadialMenu
+                v-else-if='mapStore.radial.mode'
+                @close='closeRadial'
+                @click='handleRadial($event)'
+            />
+
+            <CloudTAKFeatView
+                v-if='feat && mode === "Default" && route.name === "home"'
+                :key='feat.id'
+                :feat='feat'
+            />
+
+            <template
+                v-for='float in floatStore.panes.values()'
+                :key='float.uid'
+            >
+                <FloatingVideo
+                    v-if='float.type === PaneType.VIDEO'
+                    :title='float.name || "Video Stream"'
+                    :uid='float.uid'
+                    @close='floatStore.panes.delete(float.uid)'
+                />
+                <FloatingAttachment
+                    v-if='float.type === PaneType.ATTACHMENT'
+                    :uid='float.uid'
+                    @close='floatStore.panes.delete(float.uid)'
+                />
+            </template>
+
+            <template v-if='upload.shown'>
+                <TablerModal>
+                    <div class='modal-status bg-red' />
+                    <button
+                        type='button'
+                        class='btn-close'
+                        aria-label='Close'
+                        @click='upload.shown = false'
+                    />
+                    <div class='modal-body text-white'>
+                        <UploadImport
+                            :dragging='upload.dragging'
+                            :cancel-button='false'
+                            @close='upload.shown = false'
+                            @done='fileUpload($event)'
+                        />
+                    </div>
+                </TablerModal>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import GeoJSONInput from './GeoJSONInput.vue';
+import { ref, watch, computed, toRaw, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
+import {useRoute, useRouter } from 'vue-router';
+import FloatingVideo from './util/FloatingVideo.vue';
+import FloatingAttachment from './util/FloatingAttachment.vue';
+import DrawOverlay from './util/DrawOverlay.vue';
+import WarnChannels from './util/WarnChannels.vue';
+import Notifications from './Notifications.vue';
+import SearchBox from './util/SearchBox.vue';
+import WarnConfiguration from './util/WarnConfiguration.vue';
+import DrawTools from './DrawTools.vue';
+import type { MapGeoJSONFeature, LngLatLike, MapMouseEvent } from 'maplibre-gl';
+import type { Feature } from '../../types.ts';
+import CloudTAKFeatView from './FeatView.vue';
+import {
+    IconSearch,
+    IconLocationOff,
+    IconLocationPin,
+    IconLocation,
+    IconMenu2,
+    IconPlus,
+    IconMinus,
+    IconLockAccess,
+    IconAmbulance,
+    IconMap,
+    IconX,
+    IconBell,
+    IconAngle,
+    IconCircleArrowUp,
+    IconMountain,
+} from '@tabler/icons-vue';
+import SelectFeats from './util/SelectFeats.vue';
+import MultipleSelect from './util/MultipleSelect.vue';
+import MainMenu from './MainMenu.vue';
+import { from } from 'rxjs';
+import { useObservable } from '@vueuse/rxjs';
+import {
+    TablerIconButton,
+    TablerDropdown,
+    TablerModal,
+} from '@tak-ps/vue-tabler';
+import { LocationState } from '../../base/events.ts';
+import TAKNotification from '../../base/notification.ts';
+import COT from '../../base/cot.ts';
+import MapLoading from './MapLoading.vue';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import RadialMenu from './RadialMenu/RadialMenu.vue';
+import { useMapStore } from '../../stores/map.ts';
+import { DrawToolMode } from '../../stores/modules/draw.ts';
+import { useFloatStore, PaneType } from '../../stores/float.ts';
+import { liveQuery } from 'dexie';
+import UploadImport from './util/UploadImport.vue'
+const mapStore = useMapStore();
+const floatStore = useFloatStore();
+const router = useRouter();
+const route = useRoute();
+
+const emit = defineEmits(['err']);
+
+const mode = ref<string>('Default');
+const locationClickHandler = ref<((e: MapMouseEvent) => void) | null>(null);
+const height = ref<number>(window.innerHeight);
+const width = ref<number>(window.innerWidth);
+
+mapStore.isMobileDetected = detectMobile();
+
+// Show a popup if no channels are selected on load
+const warnChannels = ref<boolean>(false)
+
+// Show a popup if role/groups hasn't been set
+const warnConfiguration = ref<boolean>(false);
+
+const searchBoxShown = ref(false);
+const feat = ref()        // Show the Feat Viewer sidebar
+
+const upload = ref({
+    shown: false,
+    dragging: false
+})
+
+// Interval for pushing GeoJSON Map Updates (CoT)
+const timer = ref<ReturnType<typeof setInterval> | undefined>()
+
+const loading = ref(true)
+
+const notifications = useObservable<number>(
+    from(liveQuery(async () => {
+        return await TAKNotification.count()
+    }))
+);
+
+function detectMobile() {
+  //TODO: This needs to follow something like:
+  // https://stackoverflow.com/questions/47219272/how-can-i-monitor-changing-window-sizes-in-vue
+    return (
+        ( width.value <= 576 )
+        || ( height.value <= 576 )
+    );
+}
+
+const isMobileDetected = computed(() => {
+    return detectMobile();
+});
+
+watch(isMobileDetected, () => {
+    mapStore.isMobileDetected = isMobileDetected.value;
+});
+
+const displayZoom = computed(() => {
+    if (mapStore.zoom === 'conditional') {
+        return isMobileDetected;
+    } else {
+        return mapStore.zoom === 'always' ? true : false;
+    }
+})
+
+
+const humanBearing = computed(() => {
+    if (mapStore.bearing < 0) {
+        return Math.round(mapStore.bearing * -1) + '°'
+    } else {
+        return Math.round(360 - mapStore.bearing) + '°';
+    }
+})
+
+const humanPitch = computed(() => {
+    return Math.round(mapStore.pitch) + '°'
+})
+
+// Reactive location accuracy
+const locationAccuracy = ref<number | undefined>(undefined);
+
+// Watch for location updates and get accuracy
+watch(() => mapStore.location, async () => {
+    if (mapStore.location === LocationState.Live && !mapStore.manualLocationMode) {
+        try {
+            const location = await mapStore.worker.profile.location;
+            locationAccuracy.value = location.accuracy;
+        } catch {
+            locationAccuracy.value = undefined;
+        }
+    } else {
+        locationAccuracy.value = undefined;
+    }
+}, { immediate: true });
+
+const locationColor = computed(() => {
+    if (mapStore.location !== LocationState.Live || !locationAccuracy.value) return '#ffffff';
+
+    const accuracy = locationAccuracy.value;
+    // Color-code based on accuracy ranges
+    if (accuracy <= 50) return '#22c55e';      // Green - high accuracy
+    if (accuracy <= 200) return '#eab308';     // Yellow - medium accuracy
+    return '#ef4444';                          // Red - low accuracy
+})
+
+const locationTooltip = computed(() => {
+    if (mode.value === 'SetLocation') {
+        return 'Click on map to set location';
+    }
+
+    if (mapStore.location === LocationState.Preset) {
+        return 'Manual Location - Click to adjust or switch to GPS';
+    }
+
+    if (mapStore.location === LocationState.Live && locationAccuracy.value) {
+        const accuracy = locationAccuracy.value;
+        // Convert to user's preferred distance unit
+        if (mapStore.distanceUnit === 'mile') {
+            const accuracyFt = Math.round(accuracy * 3.28084);
+            return `Live Location (±${accuracyFt}ft) - Click to set manually`;
+        } else {
+            return `Live Location (±${Math.round(accuracy)}m) - Click to set manually`;
+        }
+    }
+
+    return 'Set Your Location - Click to enable GPS or set manually';
+})
+
+const mapRef = useTemplateRef<HTMLElement>('map');
+
+const noMenuShown = computed<boolean>(() => {
+    return !feat.value
+        && (!route.name || !String(route.name).startsWith('home-menu'))
+});
+
+
+
+onMounted(async () => {
+    // ensure uncaught errors in the stack are captured into vue context
+    window.addEventListener('error', (evt) => {
+        console.error(evt);
+        evt.preventDefault();
+        emit('err', new Error(evt.message));
+    });
+
+    window.addEventListener('resize', () => {
+        height.value = window.innerHeight;
+        width.value = window.innerWidth;
+    });
+
+    await mountMap();
+
+    // TODO these are no longer reactive, does it matter?
+    warnChannels.value = await mapStore.worker.profile.hasNoChannels();
+    warnConfiguration.value = await mapStore.worker.profile.hasNoConfiguration();
+
+    loading.value = false;
+
+    window.addEventListener('dragover', (e) => {
+        e.preventDefault();
+
+        const dt = e.dataTransfer;
+        if (dt && dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.includes('Files'))) {
+            upload.value.shown = true;
+            upload.value.dragging = true;
+        }
+    });
+
+    window.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+            e.preventDefault();
+            searchBoxShown.value = true;
+        }
+    });
+
+    window.addEventListener('keyup', (e) => {
+        if (e.key == 'Escape') {
+            if (searchBoxShown.value) {
+                searchBoxShown.value = false;
+            } else if (mapStore.radial.mode) {
+                closeRadial()
+            } else if (mapStore.select.feats) {
+                mapStore.select.feats = [];
+            } else if (route.path.startsWith("/")) {
+                router.push("/");
+            }
+        }
+    });
+});
+
+onBeforeUnmount(() => {
+    if (timer.value) {
+        window.clearInterval(timer.value);
+    }
+
+    // Clean up GPS watch
+    if (mapStore.gpsWatchId !== null) {
+        navigator.geolocation.clearWatch(mapStore.gpsWatchId);
+    }
+
+    mapStore.destroy();
+});
+
+function selectFeat(selectedFeat: MapGeoJSONFeature | COT) {
+    mapStore.select.feats = [];
+
+    if (selectedFeat instanceof COT) {
+        router.push(`/cot/${selectedFeat.properties.id}`);
+    } else {
+        router.push(`/`);
+        feat.value = selectedFeat;
+    }
+}
+
+function closeAllMenu() {
+    feat.value = false;
+    router.push("/");
+}
+
+function closeRadial() {
+    mapStore.radial.mode = undefined;
+    mapStore.radial.cot = undefined;
+}
+
+async function toLocation() {
+    const location = await mapStore.worker.profile.location;
+
+    if ([LocationState.Preset, LocationState.Live].includes(location.source)) {
+        mapStore.map.flyTo({
+            center: location.coordinates as LngLatLike,
+            zoom: 14
+        });
+    } else {
+        throw new Error('No Location Set or Location could not be retrieved');
+    }
+}
+
+function setLocation() {
+    // Always enter manual location setting mode when button is clicked
+    mapStore.manualLocationMode = true;
+    mode.value = 'SetLocation';
+    mapStore.map.getCanvas().style.cursor = 'crosshair';
+
+    // Store the handler so we can remove it later if needed
+    locationClickHandler.value = async (e: MapMouseEvent) => {
+        mapStore.map.getCanvas().style.cursor = '';
+        mode.value = 'Default';
+        locationClickHandler.value = null;
+
+        await mapStore.worker.profile.update({
+            tak_loc: {
+                type: 'Point',
+                coordinates: [e.lngLat.lng, e.lngLat.lat]
+            }
+        });
+
+        await mapStore.refresh();
+    };
+
+    mapStore.map.once('click', locationClickHandler.value);
+}
+
+function cancelLocationSetting() {
+    mode.value = 'Default';
+    mapStore.map.getCanvas().style.cursor = '';
+
+    // Remove the specific location click handler if it exists
+    if (locationClickHandler.value) {
+        mapStore.map.off('click', locationClickHandler.value);
+        locationClickHandler.value = null;
+    }
+}
+
+async function exitManualMode() {
+    // Switch back to automatic GPS mode
+    mapStore.manualLocationMode = false;
+    mode.value = 'Default';
+    mapStore.map.getCanvas().style.cursor = '';
+
+    // Remove the specific location click handler if it exists
+    if (locationClickHandler.value) {
+        mapStore.map.off('click', locationClickHandler.value);
+        locationClickHandler.value = null;
+    }
+
+    // Immediately set location to loading state for UI feedback
+    mapStore.location = LocationState.Loading;
+
+    // Remove current location dot from map by removing user's CoT
+    const userUid = `ANDROID-CloudTAK-${(await mapStore.worker.profile.load()).username}`;
+    await mapStore.worker.db.remove(userUid);
+
+    // Clear manual location and wait for it to complete
+    await mapStore.worker.profile.update({ tak_loc: null });
+
+    // Restart GPS watch to ensure fresh GPS acquisition
+    mapStore.startGPSWatch();
+
+    await mapStore.refresh();
+}
+
+
+
+function fileUpload(event: string) {
+    upload.value.shown = false;
+    const imp = JSON.parse(event) as { id: string };
+    router.push(`/menu/imports/${imp.id}`)
+}
+
+async function handleRadial(event: string): Promise<void> {
+    if (!mapStore.radial.cot) return;
+    if (!mapStore.radial.cot.properties) mapStore.radial.cot.properties = {};
+
+    if (event === 'cot:view') {
+        router.push(`/cot/${mapStore.radial.cot.properties.id}`);
+        closeRadial()
+    } else if (event === 'cot:play') {
+        await floatStore.addCOT(mapStore.radial.cot.properties.id);
+        closeRadial()
+    } else if (event === 'cot:delete') {
+        const cot = mapStore.radial.cot;
+        closeRadial()
+
+        if (route.name === 'home-menu-cot' && route.params.uid === (cot.properties.id || cot.id)) {
+            router.push('/');
+        }
+
+        await mapStore.worker.db.remove(String(cot.properties.id || cot.id), {
+            mission: true
+        })
+
+        await mapStore.refresh();
+    } else if (event === 'cot:lock') {
+        mapStore.locked.push(mapStore.radial.cot.properties ? mapStore.radial.cot.properties.id : mapStore.radial.cot.id);
+        closeRadial()
+    } else if (event === 'cot:edit') {
+        const cot = await mapStore.worker.db.get(mapStore.radial.cot.properties.id || mapStore.radial.cot.id, {
+            mission: true
+        })
+
+        if (!cot) throw new Error('Cannot Find COT Marker');
+        await mapStore.draw.edit(cot);
+
+        closeRadial()
+    } else if (event === 'feat:view') {
+        selectFeat(mapStore.radial.cot as MapGeoJSONFeature);
+        closeRadial()
+    } else if (event === 'context:new') {
+        const feat = toRaw(mapStore.radial.cot as Feature) as Feature;
+
+        await mapStore.worker.db.add(feat, {
+            authored: true
+        });
+
+        await mapStore.refresh();
+        closeRadial()
+    } else if (event === 'context:info') {
+        // @ts-expect-error Figure out geometry.coordinates type
+        router.push(`/query/${encodeURIComponent(mapStore.radial.cot.geometry.coordinates.join(','))}`);
+        closeRadial()
+    } else {
+        closeRadial()
+        throw new Error(`Unimplemented Radial Action: ${event}`);
+    }
+}
+
+async function mountMap(): Promise<void> {
+    if (!mapRef.value) throw new Error('Map Element could not be found - Please refresh the page and try again');
+    await mapStore.init(mapRef.value);
+
+    return new Promise((resolve) => {
+        mapStore.map.once('idle', async () => {
+            const profile = await mapStore.worker.profile.load();
+
+            if (profile.display_projection === 'globe') {
+                mapStore.map.setProjection({ type: "globe" });
+            }
+
+            await mapStore.icons.updateImages();
+
+            await mapStore.initOverlays();
+
+            timer.value = setInterval(async () => {
+                if (!mapStore.map) return;
+                await mapStore.refresh();
+            }, 500);
+
+            return resolve();
+        });
+    });
+}
+</script>
+
+<style>
+.maplibregl-ctrl-scale {
+    background-color: transparent !important;
+    color: #ffffff;
+    text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black;
+    border-bottom: 1px solid #fff;
+    border-left: 1px solid #fff;
+    border-right: 1px solid #fff;
+}
+.maplibregl-ctrl-scale::before {
+    background-color: transparent !important;
+    border-bottom: 1px solid #000;
+    border-left: 1px solid #000;
+    border-right: 1px solid #000;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+}
+.maplibregl-ctrl-bottom-left {
+    bottom: 0;
+    left: 260px;
+}
+.maplibregl-ctrl-bottom-right {
+    bottom: 0;
+    right: 60px;
+    z-index: 1 !important;
+    color: black !important;
+}
+.maplibregl-ctrl-attrib a {
+    color: black !important;
+}
+</style>