gaslight2

starpilot/system/the_pond/assets/components/navigation/navigation_destination.js

@@ -140,39 +140,44 @@ function parseCoordinatePair(value) {
   return { latitude, longitude };
 }
 
+let map;
+let destinationMarker;
+let favoriteMarkers = [];
+let sessionToken = crypto.randomUUID?.() || Math.random().toString(36).slice(2);
+let remountCheckScheduled = false;
+
+const state = reactive({
+  amap1Key: undefined,
+  amap2Key: undefined,
+  canToggleProvider: false,
+  confirmedRoute: null,
+  confirmedRouteRefresh: 0,
+  destination: undefined,
+  favoriteRoutes: [],
+  favoriteToRemove: null,
+  favoriteToRename: null,
+  favoritesCount: 0,
+  favoritesVisible: false,
+  fetched: false,
+  initialized: false,
+  isMetric: true,
+  lastPosition: undefined,
+  loadingRoute: false,
+  mapboxPublic: undefined,
+  mapboxSecret: undefined,
+  missingKeys: null,
+  newFavoriteName: "",
+  previousDestinations: "[]",
+  searchProvider: "mapbox",
+  selectedRoute: null,
+  showRemoveFavoriteModal: false,
+  showRenameFavoriteModal: false,
+  suggestions: "[]"
+});
+
+const searchFieldState = reactive({ value: "" });
+
 export function NavDestination() {
-  let map;
-  let destinationMarker;
-  let favoriteMarkers = [];
-  const state = reactive({
-    amap1Key: undefined,
-    amap2Key: undefined,
-    canToggleProvider: false,
-    confirmedRoute: null,
-    confirmedRouteRefresh: 0,
-    destination: undefined,
-    favoriteRoutes: [],
-    favoriteToRemove: null,
-    favoriteToRename: null,
-    favoritesCount: 0,
-    favoritesVisible: false,
-    initialized: false,
-    isMetric: true,
-    lastPosition: undefined,
-    loadingRoute: false,
-    mapboxPublic: undefined,
-    mapboxSecret: undefined,
-    missingKeys: null,
-    newFavoriteName: "",
-    previousDestinations: "[]",
-    searchProvider: "mapbox",
-    selectedRoute: null,
-    showRemoveFavoriteModal: false,
-    showRenameFavoriteModal: false,
-    suggestions: "[]"
-  });
-  const searchFieldState = reactive({ value: "" });
-  const sessionToken = crypto.randomUUID?.() || Math.random().toString(36).slice(2);
 
   function areRoutesEqual(a, b) {
     return a?.routeHash && b?.routeHash && a.routeHash === b.routeHash;
@@ -585,18 +590,31 @@ export function NavDestination() {
   }
 
   const setupMap = async (retries = 0) => {
-    if (!state.mapboxPublic || state.initialized) return;
+    if (!state.mapboxPublic) return false;
+
+    const container = document.getElementById("map");
+    if (!container) {
+      if (retries >= 50) return false;
+      await new Promise(r => requestAnimationFrame(r));
+      return setupMap(retries + 1);
+    }
+
+    if (map?.getContainer?.() && map.getContainer() !== container) {
+      favoriteMarkers.forEach(marker => marker.remove());
+      favoriteMarkers = [];
+      destinationMarker?.remove();
+      destinationMarker = undefined;
+      map.remove();
+      map = undefined;
+      state.initialized = false;
+    }
+
+    if (state.initialized) return false;
 
     if (typeof mapboxgl === "undefined") {
       await loadMapboxGL();
     }
 
-    const container = document.getElementById("map");
-    if (!container) {
-      if (retries >= 50) return;
-      await new Promise(r => requestAnimationFrame(r));
-      return setupMap(retries + 1);
-    }
     state.initialized = true;
     mapboxgl.accessToken = state.mapboxPublic;
     const initialCenter = state.lastPosition
@@ -654,9 +672,22 @@ export function NavDestination() {
         labelLayer
       );
     });
+    return true;
   };
 
-  getNavigationData();
+  if (!state.fetched) {
+    state.fetched = true;
+    void getNavigationData();
+  } else if (!remountCheckScheduled && !state.missingKeys) {
+    remountCheckScheduled = true;
+    queueMicrotask(async () => {
+      remountCheckScheduled = false;
+      const recreated = await setupMap();
+      if (recreated) {
+        await loadFavoritesAlphabetically();
+      }
+    });
+  }
 
   return html`
     <div class="navigation-container">

starpilot/system/the_pond/assets/components/router.js

@@ -9,7 +9,7 @@ import { Home } from "/assets/components/home/home.js"
 import { LateralManeuvers } from "/assets/components/tools/lateral_maneuvers.js"
 import { LongitudinalManeuvers } from "/assets/components/tools/longitudinal_maneuvers.js"
 import { MapsManager } from "/assets/components/tools/maps.js"
-import { NavDestination } from "/assets/components/navigation/navigation_destination.js?v=nav-favorites-1"
+import { NavDestination } from "/assets/components/navigation/navigation_destination.js?v=nav-favorites-2"
 import { NavKeys } from "/assets/components/navigation/navigation_keys.js"
 import { RouteRecordings } from "/assets/components/recordings/dashcam_routes.js"
 import { SettingsView } from "/assets/components/settings.js"

starpilot/system/the_pond/templates/index.html

@@ -19,7 +19,7 @@
   <link rel="stylesheet" href="/assets/components/home/home.css">
   <link rel="stylesheet" href="/assets/components/main.css">
   <link rel="stylesheet" href="/assets/components/modal.css">
-  <link rel="stylesheet" href="/assets/components/navigation/navigation_destination.css?v=nav-favorites-1">
+  <link rel="stylesheet" href="/assets/components/navigation/navigation_destination.css?v=nav-favorites-2">
   <link rel="stylesheet" href="/assets/components/navigation/navigation_keys.css">
   <link rel="stylesheet" href="/assets/components/recordings/dashcam_routes.css">
   <link rel="stylesheet" href="/assets/components/recordings/screen_recordings.css">
@@ -44,7 +44,7 @@
   <link rel="stylesheet" href="/assets/components/tools/tsk_manager.css">
 
   <script type="module">
-    import("/assets/components/router.js?v=favorite-slots-5").catch((err) => {
+    import("/assets/components/router.js?v=favorite-slots-6").catch((err) => {
       console.error("[the_pond] bootstrap failed", err);
       const target = document.getElementById("app") || document.body;
       const pre = document.createElement("pre");