[INV-3685][INV-3732][INV-3678] Show Map Markers with Cached Recordsets, hide default recordsets from caching

app/src/UI/ErrorHandler/ErrorHandler.tsx

@@ -39,6 +39,9 @@ export const ErrorHandler = ({ detail }) => {
             >
               {copied ? 'Copied!' : 'Copy Error Detail To Clipboard'}
             </Button>
+            <Button variant="contained" color="primary" onClick={() => location.reload()}>
+              Refresh
+            </Button>
             <Button
               sx={{ margin: '0.5rem' }}
               variant={'contained'}

app/src/UI/Map2/Map.tsx

@@ -27,7 +27,8 @@ import {
   rebuildLayersOnTableHashUpdate,
   refreshColoursOnColourUpdate,
   refreshVisibilityOnToggleUpdate,
-  removeDeletedRecordSetLayersOnRecordSetDelete
+  removeDeletedRecordSetLayersOnRecordSetDelete,
+  removeLayersOnNetworkConnectivityChange
 } from 'UI/Map2/helpers/recordset-layers';
 import { addWMSLayersIfNotExist, refreshWMSOnToggle } from 'UI/Map2/helpers/wms-layers';
 import { addServerBoundariesIfNotExists, refreshServerBoundariesOnToggle } from 'UI/Map2/helpers/server-boundaries';
@@ -51,7 +52,6 @@ export const Map = ({ children }) => {
 
   const [draw, setDraw] = useState(null);
   const [mapReady, setMapReady] = useState(false);
-
   const mapContainer: React.MutableRefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
   const map: React.MutableRefObject<MapLibre | null> = useRef<MapLibre>(null);
 
@@ -61,7 +61,7 @@ export const Map = ({ children }) => {
 
   // Avoid remounting map to avoid unnecesssary tile fetches or bad umounts:
   const authInitiated = useSelector((state) => state.Auth.initialized);
-  const loggedIn = useSelector((state) => state.Auth.authenticated);
+  const { authenticated, loggedInOrWorkingOffline } = useSelector((state) => state.Auth);
   const connectedToNetwork = useSelector((state) => state.Network.connected);
 
   // RecordSet Layers
@@ -145,7 +145,7 @@ export const Map = ({ children }) => {
   authHeaderRef.current = currentAuthHeader;
 
   useEffect(() => {
-    if (!loggedIn) {
+    if (!authenticated) {
       return;
     }
 
@@ -164,7 +164,7 @@ export const Map = ({ children }) => {
     return () => {
       clearInterval(id);
     };
-  }, [loggedIn]);
+  }, [authenticated]);
 
   // Map Init
   useEffect(() => {
@@ -188,16 +188,21 @@ export const Map = ({ children }) => {
     });
   }, [authInitiated, map_center]);
 
-  // RecordSet Layers:
   useEffect(() => {
     if (!mapReady) return;
     if (!map.current) return;
+    removeLayersOnNetworkConnectivityChange(map.current);
+  }, [connectedToNetwork]);
 
-    rebuildLayersOnTableHashUpdate(storeLayers, map.current, MapMode, API_BASE);
+  // RecordSet Layers:
+  useEffect(() => {
+    if (!mapReady) return;
+    if (!map.current) return;
+    rebuildLayersOnTableHashUpdate(storeLayers, map.current, MapMode, API_BASE, connectedToNetwork);
     refreshColoursOnColourUpdate(storeLayers, map.current);
     refreshVisibilityOnToggleUpdate(storeLayers, map.current);
     removeDeletedRecordSetLayersOnRecordSetDelete(storeLayers, map.current);
-  }, [storeLayers, map.current, mapReady]);
+  }, [storeLayers, map.current, mapReady, connectedToNetwork, loggedInOrWorkingOffline]);
 
   // Layer picker:
   useEffect(() => {
@@ -210,11 +215,11 @@ export const Map = ({ children }) => {
 
   useEffect(() => {
     if (!mapReady) return;
-    if (loggedIn) {
+    if (authenticated) {
       addServerBoundariesIfNotExists(serverBoundaries, map.current);
       refreshServerBoundariesOnToggle(serverBoundaries, map.current);
     }
-  }, [serverBoundaries, loggedIn, map.current, mapReady]);
+  }, [serverBoundaries, authenticated, map.current, mapReady]);
 
   useEffect(() => {
     if (!mapReady) return;
@@ -423,13 +428,13 @@ export const Map = ({ children }) => {
   // toggle public map pmtile layer
   useEffect(() => {
     if (!mapReady) return;
-    if (loggedIn) {
+    if (loggedInOrWorkingOffline) {
       toggleLayerOnBool(map.current, 'invasivesbc-pmtile-vector', false);
       toggleLayerOnBool(map.current, 'iapp-pmtile-vector', false);
       toggleLayerOnBool(map.current, 'invasivesbc-pmtile-vector-label', false);
       toggleLayerOnBool(map.current, 'iapp-pmtile-vector-label', false);
     }
-  }, [loggedIn, map.current, mapReady]);
+  }, [loggedInOrWorkingOffline, map.current, mapReady]);
 
   useEffect(() => {
     refreshWhatsHereFeature(map.current, { whatsHereFeature });

app/src/UI/Map2/helpers/layer-definitions.ts

@@ -1,3 +1,4 @@
+import VECTOR_MAP_FONT_FACE from 'constants/vectorMapFontFace';
 import { LayerSpecification, SourceSpecification } from 'maplibre-gl';
 import { MOBILE } from 'state/build-time-config';
 
@@ -86,13 +87,6 @@ export class MapDefinitionEligibilityPredicatesBuilder {
   }
 }
 
-// available from CDN, but not in asset pack
-let VECTOR_MAP_FONT_FACE = 'Open Sans Bold';
-if (MOBILE) {
-  // available locally, but not from CDN
-  VECTOR_MAP_FONT_FACE = 'Noto Sans Bold';
-}
-
 // determines layer stacking and whether the layer is individually toggle-able (eg only one basemap can be active at once)
 export enum MapSourceAndLayerDefinitionMode {
   BASEMAP = 'BASEMAP',