Fall back to an external baselayer if no maps are returned by server

src/App.tsx

@@ -39,36 +39,42 @@ function App() {
       // map baselayers
       const { mapGroups, internalBaselayers } = await fetchMaps();
 
-      // If we end up with no maps for some reason, return early
-      if (!mapGroups.length || !internalBaselayers.length) return;
-
-      // Get what will be the default baselayer's histogram data to set in the reducer state
-      const defaultInitialBaselayer = { ...internalBaselayers[0] };
-      const histogramData = await getHistogramData(
-        defaultInitialBaselayer.layer_id
-      );
-
-      // Check if the default baselayer has an undefined vmin or vmax; if so, set the
-      // vmin and vmax for the baselayer
-      if (
-        defaultInitialBaselayer.vmin === undefined ||
-        defaultInitialBaselayer.vmax === undefined
-      ) {
+      if (!mapGroups.length || !internalBaselayers.length) {
+        // If we end up with no maps, SET_BASELAYERS_STATE will fall back to an external baselayer as its default initial baselayer
+        dispatchBaselayersChange({
+          type: SET_BASELAYERS_STATE,
+          internalBaselayers: [],
+          histogramData: undefined,
+        });
+      } else {
+        // Otherwise, get what will be the default baselayer's histogram data to set in the reducer state
+        const defaultInitialBaselayer = { ...internalBaselayers[0] };
         const histogramData = await getHistogramData(
           defaultInitialBaselayer.layer_id
         );
-        defaultInitialBaselayer.vmin = histogramData.vmin;
-        defaultInitialBaselayer.vmax = histogramData.vmax;
-        internalBaselayers[0] = defaultInitialBaselayer;
-      }
 
-      // Set the baselayersState with the internalBaselayers; note that this action will also set the
-      // activeBaselayer to be finalBands[0]
-      dispatchBaselayersChange({
-        type: SET_BASELAYERS_STATE,
-        internalBaselayers: internalBaselayers,
-        histogramData,
-      });
+        // Check if the default baselayer has an undefined vmin or vmax; if so, set the
+        // vmin and vmax for the baselayer
+        if (
+          defaultInitialBaselayer.vmin === undefined ||
+          defaultInitialBaselayer.vmax === undefined
+        ) {
+          const histogramData = await getHistogramData(
+            defaultInitialBaselayer.layer_id
+          );
+          defaultInitialBaselayer.vmin = histogramData.vmin;
+          defaultInitialBaselayer.vmax = histogramData.vmax;
+          internalBaselayers[0] = defaultInitialBaselayer;
+        }
+
+        // Set the baselayersState with the internalBaselayers; note that this action will also set the
+        // activeBaselayer to be the first element in internalBaselayers
+        dispatchBaselayersChange({
+          type: SET_BASELAYERS_STATE,
+          internalBaselayers: internalBaselayers,
+          histogramData,
+        });
+      }
 
       return mapGroups;
     },

src/components/layers/AperturesLayer.tsx

@@ -55,9 +55,11 @@ export function AperturesLayer({
 
   const isExternalBaselayer = activeBaselayerId?.includes('external');
   const hasMaximum = apertures.length === 3;
-  const title = hasMaximum
-    ? 'At maximum number of data overlays'
-    : 'Add up to 3 data overlays';
+  const title = isExternalBaselayer
+    ? 'This feature is not compatible with external baselayers'
+    : hasMaximum
+      ? 'At maximum number of data overlays'
+      : 'Add up to 3 data overlays';
 
   const aperturesLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
   const aperturesSourceRef = useRef<VectorSource | null>(null);

src/reducers/baselayersReducer.ts

@@ -1,3 +1,4 @@
+import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
 import {
   BaselayersState,
   ExternalBaselayer,
@@ -65,7 +66,7 @@ type ChangeBaselayerAction = {
 type SetBaselayersAction = {
   type: typeof SET_BASELAYERS_STATE;
   internalBaselayers: InternalBaselayer[];
-  histogramData: HistogramResponse;
+  histogramData: HistogramResponse | undefined;
 };
 
 export type Action =
@@ -81,7 +82,12 @@ export function baselayersReducer(state: BaselayersState, action: Action) {
     case 'SET_BASELAYERS_STATE': {
       return {
         internalBaselayers: action.internalBaselayers,
-        activeBaselayer: action.internalBaselayers[0],
+        // If no internalBaselayers are returned from server request, set activeBaselayer to be first external baselayer; note
+        // that the histogramData in this scenario will be set to undefined
+        activeBaselayer:
+          action.internalBaselayers.length === 0
+            ? EXTERNAL_BASELAYERS[0]
+            : action.internalBaselayers[0],
         histogramData: action.histogramData,
       };
     }