feat(map): session data is now saving selected map source

frontend/react/src/interfaces.ts

@@ -61,6 +61,7 @@ export interface SessionData {
   starredSpawns?: { [key: number]: SpawnRequestTable };
   drawings?: { [key: string]: { visibility: boolean; opacity: number; name: string; guid: string; containers: any; drawings: any } };
   navpoints?: { [key: string]: { visibility: boolean; opacity: number; name: string; guid: string; containers: any; drawings: any } };
+  mapSource?: { id: string };
 }
 
 export interface ProfileOptions {

frontend/react/src/map/map.ts

@@ -310,6 +310,12 @@ export class Map extends L.Map {
         this.#starredSpawnRequestTables = localSessionData.starredSpawns;
         StarredSpawnsChangedEvent.dispatch(this.#starredSpawnRequestTables);
       }
+      
+      setTimeout(() => {
+        if (sessionData.mapSource?.id) {
+          this.setLayerName(sessionData.mapSource.id);
+        }
+      }, 500);
     });
 
     window.addEventListener("blur", () => {
@@ -1014,7 +1020,7 @@ export class Map extends L.Map {
     }
   }
 
-  #onMouseWheelPressed(e: any) {}
+  #onMouseWheelPressed(e: any) { }
 
   #onRightMousePressed(e: any) {
     this.dragging.disable();

frontend/react/src/sessiondata.ts

@@ -10,6 +10,7 @@ import {
   CoalitionAreasChangedEvent,
   DrawingsUpdatedEvent,
   HotgroupsChangedEvent,
+  MapSourceChangedEvent,
   SessionDataChangedEvent,
   SessionDataLoadedEvent,
   SessionDataSavedEvent,
@@ -136,8 +137,13 @@ export class SessionDataManager {
         DrawingsUpdatedEvent.on(() => {
           let mainDrawingsContainer = getApp().getDrawingsManager().getDrawingsContainer();
           let navpointsContainer = getApp().getDrawingsManager().getNavpointsContainer();
-          this.#sessionData.drawings = {"Mission drawings": mainDrawingsContainer.toJSON()};
-          this.#sessionData.navpoints = {"Navpoints": navpointsContainer.toJSON()};
+          this.#sessionData.drawings = { "Mission drawings": mainDrawingsContainer.toJSON() };
+          this.#sessionData.navpoints = { "Navpoints": navpointsContainer.toJSON() };
+          this.#saveSessionData();
+        });
+
+        MapSourceChangedEvent.on((source) => {
+          this.#sessionData.mapSource = { id: source };
           this.#saveSessionData();
         });
       }, 200);

frontend/react/src/ui/panels/header.tsx

@@ -25,6 +25,7 @@ import {
   MapOptionsChangedEvent,
   MapSourceChangedEvent,
   SessionDataChangedEvent,
+  SessionDataLoadedEvent,
   SessionDataSavedEvent,
 } from "../../events";
 import {
@@ -65,7 +66,9 @@ export function Header() {
     MapOptionsChangedEvent.on((mapOptions) => {
       setMapOptions({ ...mapOptions });
     });
-    MapSourceChangedEvent.on((source) => setMapSource(source));
+    MapSourceChangedEvent.on((source) => {
+      setMapSource(source);
+    });
     ConfigLoadedEvent.on((config: OlympusConfig) => {
       // Timeout needed to make sure the map configuration has updated
       window.setTimeout(() => {
@@ -79,6 +82,9 @@ export function Header() {
     });
     SessionDataChangedEvent.on(() => setSavingSessionData(true));
     SessionDataSavedEvent.on(() => setSavingSessionData(false));
+    SessionDataLoadedEvent.on((sessionData) => {
+      sessionData.mapSource && setMapSource(sessionData.mapSource.id);
+    })
     EnabledCommandModesChangedEvent.on((enabledCommandModes) => setEnabledCommandModes(enabledCommandModes));
     AudioManagerStateChangedEvent.on((state) => setAudioState(state as AudioManagerState));
 

frontend/react/src/ui/panels/maptoolbar.tsx

@@ -157,7 +157,7 @@ export function MapToolBar(props: {}) {
             <>
               <div className="flex flex-col gap-1">
                 <OlStateButton
-                  key={"select"}
+                  key={"zoomin"}
                   checked={false}
                   icon={faPlus}
                   tooltip={() => <div>Zoom map in</div>}
@@ -167,7 +167,7 @@ export function MapToolBar(props: {}) {
                   }}
                 />
                 <OlStateButton
-                  key={"select"}
+                  key={"zoomout"}
                   checked={false}
                   icon={faMinus}
                   tooltip={() => <div>Zoom map out</div>}