Bugfix for map flashing issue 🤞🏻

openclimatefix · Feb 23, 2024 · 56b4d57 · 56b4d57
1 parent 9a47351
commit 56b4d57
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/apps/nowcasting-app/components/helpers/mapUtils.ts b/apps/nowcasting-app/components/helpers/mapUtils.ts
@@ -12,10 +12,26 @@ export const safelyUpdateMapData = (
     !map.isStyleLoaded()
   ) {
     if (!map.isStyleLoaded()) {
-      setTimeout(() => {
-        // console.log("map is not style loaded, trying again");
+      // Check if we've already set a timeout for this map
+      const existingTimeout = localStorage.getItem(
+        `MapTimeoutId-${map.getContainer().dataset.title}`
+      );
+      // If we have, clear it
+      if (existingTimeout) {
+        // console.log(`clearing existing map timeout for ${map.getContainer().dataset.title}`);
+        clearTimeout(Number(existingTimeout));
+      }
+      // Set a new timeout to check if the map is ready and update the data
+      // console.log(`setting new map timeout for ${map.getContainer().dataset.title}`, newTimeout);
+      const newTimeout = setTimeout(() => {
+        // console.warn("map is not style loaded, trying again");
         safelyUpdateMapData(map, updateMapData);
-      }, 400);
+      }, 500);
+      // Save the timeout id to local storage
+      localStorage.setItem(
+        `MapTimeoutId-${map.getContainer().dataset.title}`,
+        newTimeout.toString()
+      );
     }
     return;
   } else {

diff --git a/apps/nowcasting-app/components/map/types.ts b/apps/nowcasting-app/components/map/types.ts
@@ -16,5 +16,6 @@ export interface IMap {
   controlOverlay: any;
   bearing?: number;
   updateData: { newData: boolean | string; updateMapData: (map: mapboxgl.Map) => void };
+  children: React.ReactNode;
   title: string;
 }