@tak-ps/cloudtak 12.54.0

package/src/stores/map.ts

@@ -0,0 +1,931 @@
+/*
+* MapStore - Maintain the state of the MapLibreGL Instance
+*
+* Terminology:
+* - Overlay - The "container" that is saved in the DB that contains a reference to a single GIS source and potentially many rendered layers
+* - Layer - MapLibre - Ref: https://maplibre.org/maplibre-style-spec/layers/
+* - Source - MapLibre - Ref: https://maplibre.org/maplibre-style-spec/sources/
+*/
+
+import { v4 as randomUUID } from 'uuid';
+import { defineStore } from 'pinia'
+import { markRaw } from 'vue';
+import DrawTool, { DrawToolMode } from './modules/draw.ts';
+import IconManager from './modules/icons.ts';
+import MenuManager from './modules/menu.ts';
+import * as Comlink from 'comlink';
+import AtlasWorker from '../workers/atlas.ts?worker&url';
+import COT from '../base/cot.ts';
+import type { DatabaseType } from '../base/database.ts';
+import { db } from '../base/database.ts';
+import { WorkerMessageType, LocationState } from '../base/events.ts';
+import type { WorkerMessage } from '../base/events.ts';
+import Overlay from '../base/overlay.ts';
+import Subscription from '../base/subscription.ts';
+import { std, stdurl } from '../std.js';
+import mapgl from 'maplibre-gl'
+import type Atlas from '../workers/atlas.ts';
+import { CloudTAKTransferHandler } from '../base/handler.ts';
+
+import type { ProfileOverlay, ProfileOverlayList, Basemap, APIList, Feature, MapConfig } from '../types.ts';
+import type { LngLat, LngLatLike, Point, MapMouseEvent, MapGeoJSONFeature, GeoJSONSource } from 'maplibre-gl';
+
+export type TAKNotification = { type: string; name: string; body: string; url: string; created: string; }
+
+export const useMapStore = defineStore('cloudtak', {
+    state: (): {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _map?: any;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _draw?: any;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _icons?: any;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _menu?: any;
+
+        db: DatabaseType;
+        channel: BroadcastChannel;
+
+        toImport: Feature[]
+
+        // Lock the map view to a given CoT - The last element is the currently locked value
+        // this is an array so that things like the radial menu can temporarily lock state but remember the previous lock value when they are closed
+        locked: Array<string>;
+
+        callsign: string;
+        zoom: string;
+        location: LocationState;
+        distanceUnit: string;
+        manualLocationMode: boolean;
+        isMobileDetected: boolean;
+        gpsWatchId: number | null;
+
+        toastOffset: {
+            x: number;
+            y: number;
+        };
+
+        permissions: {
+            location: boolean;
+            notification: boolean;
+        }
+
+        worker: Comlink.Remote<Atlas>;
+        mission: Subscription | undefined;
+        mapConfig: MapConfig;
+        container?: HTMLElement;
+        hasTerrain: boolean;
+        hasNoChannels: boolean;
+        isTerrainEnabled: boolean;
+        isLoaded: boolean;
+        isOpen: boolean;
+        pitch: number;
+        bearing: number;
+        selected: Map<string, COT>;
+        select: {
+            mode?: string;
+            feats: Array<COT | MapGeoJSONFeature>;
+            x: number;
+            y: number;
+            popup?: mapgl.Popup;
+        },
+        radial: {
+            mode: string | undefined;
+            cot: Feature | MapGeoJSONFeature | undefined;
+            x: number;
+            y: number;
+            lngLat?: LngLat;
+        },
+        overlays: Array<Overlay>
+    } => {
+        const worker = Comlink.wrap<Atlas>(new Worker(AtlasWorker, {
+            type: 'module'
+        }));
+
+        new CloudTAKTransferHandler(
+            worker,
+            Comlink.transferHandlers,
+            true
+        );
+
+        return {
+            worker,
+            callsign: 'Unknown',
+            toImport: [],
+            location: LocationState.Loading,
+            db,
+            channel: new BroadcastChannel("cloudtak"),
+            zoom: 'conditional',
+            distanceUnit: 'meter',
+            toastOffset: { x: 70, y: 10 },
+            manualLocationMode: false,
+            gpsWatchId: null,
+            isMobileDetected: false,
+            locked: [],
+            hasTerrain: false,
+            hasNoChannels: false,
+            isTerrainEnabled: false,
+            isOpen: false,
+            isLoaded: false,
+            pitch: 0,
+            bearing: 0,
+            mission: undefined,
+            permissions: {
+                location: false,
+                notification: false
+            },
+            select: {
+                mode: undefined,
+                feats: [],
+                x: 0, y: 0,
+            },
+            mapConfig: {
+                center: '-100,40',
+                zoom: 4,
+                pitch: 0,
+                bearing: 0
+            },
+            radial: {
+                mode: undefined,
+                cot: undefined,
+                x: 0, y: 0,
+                lngLat: undefined
+            },
+            overlays: [],
+
+            selected: new Map()
+        }
+    },
+    getters: {
+        map: function(): mapgl.Map {
+            if (!this._map) throw new Error('Map has not yet initialized');
+            return this._map as mapgl.Map;
+        },
+        draw: function(): DrawTool {
+            if (!this._draw) throw new Error('Drawing Tools have not yet initialized');
+            return this._draw as DrawTool;
+        },
+        icons: function(): IconManager {
+            if (!this._icons) throw new Error('Icon Manager has not yet initialized');
+            return this._icons as IconManager;
+        },
+        menu: function(): MenuManager {
+            if (!this._menu) throw new Error('Menu Manager has not yet initialized');
+            return this._menu as MenuManager;
+        }
+    },
+    actions: {
+        destroy: function() {
+            this.channel.close();
+
+            // Clean up GPS watch
+            if (this.gpsWatchId !== null) {
+                navigator.geolocation.clearWatch(this.gpsWatchId);
+                this.gpsWatchId = null;
+            }
+
+            if (this._map) {
+                try {
+                    this._map.remove();
+                    delete this._map;
+                } catch (err) {
+                    console.error(err);
+                }
+            }
+            this.$reset();
+        },
+        removeOverlay: async function(overlay: Overlay) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const pos = (this.overlays as any[]).indexOf(overlay)
+            if (pos === -1) return;
+
+            this.overlays.splice(pos, 1)
+
+            await overlay.delete();
+            if (overlay.mode === 'mission' && overlay.mode_id) {
+                const sub = await Subscription.from(overlay.mode_id, localStorage.token, {
+                    subscribed: true
+                });
+
+                if (sub) {
+                    await sub.update({ subscribed: false });
+                }
+            }
+        },
+        makeActiveMission: async function(mission?: Subscription): Promise<void> {
+            this.mission = mission;
+            await this.worker.db.makeActiveMission(mission ? mission.meta.guid : undefined);
+
+            if (mission) {
+                for (const overlay of this.overlays) {
+                    if (overlay.mode !== 'mission' || !overlay.mode_id) continue;
+
+                    if (overlay.mode_id !== mission.meta.guid && overlay.active) {
+                        // The API call to make active will disable all active overlays on the backend so no need for networkIO
+                        overlay.active = false;
+                    } else if (overlay.mode_id === mission.meta.guid) {
+                        overlay.active = true;
+
+                        await overlay.save();
+                    }
+                }
+            } else {
+                for (const overlay of this.overlays) {
+                    if (overlay.mode !== 'mission' || !overlay.mode_id) continue;
+
+                    if (overlay.active) {
+                        overlay.active = false;
+                        await overlay.save();
+                    }
+                }
+            }
+        },
+        getOverlayById(id: number): Overlay | null {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            for (const overlay of (this.overlays as any[])) {
+
+                if (overlay.id === id) return overlay as Overlay
+            }
+
+            return null;
+        },
+        getOverlayByName(name: string): Overlay | null {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            for (const overlay of (this.overlays as any[])) {
+
+                if (overlay.name === name) return overlay as Overlay
+            }
+
+            return null;
+        },
+        getOverlayByMode(mode: string, mode_id: string): Overlay | null {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            for (const overlay of (this.overlays as any[])) {
+
+                if (overlay.mode === mode && overlay.mode_id === mode_id) {
+                    return overlay as Overlay;
+                }
+            }
+
+            return null;
+        },
+        listTerrain: async function(): Promise<APIList<Basemap>> {
+            // Courtesy add terrain data
+            const burl = stdurl('/api/basemap');
+            burl.searchParams.append('type', 'raster-dem');
+            burl.searchParams.append('limit', '1');
+            const basemaps = await std(burl) as APIList<Basemap>;
+
+            return basemaps;
+        },
+
+        // TODO: Convert to overlay
+        addTerrain: async function(): Promise<void> {
+            const basemaps = await this.listTerrain();
+            if (basemaps.items.length && !this.map.getSource('-2')) {
+                this.map.addSource('-2', {
+                    type: 'raster-dem',
+                    url: String(stdurl(`/api/basemap/${basemaps.items[0].id}/tiles?token=${localStorage.token}`)),
+                        tileSize: 256
+                })
+
+                this.map.setTerrain({
+                    source: '-2',
+                    exaggeration: 1.5
+                });
+
+                this.isTerrainEnabled = true;
+            } else {
+                this.hasTerrain = false;
+            }
+        },
+
+        removeTerrain: function(): void {
+            this.map.setTerrain(null);
+            this.map.removeSource('-2');
+
+            this.isTerrainEnabled = false;
+        },
+
+        returnHome: function(): void {
+            const flyTo = {
+                zoom: this.mapConfig.zoom,
+                pitch: this.mapConfig.pitch,
+                bearing: this.mapConfig.bearing,
+                center: this.mapConfig.center.split(',').map(Number) as LngLatLike,
+                speed: Infinity
+            };
+
+            this.map.flyTo(flyTo);
+        },
+
+        /**
+         * Trigger a rerender of the underlying GeoJSON Features
+         */
+        refresh: async function(): Promise<void> {
+            await this.updateCOT();
+        },
+        updateCOT: async function(): Promise<void> {
+            try {
+                const diff = await this.worker.db.diff();
+
+                if (
+                    (diff.add && diff.add.length)
+                    || (diff.remove && diff.remove.length)
+                    || (diff.update && diff.update.length)
+                ) {
+                    const source = this.map.getSource('-1') as GeoJSONSource
+                    if (source) source.updateData(diff);
+                }
+
+                if (this.locked.length && await this.worker.db.has(this.locked[this.locked.length - 1])) {
+                    const featid = this.locked[this.locked.length - 1];
+                    if (featid) {
+                        const feat = await this.worker.db.get(featid);
+                        if (feat && feat.geometry.type === "Point") {
+                            const flyTo = {
+                                center: feat.properties.center as LngLatLike,
+                                speed: Infinity
+                            };
+                            this.map.flyTo(flyTo);
+
+                        }
+                    }
+                }
+            } catch (err) {
+                console.error(err);
+            }
+        },
+
+        /**
+         * Given a mission Guid, attempt to refresh the Map Layer, loading the mission if it isn't already loaded
+         * @returns {boolean} True if successful, false if not
+         */
+        loadMission: async function(
+            guid: string,
+            opts?: {
+                reload: boolean;
+            }
+        ): Promise<Subscription | null> {
+            const overlay = this.getOverlayByMode('mission', guid)
+            if (!overlay || !overlay.mode_id) {
+                console.error(`Mission:${guid} not found in overlays`);
+                return null;
+            }
+
+            if (!this.map) throw new Error('Cannot loadMission before map has loaded');
+            const oStore = this.map.getSource(String(overlay.id));
+
+            if (!oStore) {
+                console.error(`Mission:${guid} No Source Found`);
+                return null
+            }
+
+            const sub = await Subscription.load(guid, {
+                token: localStorage.token,
+                reload: opts?.reload || false,
+                subscribed: true,
+                missiontoken: overlay.token || undefined
+            });
+
+            // @ts-expect-error Source.setData is not defined
+            oStore.setData(await sub.feature.collection(false));
+
+            await sub.update({ dirty: false });
+
+            return sub;
+        },
+        init: async function(container: HTMLElement) {
+            this.container = container;
+
+            await this.worker.init(localStorage.token);
+
+            this.channel.onmessage = async (event: MessageEvent<WorkerMessage>) => {
+                const msg = event.data;
+
+                if (!msg || !msg.type) return;
+
+                if (msg.type === WorkerMessageType.Map_FitBounds) {
+                    if (msg.body.options.speed === null) {
+                        msg.body.options.speed = Infinity;
+                    }
+
+                    map.fitBounds(msg.body.bounds, msg.body.options);
+                } else if (msg.type === WorkerMessageType.Map_FlyTo) {
+                    if (msg.body.speed === null) {
+                        msg.body.speed = Infinity;
+                    }
+
+                    if (!msg.body.zoom) msg.body.zoom = this.map.getZoom();
+
+                    map.flyTo(msg.body);
+                } else if (msg.type === WorkerMessageType.Profile_Location_Source) {
+                    this.location = msg.body.source as LocationState;
+                } else if (msg.type === WorkerMessageType.Profile_Callsign) {
+                    this.callsign = msg.body.callsign;
+                } else if (msg.type === WorkerMessageType.Profile_Display_Zoom) {
+                    this.zoom = msg.body.zoom;
+                } else if (msg.type === WorkerMessageType.Profile_Icon_Rotation) {
+                    this.updateIconRotation(msg.body.enabled);
+                } else if (msg.type === WorkerMessageType.Profile_Distance_Unit) {
+                    this.updateDistanceUnit(msg.body.unit);
+                } else if (msg.type === WorkerMessageType.Map_Projection) {
+                    map.setProjection(msg.body);
+                } else if (msg.type === WorkerMessageType.Connection_Open) {
+                    this.isOpen = true;
+                } else if (msg.type === WorkerMessageType.Connection_Close) {
+                    this.isOpen = false;
+                } else if (msg.type === WorkerMessageType.Channels_None) {
+                    this.hasNoChannels = true;
+                } else if (msg.type === WorkerMessageType.Channels_List) {
+                    this.hasNoChannels = false;
+                } else if (msg.type === WorkerMessageType.Mission_Change_Feature) {
+                    await this.loadMission(msg.body.guid);
+                } else if (msg.type === WorkerMessageType.Contact_Change) {
+                    if (this._menu) await this._menu.updateContactsCount();
+                }
+            }
+
+            if ("geolocation" in navigator) {
+                const status = await navigator.permissions
+                    .query({ name: "geolocation" })
+
+                this.permissions.location = status.state === 'granted' ? true : false
+                status.onchange = () => {
+                    this.permissions.location = status.state === 'granted' ? true : false
+                };
+
+                this.startGPSWatch();
+            } else {
+                console.error('Browser does not appear to support Geolocation');
+            }
+
+            if ('Notification' in window) {
+                const status = await navigator.permissions
+                    .query({ name: "notifications" })
+
+                this.permissions.notification = status.state === 'granted' ? true : false
+
+                if (!this.permissions.notification) {
+                    Notification.requestPermission()
+                }
+
+                status.onchange = () => {
+                    this.permissions.notification = status.state === 'granted' ? true : false
+
+                    if (!this.permissions.notification) {
+                        Notification.requestPermission()
+                    }
+                };
+            } else {
+                console.error('Browser does not appear to support Notifications');
+            }
+
+            const sprites = await IconManager.sprites();
+            this.mapConfig = await std('/api/config/map') as MapConfig;
+
+            const init: mapgl.MapOptions = {
+                container: this.container,
+                hash: true,
+                attributionControl: {},
+                fadeDuration: 0,
+                zoom: this.mapConfig.zoom,
+                pitch: this.mapConfig.pitch,
+                bearing: this.mapConfig.bearing,
+                center: this.mapConfig.center.split(',').map(Number) as LngLatLike,
+                maxPitch: 85,
+                style: {
+                    version: 8,
+                    glyphs: String(stdurl('/api/fonts')) + '/{fontstack}/{range}.pbf?token=' + localStorage.token,
+                    sprite: sprites,
+                    sources: {
+                        '-1': {
+                            type: 'geojson',
+                            cluster: false,
+                            data: { type: 'FeatureCollection', features: [] }
+                        }
+                    },
+                    layers: [{
+                        id: 'background',
+                        type: 'background',
+                        paint: { 'background-color': 'hsl(47, 26%, 88%)' }
+                    }]
+                }
+            };
+
+            if (!init.style || typeof init.style === 'string') throw new Error('init.style must be an object');
+
+            const map = new mapgl.Map(init);
+
+            // Add scale control
+            const scaleControl = new mapgl.ScaleControl({
+                maxWidth: 100,
+                unit: 'metric'
+            });
+            map.addControl(scaleControl, 'bottom-left');
+            // Store reference for later use
+            (map as mapgl.Map & { _scaleControl?: mapgl.ScaleControl })._scaleControl = scaleControl;
+
+            this._map = markRaw(map);
+            this._draw = new DrawTool(this);
+            this._icons = markRaw(new IconManager(map));
+            this._menu = markRaw(new MenuManager(this));
+            await this._menu!.init();
+
+            // If we missed the Profile_Location_Source make sure it gets synced
+            const loc = await this.worker.profile.location;
+            this.location = loc.source;
+
+            const profile = await this.worker.profile.load()
+            this.callsign = profile.tak_callsign;
+            this.zoom = profile.display_zoom;
+            // Initialize icon rotation setting after overlays are loaded
+            setTimeout(() => {
+                this.updateIconRotation(profile.display_icon_rotation);
+            }, 100);
+
+            this.distanceUnit = profile.display_distance;
+
+            // Initialize scale control settings
+            this.updateDistanceUnit(profile.display_distance);
+
+            this.isOpen = await this.worker.conn.isOpen;
+        },
+        startGPSWatch: function(): void {
+            if (!("geolocation" in navigator)) return;
+
+            // Clear existing watch if any
+            if (this.gpsWatchId !== null) {
+                navigator.geolocation.clearWatch(this.gpsWatchId);
+            }
+
+            this.gpsWatchId = navigator.geolocation.watchPosition((position) => {
+                if (!this.manualLocationMode) {
+                    this.channel.postMessage({
+                        type: WorkerMessageType.Profile_Location_Coordinates,
+                        body: {
+                            accuracy: position.coords.accuracy,
+                            altitude: position.coords.altitude,
+                            coordinates: [ position.coords.longitude, position.coords.latitude ]
+                        }
+                    })
+                }
+            }, (err) => {
+                if (err.code !== 0) {
+                    console.error('Location Error', err);
+                }
+            }, {
+                maximumAge: 0,
+                timeout: 1500,
+                enableHighAccuracy: true
+            });
+        },
+        initOverlays: async function() {
+            if (!this.map) throw new Error('Cannot initLayers before map has loaded');
+
+            const map: mapgl.Map = this.map as mapgl.Map;
+
+            map.on('rotate', () => {
+                this.bearing = map.getBearing()
+            })
+
+            map.on('pitch', () => {
+                this.pitch = map.getPitch()
+            })
+
+            map.on('styleimagemissing', (e) => {
+                this.icons.onStyleImageMissing(e);
+            })
+
+            map.on('moveend', async () => {
+                if (this.draw.mode !== DrawToolMode.STATIC) {
+                    this.draw.snapping = await this.worker.db.snapping(this.map.getBounds().toArray());
+                } else {
+                    this.draw.snapping.clear();
+                }
+            });
+
+            map.on('click', async (e: MapMouseEvent) => {
+                if (this.draw.mode !== DrawToolMode.STATIC) return;
+
+                if (this.radial.mode) {
+                    // Clicking away closes the radial menu
+                    this.radial.mode = undefined;
+                    this.radial.cot = undefined;
+                    return;
+                }
+
+                if (this.select.feats) this.select.feats = [];
+
+                // Ignore Non-Clickable Layer
+                const clickMap: Map<string, { type: string, id: string }> = new Map();
+                for (const overlay of this.overlays) {
+                    for (const c of overlay._clickable) {
+                        clickMap.set(c.id, c);
+                    }
+                }
+
+                // Each Visual Layer will return a Feature for a click
+                // Since a single "feature" may exist in multiple layers (text, polygon, line) etc
+                // dedupe them based on the ID
+                const dedupe: Map<string, MapGeoJSONFeature> = new Map();
+                map.queryRenderedFeatures(e.point)
+                    .filter((feat) => {
+                        return clickMap.has(feat.layer.id);
+                    })
+                    .forEach((feat) => {
+                        dedupe.set(String(feat.properties.id || feat.id), feat);
+                    })
+
+                const features = Array.from(dedupe.values());
+
+                if (!features.length) return;
+
+                // MultiSelect Mode
+                if (e.originalEvent.ctrlKey && features.length) {
+                    const cot = await this.worker.db.get(features[0].properties.id, {
+                        mission: true
+                    });
+
+                    if (!cot) return;
+                    this.selected.set(cot.id, cot);
+                } else if (features.length === 1) {
+                    this.radialClick(features[0], {
+                        lngLat: e.lngLat,
+                        point: e.point
+                    })
+                } else if (features.length > 1) {
+                    if (e.point.x < 150 || e.point.y < 150) {
+                        const flyTo: mapgl.FlyToOptions = {
+                            speed: Infinity,
+                            center: [e.lngLat.lng, e.lngLat.lat]
+                        };
+
+                        if (map.getZoom() < 3) flyTo.zoom = 4;
+                        map.flyTo(flyTo)
+
+                        this.select.x = this.container ? this.container.clientWidth / 2 : 0;
+                        this.select.y = this.container ? this.container.clientHeight / 2 : 0;
+                    } else {
+                        this.select.x = e.point.x;
+                        this.select.y = e.point.y;
+                    }
+
+                    const feats = [];
+
+                    for (const feat of features) {
+                        // TODO: Support Multi Select with both CoT and VT Features
+                        if (!feat.properties.id) continue;
+
+                        const cot = await this.worker.db.get(feat.properties.id, {
+                            mission: true
+                        });
+
+                        if (cot) {
+                            feats.push(cot);
+                        } else {
+                            feats.push(feat);
+                        }
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.select.feats = feats as any;
+                }
+            });
+
+            map.on('contextmenu', (e) => {
+                if (this.draw.editing) return;
+
+                const id = randomUUID();
+                this.radialClick({
+                    id,
+                    type: 'Feature',
+                    path: '/',
+                    properties: {
+                        id,
+                        callsign: 'New Feature',
+                        archived: true,
+                        type: 'u-d-p',
+                        how: 'm-g',
+                        time: new Date().toISOString(),
+                        start: new Date().toISOString(),
+                        stale: new Date(Date.now() + 2 * (60 * 60 * 1000)).toISOString(),
+                        center: [ e.lngLat.lng, e.lngLat.lat ],
+                        'marker-color': '#00ff00',
+                        'marker-opacity': 1
+                    },
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [e.lngLat.lng, e.lngLat.lat]
+                    }
+                }, {
+                    mode: 'context',
+                    point: e.point,
+                    lngLat: e.lngLat
+                });
+            });
+
+            const url = stdurl('/api/profile/overlay');
+            url.searchParams.append('sort', 'pos');
+            url.searchParams.append('order', 'asc');
+            url.searchParams.append('limit', '100');
+            const profileOverlays = await std(url) as ProfileOverlayList;
+            this.hasTerrain = profileOverlays.available.terrain;
+
+            const hasBasemap = profileOverlays.items.some((o: ProfileOverlay) => {
+                return o.mode === 'basemap'
+            });
+
+            // Courtesy add an initial basemap
+            if (!hasBasemap) {
+                const burl = stdurl('/api/basemap');
+                burl.searchParams.append('type', 'raster');
+                const basemaps = await std(burl) as APIList<Basemap>;
+
+                if (basemaps.items.length > 0) {
+                    const basemap = await Overlay.create({
+                        name: basemaps.items[0].name,
+                        pos: -1,
+                        type: 'raster',
+                        url: String(stdurl(`/api/basemap/${basemaps.items[0].id}/tiles`)),
+                        mode: 'basemap',
+                        mode_id: String(basemaps.items[0].id)
+                    });
+
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    (this.overlays as any[]).push(basemap);
+                }
+            }
+
+            // Parallelize Overlay Creation
+            const overlayPromises = profileOverlays.items.map(item =>
+                Overlay.create(item as ProfileOverlay, { skipSave: true, skipLayers: true })
+            );
+
+            const newOverlays = await Promise.all(overlayPromises);
+
+            for (const overlay of newOverlays) {
+                await overlay.addLayers();
+            }
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (this.overlays as any[]).push(...newOverlays);
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (this.overlays as any[]).push(await Overlay.internal({
+                id: -1,
+                name: 'CoT Icons',
+                type: 'geojson',
+            }));
+
+            // Data Syncs are specially loaded as they are dynamic
+            // Parallelize Mission Loading
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const missionOverlays = (this.overlays as any[]).filter((overlay: Overlay) => overlay.mode === 'mission' && overlay.mode_id);
+            const missionPromises = missionOverlays.map(async (overlay: Overlay) => {
+                    const source = map.getSource(String(overlay.id));
+                    if (!source) return;
+
+                    try {
+                        const sub = await this.loadMission(overlay.mode_id!, {
+                            reload: true
+                        });
+
+                        if (sub && overlay.active) {
+                            await this.makeActiveMission(sub);
+                        }
+                    } catch (err) {
+                        console.error('Failed to load Mission', err)
+                        overlay._error = err instanceof Error ? err : new Error(String(err));
+                    }
+                });
+
+            await Promise.all(missionPromises);
+
+            this.isLoaded = true;
+
+            await this.updateAttribution();
+        },
+        updateIconRotation: function(enabled: boolean): void {
+            for (const overlay of this.overlays) {
+                if (overlay.type === 'geojson') {
+                    // Update icon rotation
+                    const iconLayerId = `${overlay.id}-icon`;
+                    if (this.map.getLayer(iconLayerId)) {
+                        this.map.setLayoutProperty(iconLayerId, 'icon-rotate', enabled ? ['get', 'course'] : 0);
+                    }
+
+                    // Update course arrow filter based on rotation setting
+                    const courseLayerId = `${overlay.id}-course`;
+                    if (this.map.getLayer(courseLayerId)) {
+                        if (enabled) {
+                            // When rotation enabled, only show course arrows for grouped features
+                            this.map.setFilter(courseLayerId, [
+                                'all',
+                                ['==', '$type', 'Point'],
+                                ['has', 'course'],
+                                ['has', 'group']
+                            ]);
+                        } else {
+                            // When rotation disabled, show course arrows for all features with course
+                            this.map.setFilter(courseLayerId, [
+                                'all',
+                                ['==', '$type', 'Point'],
+                                ['has', 'course']
+                            ]);
+                        }
+                    }
+
+                    // Update text offset
+                    const textLayerId = `${overlay.id}-text-point`;
+                    if (this.map.getLayer(textLayerId)) {
+                        this.map.setLayoutProperty(textLayerId, 'text-offset', [0, enabled ? 2 : 2.5]);
+                    }
+                }
+            }
+
+            // Force a map repaint to ensure changes are visible immediately
+            this.map.triggerRepaint();
+        },
+        updateDistanceUnit: function(unit: string): void {
+            this.distanceUnit = unit;
+            // Remove existing scale control and add new one with correct unit
+            const mapWithControl = this.map as mapgl.Map & { _scaleControl?: mapgl.ScaleControl };
+            const existingControl = mapWithControl._scaleControl;
+            if (existingControl) {
+                this.map.removeControl(existingControl);
+                const scaleControl = new mapgl.ScaleControl({
+                    maxWidth: 100,
+                    unit: unit === 'mile' ? 'imperial' : 'metric'
+                });
+                this.map.addControl(scaleControl, 'bottom-left');
+                mapWithControl._scaleControl = scaleControl;
+            }
+        },
+        updateAttribution: async function(): Promise<void> {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const attributionOverlays = (this.overlays as any[]).filter((o: Overlay) => o.mode === 'basemap' && o.mode_id && o.visible);
+            const attributionPromises = attributionOverlays.map(async (overlay: Overlay) => {
+                    try {
+                        const basemap = await std(`/api/basemap/${overlay.mode_id}`) as { attribution?: string };
+                        return basemap.attribution;
+                    } catch (err) {
+                        console.warn('Failed to load basemap attribution:', err);
+                        return null;
+                    }
+                });
+
+            const results = await Promise.all(attributionPromises);
+            const attributions = results.filter((a): a is string => !!a);
+
+            // Update attribution by manipulating the DOM directly
+            const attributionContainer = document.querySelector('.maplibregl-ctrl-attrib-inner');
+            if (attributionContainer && attributions.length > 0) {
+                attributionContainer.innerHTML = attributions.join(' | ');
+            }
+        },
+
+        /**
+         * Determine if the feature is from the CoT store or a clicked VT feature
+         */
+        featureSource: function(feat: MapGeoJSONFeature | Feature): string | void {
+            const clickMap: Map<string, { type: string, id: string }> = new Map();
+            for (const overlay of this.overlays) {
+                for (const c of overlay._clickable) {
+                    clickMap.set(c.id, c);
+                }
+            }
+
+            if (!('layer' in feat)) return;
+            const click = clickMap.get(feat.layer.id);
+            if (!click) return;
+            return click.type;
+        },
+
+        radialClick: async function(feat: MapGeoJSONFeature | Feature, opts: {
+            lngLat: LngLat;
+            point: Point;
+            mode?: string;
+        }): Promise<void> {
+            // If the call is coming from MultipleSelect, ensure this menu is closed
+            this.select.feats = [];
+
+            if (!opts.mode) opts.mode = this.featureSource(feat) || 'feat';
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (this.radial as any).cot = feat;
+            this.radial.mode = opts.mode;
+
+            if (feat.geometry && feat.geometry.type === 'Point' && feat.properties && feat.properties.center) {
+                if (typeof feat.properties.center === 'string') {
+                    const parts = JSON.parse(feat.properties.center);
+                    this.radial.lngLat = new mapgl.LngLat(parts[0], parts[1]);
+                } else {
+                    this.radial.lngLat = mapgl.LngLat.convert(feat.properties.center as LngLatLike);
+                }
+            } else {
+                this.radial.lngLat = opts.lngLat;
+            }
+        }
+    }
+})