@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/CloudTAK/Map.vue

@@ -1,972 +0,0 @@
-<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>