From 48a1869bb56a6f896033a19a6c9a016128dd3a12 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Wed, 19 Nov 2025 12:54:33 -0500
Subject: [PATCH 1/4] Resolve most lint issues

---
 src/components/ColorMapControls.tsx           |  2 +-
 src/components/LayerSelector.tsx              |  4 +-
 src/components/Login.tsx                      |  2 +-
 src/components/OpenLayersMap.tsx              | 71 ++++++++-----------
 .../layers/AddHighlightBoxLayer.tsx           | 11 ++-
 src/components/layers/GraticuleLayer.tsx      |  2 +-
 src/components/layers/HighlightBoxLayer.tsx   |  8 +--
 src/components/layers/SourcesLayer.tsx        |  8 +--
 src/hooks/useQuery.ts                         |  2 +-
 src/utils/layerUtils.ts                       |  2 +-
 10 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/src/components/ColorMapControls.tsx b/src/components/ColorMapControls.tsx
index ab25c46..fca29e7 100644
--- a/src/components/ColorMapControls.tsx
+++ b/src/components/ColorMapControls.tsx
@@ -157,7 +157,7 @@ export function ColorMapControls(props: ColorMapControlsProps) {
     const step = stepCalc >= 1 ? Math.floor(stepCalc) : stepCalc;
 
     return { min, max, step };
-  }, [processedHistogramData?.edges, values, isLogScale]);
+  }, [processedHistogramData?.edges, values]);
 
   /** Change handler for the color map <select> element */
   const handleCmapChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
diff --git a/src/components/LayerSelector.tsx b/src/components/LayerSelector.tsx
index 577b908..861fe1c 100644
--- a/src/components/LayerSelector.tsx
+++ b/src/components/LayerSelector.tsx
@@ -89,7 +89,7 @@ export function LayerSelector({
         'keypress',
         previousLockMenuHandlerRef.current ?? newHandler
       );
-  }, [setLockMenu, lockMenu, menuRef.current]);
+  }, [setLockMenu, lockMenu, menuRef]);
 
   const toggleMenu = useCallback(
     (e: MouseEvent) => {
@@ -102,7 +102,7 @@ export function LayerSelector({
         menuRef.current.classList.add('hide');
       }
     },
-    [menuRef.current, lockMenu]
+    [menuRef, lockMenu]
   );
 
   return (
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 1a7092a..33cc2e0 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -15,7 +15,7 @@ export function Login({
     const hasRefreshToken = getCookie('valid_refresh_token');
 
     setIsAuthenticated(!!hasAccessToken && !!hasRefreshToken);
-  }, []);
+  }, [setIsAuthenticated]);
 
   if (isAuthenticated === null) return null;
 
diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 7ae0a77..324c866 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -104,7 +104,7 @@ export function OpenLayersMap({
     { id: string; flipped: boolean }[]
   >([]);
 
-  const { activeBaselayer, internalBaselayers } = baselayersState;
+  const { activeBaselayer } = baselayersState;
 
   /**
    * Handler fires when user changes map layers. If the units of the new
@@ -175,13 +175,7 @@ export function OpenLayersMap({
         newBaselayer: newActiveBaselayer,
       });
     },
-    [
-      baselayersState.internalBaselayers,
-      baselayersState.activeBaselayer,
-      backHistoryStack,
-      flipTiles,
-      setFlipTiles,
-    ]
+    [baselayersState, dispatchBaselayersChange, flipTiles, setFlipTiles]
   );
 
   const goBack = useCallback(() => {
@@ -194,30 +188,30 @@ export function OpenLayersMap({
     onBaselayerChange(baselayer.id, 'goForward', baselayer.flipped);
   }, [onBaselayerChange, forwardHistoryStack]);
 
-  const tileLayers = useMemo(() => {
-    return internalBaselayers?.map(
-      (layer) =>
-        new TileLayer({
-          properties: { id: 'baselayer-' + layer.layer_id },
-          source: new XYZ({
-            url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
-            tileGrid: new TileGrid({
-              extent: [-180, -90, 180, 90],
-              origin: [-180, 90],
-              tileSize: layer.tile_size,
-              resolutions: getBaselayerResolutions(
-                180,
-                layer.tile_size,
-                layer.number_of_levels - 1
-              ),
-            }),
-            interpolate: false,
-            projection: 'EPSG:4326',
-            tilePixelRatio: layer.tile_size / 256,
+  const activeInternalTileLayer = useMemo(() => {
+    if (assertInternalBaselayer(activeBaselayer)) {
+      const layer = activeBaselayer;
+      return new TileLayer({
+        properties: { id: 'baselayer-' + layer.layer_id },
+        source: new XYZ({
+          url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
+          tileGrid: new TileGrid({
+            extent: [-180, -90, 180, 90],
+            origin: [-180, 90],
+            tileSize: layer.tile_size,
+            resolutions: getBaselayerResolutions(
+              180,
+              layer.tile_size,
+              layer.number_of_levels - 1
+            ),
           }),
-        })
-    );
-  }, [internalBaselayers, flipTiles]);
+          interpolate: false,
+          projection: 'EPSG:4326',
+          tilePixelRatio: layer.tile_size / 256,
+        }),
+      });
+    }
+  }, [flipTiles, activeBaselayer]);
 
   const externalTileLayers = useMemo(() => {
     return EXTERNAL_BASELAYERS.map((b) => {
@@ -347,7 +341,7 @@ export function OpenLayersMap({
         }
       }
     },
-    [externalSearchMarkerRef.current, flipTiles]
+    [externalSearchMarkerRef, flipTiles]
   );
 
   useEffect(() => {
@@ -390,7 +384,7 @@ export function OpenLayersMap({
   }, [flipTiles]);
 
   /**
-   * Updates tilelayers when new baselayer is selected and/or color map settings change
+   * Updates map layer when new baselayer is selected and/or color map settings change
    */
   useEffect(() => {
     if (mapRef.current && activeBaselayer) {
@@ -401,11 +395,8 @@ export function OpenLayersMap({
           mapRef.current?.removeLayer(layer);
         }
       });
-      if (assertInternalBaselayer(activeBaselayer)) {
-        const activeLayer = tileLayers!.find(
-          (t) => t.get('id') === 'baselayer-' + activeBaselayer!.layer_id
-        )!;
-        mapRef.current.addLayer(activeLayer);
+      if (assertInternalBaselayer(activeBaselayer) && activeInternalTileLayer) {
+        mapRef.current.addLayer(activeInternalTileLayer);
       } else {
         const externalBaselayer = EXTERNAL_BASELAYERS.find(
           (b) => b.layer_id === activeBaselayer.layer_id
@@ -419,7 +410,7 @@ export function OpenLayersMap({
         mapRef.current.addLayer(activeLayer);
       }
     }
-  }, [activeBaselayer, tileLayers]);
+  }, [activeBaselayer, activeInternalTileLayer, externalTileLayers]);
 
   /**
    * Add keyboard support for switching baselayers
@@ -474,7 +465,7 @@ export function OpenLayersMap({
       view.setCenter(newCenter);
     }
     setFlipTiles(!flipTiles);
-  }, [setFlipTiles, flipTiles, mapRef.current]);
+  }, [setFlipTiles, flipTiles, mapRef]);
 
   return (
     <div id="map" style={{ cursor: isDrawing ? 'crosshair' : 'auto' }}>
diff --git a/src/components/layers/AddHighlightBoxLayer.tsx b/src/components/layers/AddHighlightBoxLayer.tsx
index 4b59cf6..58fcede 100644
--- a/src/components/layers/AddHighlightBoxLayer.tsx
+++ b/src/components/layers/AddHighlightBoxLayer.tsx
@@ -119,7 +119,14 @@ export function AddHighlightBoxLayer({
         }
       };
     }
-  }, [mapRef.current, isDrawing]);
+  }, [
+    mapRef,
+    isDrawing,
+    drawBoxRef,
+    setIsDrawing,
+    setIsNewBoxDrawn,
+    showMenuOverlay,
+  ]);
 
   const handleAddBoxCleanup = useCallback(() => {
     setNewBoxData(undefined);
@@ -128,7 +135,7 @@ export function AddHighlightBoxLayer({
     if (source) {
       source.clear();
     }
-  }, [drawBoxRef.current]);
+  }, [setIsNewBoxDrawn, drawBoxRef]);
 
   return (
     <>
diff --git a/src/components/layers/GraticuleLayer.tsx b/src/components/layers/GraticuleLayer.tsx
index beb560b..ad3d015 100644
--- a/src/components/layers/GraticuleLayer.tsx
+++ b/src/components/layers/GraticuleLayer.tsx
@@ -77,7 +77,7 @@ export function GraticuleLayer({
       mapRef.current.addLayer(graticule1);
       mapRef.current.addLayer(graticule2);
     }
-  }, [mapRef.current, flipped]);
+  }, [mapRef, flipped, handleLatLabelFormat, handleLonLabelFormat]);
 
   return null;
 }
diff --git a/src/components/layers/HighlightBoxLayer.tsx b/src/components/layers/HighlightBoxLayer.tsx
index 550ae22..e0e4858 100644
--- a/src/components/layers/HighlightBoxLayer.tsx
+++ b/src/components/layers/HighlightBoxLayer.tsx
@@ -141,7 +141,7 @@ export function HighlightBoxLayer({
       map?.addLayer(layer);
       addedLayerIdsRef.current.add(layerId);
     });
-  }, [mapRef.current, highlightBoxes, activeBoxIds, flipped]);
+  }, [mapRef, highlightBoxes, activeBoxIds, flipped]);
 
   useEffect(() => {
     if (!mapRef.current || !boxOverlayRef.current) return;
@@ -152,7 +152,7 @@ export function HighlightBoxLayer({
       });
       mapRef.current.addOverlay(overlayRef.current);
     }
-  }, [mapRef.current, boxOverlayRef.current]);
+  }, [mapRef, boxOverlayRef]);
 
   useEffect(() => {
     if (mapRef.current) {
@@ -162,7 +162,7 @@ export function HighlightBoxLayer({
       handleBoxHoverRef.current = handleBoxHover;
       mapRef.current.on('pointermove', handleBoxHover);
     }
-  }, [mapRef.current, handleBoxHover]);
+  }, [mapRef, handleBoxHover]);
 
   useEffect(() => {
     const map = mapRef.current;
@@ -240,7 +240,7 @@ export function HighlightBoxLayer({
         }
       }
     });
-  }, [flipped, highlightBoxes]);
+  }, [mapRef, flipped, highlightBoxes]);
 
   return (
     <>
diff --git a/src/components/layers/SourcesLayer.tsx b/src/components/layers/SourcesLayer.tsx
index bb7bd45..24d866c 100644
--- a/src/components/layers/SourcesLayer.tsx
+++ b/src/components/layers/SourcesLayer.tsx
@@ -115,7 +115,7 @@ export function SourcesLayer({
 
     sourceGroupRef.current = group;
     map.addLayer(group);
-  }, [sourceGroups, activeSourceGroupIds, flipped]);
+  }, [mapRef, sourceGroups, activeSourceGroupIds, flipped]);
 
   // Set up interaction and popup
   useEffect(() => {
@@ -149,7 +149,7 @@ export function SourcesLayer({
       map.removeOverlay(popupOverlay);
       map.removeInteraction(select);
     };
-  }, [mapRef.current]);
+  }, [mapRef]);
 
   useEffect(() => {
     if (mapRef.current) {
@@ -162,7 +162,7 @@ export function SourcesLayer({
       handleSourceClickRef.current = handleSourceClick;
       selectInteractionRef.current?.on('select', handleSourceClick);
     }
-  }, [handleSourceClick, selectInteractionRef.current]);
+  }, [mapRef, handleSourceClick, selectInteractionRef]);
 
   useEffect(() => {
     const map = mapRef.current;
@@ -190,7 +190,7 @@ export function SourcesLayer({
         });
       }
     });
-  }, [flipped]);
+  }, [mapRef, flipped, selectedSourceId]);
 
   return null;
 }
diff --git a/src/hooks/useQuery.ts b/src/hooks/useQuery.ts
index f324c08..a9ab0a3 100644
--- a/src/hooks/useQuery.ts
+++ b/src/hooks/useQuery.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 type UseQueryParams<T> = {
   queryFn: () => Promise<T>;
-  queryKey: any[];
+  queryKey: unknown[];
   initialData: T;
 };
 
diff --git a/src/utils/layerUtils.ts b/src/utils/layerUtils.ts
index ff32bd7..d7134d0 100644
--- a/src/utils/layerUtils.ts
+++ b/src/utils/layerUtils.ts
@@ -76,7 +76,7 @@ export function transformSources(feature: Feature, flipped: boolean) {
 }
 
 export function transformBoxes(boxExtent: BoxExtent, flipped: boolean) {
-  let newBoxPosition = {
+  const newBoxPosition = {
     ...boxExtent,
   };
 

From 281370719ac9a2eba57bb22128d92a3ef02568f4 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Wed, 19 Nov 2025 13:05:49 -0500
Subject: [PATCH 2/4] Move coordinates logic into its component

---
 src/components/CoordinatesDisplay.tsx | 18 +++++++++++++++---
 src/components/OpenLayersMap.tsx      | 22 ++++++----------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/CoordinatesDisplay.tsx b/src/components/CoordinatesDisplay.tsx
index 02d30e7..f316284 100644
--- a/src/components/CoordinatesDisplay.tsx
+++ b/src/components/CoordinatesDisplay.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, FormEvent } from 'react';
-import { Map, Feature } from 'ol';
+import { Map, Feature, MapBrowserEvent } from 'ol';
 import { Geometry } from 'ol/geom';
 import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
 import { transformGraticuleCoords } from '../utils/layerUtils';
@@ -7,18 +7,19 @@ import './styles/coordinates-display.css';
 import { searchOverlayHelper } from '../utils/externalSearchUtils';
 
 export function CoordinatesDisplay({
-  coordinates,
   flipped,
   mapRef,
   externalSearchRef,
   externalSearchMarkerRef,
 }: {
-  coordinates: number[];
   flipped: boolean;
   mapRef: React.RefObject<Map | null>;
   externalSearchRef: React.RefObject<HTMLDivElement | null>;
   externalSearchMarkerRef: React.RefObject<Feature<Geometry> | null>;
 }) {
+  const [coordinates, setCoordinates] = useState<number[] | undefined>(
+    undefined
+  );
   const [showCoordInputs, setShowCoordInputs] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
   const firstInputRef = useRef<HTMLInputElement>(null);
@@ -54,6 +55,14 @@ export function CoordinatesDisplay({
     };
   }, []);
 
+  useEffect(() => {
+    if (!mapRef.current) return;
+    const currentMapRef = mapRef.current;
+    const updateCoords = (e: MapBrowserEvent) => setCoordinates(e.coordinate);
+    currentMapRef.on('pointermove', updateCoords);
+    return () => currentMapRef.un('pointermove', updateCoords);
+  }, [mapRef]);
+
   const onSubmit = useCallback(
     (e: FormEvent) => {
       e.preventDefault();
@@ -87,6 +96,9 @@ export function CoordinatesDisplay({
     [mapRef, externalSearchRef, externalSearchMarkerRef, flipped]
   );
 
+  // Return early if coordinates aren't defined
+  if (!coordinates) return;
+
   const transformedCoords = transformGraticuleCoords(coordinates, flipped);
   return (
     <form
diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 324c866..31cd166 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -90,9 +90,6 @@ export function OpenLayersMap({
   const previousSearchOverlayHandlerRef =
     useRef<(e: MapBrowserEvent<any>) => void | null>(null);
   const previousKeyboardHandlerRef = useRef<(e: KeyboardEvent) => void>(null);
-  const [coordinates, setCoordinates] = useState<number[] | undefined>(
-    undefined
-  );
   const [isDrawing, setIsDrawing] = useState(false);
   const [isNewBoxDrawn, setIsNewBoxDrawn] = useState(false);
   const [flipTiles, setFlipTiles] = useState(true);
@@ -248,10 +245,6 @@ export function OpenLayersMap({
         view: new View(DEFAULT_INTERNAL_MAP_SETTINGS),
       });
 
-      mapRef.current.on('pointermove', (e) => {
-        setCoordinates(e.coordinate);
-      });
-
       /**
        * BEGIN
        * Set up overlay, markers, and events for the external searches functionality
@@ -539,15 +532,12 @@ export function OpenLayersMap({
         goForward={goForward}
       />
       <GraticuleLayer mapRef={mapRef} flipped={flipTiles} />
-      {coordinates && (
-        <CoordinatesDisplay
-          coordinates={coordinates}
-          flipped={flipTiles}
-          mapRef={mapRef}
-          externalSearchRef={externalSearchRef}
-          externalSearchMarkerRef={externalSearchMarkerRef}
-        />
-      )}
+      <CoordinatesDisplay
+        flipped={flipTiles}
+        mapRef={mapRef}
+        externalSearchRef={externalSearchRef}
+        externalSearchMarkerRef={externalSearchMarkerRef}
+      />
     </div>
   );
 }

From 525c34cae987a86a2554a77031cead59fce015ec Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Thu, 20 Nov 2025 10:45:53 -0500
Subject: [PATCH 3/4] Improve layer creation and updating

---
 src/components/OpenLayersMap.tsx | 186 ++++++++++++++++++++-----------
 1 file changed, 123 insertions(+), 63 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 31cd166..87481e6 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -45,6 +45,7 @@ import {
 import './styles/highlight-box.css';
 import {
   Action,
+  assertExternalBaselayer,
   assertInternalBaselayer,
   CHANGE_BASELAYER,
 } from '../reducers/baselayersReducer';
@@ -84,6 +85,7 @@ export function OpenLayersMap({
   submapData,
 }: MapProps) {
   const mapRef = useRef<Map | null>(null);
+  const internalLayerRef = useRef<TileLayer<XYZ> | null>(null);
   const drawBoxRef = useRef<VectorLayer | null>(null);
   const externalSearchRef = useRef<HTMLDivElement | null>(null);
   const externalSearchMarkerRef = useRef<Feature | null>(null);
@@ -185,53 +187,140 @@ export function OpenLayersMap({
     onBaselayerChange(baselayer.id, 'goForward', baselayer.flipped);
   }, [onBaselayerChange, forwardHistoryStack]);
 
-  const activeInternalTileLayer = useMemo(() => {
-    if (assertInternalBaselayer(activeBaselayer)) {
-      const layer = activeBaselayer;
-      return new TileLayer({
-        properties: { id: 'baselayer-' + layer.layer_id },
+  // Create the external tile layers and memoize them to be stable
+  const externalTileLayers = useMemo(
+    () =>
+      EXTERNAL_BASELAYERS.map((b) => {
+        return new TileLayer({
+          properties: { id: b.layer_id },
+          source: new XYZ({
+            url: typeof b.url === 'string' ? b.url : undefined,
+            tileUrlFunction: typeof b.url !== 'string' ? b.url : undefined,
+            projection: b.projection,
+            tileGrid: new TileGrid({
+              extent: b.extent,
+              resolutions: getBaselayerResolutions(
+                b.extent[2] - b.extent[0],
+                256,
+                b.maxZoom
+              ),
+              origin: [b.extent[0], b.extent[3]],
+            }),
+            wrapX: true,
+          }),
+        });
+      }),
+    []
+  );
+
+  /**
+   * Does the following:
+   * 1. Sets internalLayerRef to a placeholder TileLayer
+   * 2. Adds the internalyerRef to the map
+   * 3. Add all externalTileLayers to the map with visibility set to false
+   */
+  useEffect(() => {
+    if (!mapRef.current) return;
+    if (!internalLayerRef.current) {
+      internalLayerRef.current = new TileLayer({
+        properties: { id: null }, // placeholder
         source: new XYZ({
-          url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
           tileGrid: new TileGrid({
             extent: [-180, -90, 180, 90],
             origin: [-180, 90],
-            tileSize: layer.tile_size,
-            resolutions: getBaselayerResolutions(
-              180,
-              layer.tile_size,
-              layer.number_of_levels - 1
-            ),
+            tileSize: 256, // placeholder
+            resolutions: [], // placeholder
           }),
           interpolate: false,
           projection: 'EPSG:4326',
-          tilePixelRatio: layer.tile_size / 256,
+          tilePixelRatio: 1, // placeholder
         }),
       });
+
+      mapRef.current.addLayer(internalLayerRef.current);
     }
-  }, [flipTiles, activeBaselayer]);
+    externalTileLayers.forEach((l) => {
+      l.setVisible(false);
+      mapRef.current?.addLayer(l);
+    });
+  }, [externalTileLayers]);
 
-  const externalTileLayers = useMemo(() => {
-    return EXTERNAL_BASELAYERS.map((b) => {
-      return new TileLayer({
-        properties: { id: b.layer_id },
-        source: new XYZ({
-          url: typeof b.url === 'string' ? b.url : undefined,
-          tileUrlFunction: typeof b.url !== 'string' ? b.url : undefined,
-          projection: b.projection,
+  /**
+   * Handles baselayer switching and updates URL for internal layers as parameters change;
+   * includes logic to prevent recreating the source and TileGrid for performance and UX
+   * reasons
+   */
+  useEffect(() => {
+    // Handle internal base layers
+    if (assertInternalBaselayer(activeBaselayer) && internalLayerRef.current) {
+      // Note that initial tile layer has null ID
+      const olLayerId = internalLayerRef.current.get('id');
+
+      // Get internal layer's resolutions and generate resolutions with the active baselayer's data
+      // so we can check their equality
+      const currentResolutions = internalLayerRef.current
+        .getSource()
+        ?.getResolutions();
+      const newResolutions = getBaselayerResolutions(
+        180,
+        activeBaselayer.tile_size,
+        activeBaselayer.number_of_levels - 1
+      );
+
+      // If resolutions match, isTileGridValid will be true
+      let isTileGridValid = false;
+      if (currentResolutions) {
+        isTileGridValid = currentResolutions.every(
+          (val, idx) => val === newResolutions[idx]
+        );
+      }
+
+      // Best case we're only updating the URL for the tile request when parameters or internal baselayers are changed
+      const url =
+        `${SERVICE_URL}/maps/${activeBaselayer.layer_id}/{z}/{-y}/{x}/tile.png?` +
+        `cmap=${activeBaselayer.cmap}&vmin=${activeBaselayer.isLogScale ? Math.pow(10, activeBaselayer.vmin) : activeBaselayer.vmin}` +
+        `&vmax=${activeBaselayer.isLogScale ? Math.pow(10, activeBaselayer.vmax) : activeBaselayer.vmax}` +
+        `&flip=${flipTiles}&log_norm=${activeBaselayer.isLogScale}&abs=${activeBaselayer.isAbsoluteValue}`;
+
+      // Check if tile grid needs to be re-created; note that the only time olLayerId is null
+      // is when the internalLayerRef.current has a null ID property.
+      if (olLayerId === null || !isTileGridValid) {
+        const newSource = new XYZ({
+          url,
           tileGrid: new TileGrid({
-            extent: b.extent,
-            resolutions: getBaselayerResolutions(
-              b.extent[2] - b.extent[0],
-              256,
-              b.maxZoom
-            ),
-            origin: [b.extent[0], b.extent[3]],
+            extent: [-180, -90, 180, 90],
+            origin: [-180, 90],
+            tileSize: activeBaselayer.tile_size,
+            resolutions: newResolutions,
           }),
-          wrapX: true,
-        }),
-      });
-    });
-  }, []);
+          interpolate: false,
+          projection: 'EPSG:4326',
+          tilePixelRatio: activeBaselayer.tile_size / 256,
+        });
+        internalLayerRef.current.setSource(newSource);
+      } else {
+        // Simply update the source's URL when tile grid can be preserved
+        internalLayerRef.current.getSource()?.setUrl(url);
+      }
+
+      // Update ID property on the internal layer and show the layer on the map
+      internalLayerRef.current.set('id', activeBaselayer.layer_id);
+      internalLayerRef.current.setVisible(true);
+    }
+
+    const isExternal = assertExternalBaselayer(activeBaselayer);
+
+    // Hide internal layer if active layer is external
+    if (isExternal) {
+      internalLayerRef.current?.setVisible(false);
+    }
+
+    // If active layer is external, set the layer to be visible; otherwise,
+    // all external layers will remain hidden
+    externalTileLayers.forEach((l) =>
+      l.setVisible(isExternal && l.get('id') === activeBaselayer.layer_id)
+    );
+  }, [activeBaselayer, flipTiles, externalTileLayers]);
 
   /**
    * Create the map with a scale control, a layer for the "add box" functionality
@@ -376,35 +465,6 @@ export function OpenLayersMap({
     }
   }, [flipTiles]);
 
-  /**
-   * Updates map layer when new baselayer is selected and/or color map settings change
-   */
-  useEffect(() => {
-    if (mapRef.current && activeBaselayer) {
-      mapRef.current.getAllLayers().forEach((layer) => {
-        const layerId = layer.get('id');
-        if (!layerId) return;
-        if (layerId.includes('baselayer') || layerId.includes('external')) {
-          mapRef.current?.removeLayer(layer);
-        }
-      });
-      if (assertInternalBaselayer(activeBaselayer) && activeInternalTileLayer) {
-        mapRef.current.addLayer(activeInternalTileLayer);
-      } else {
-        const externalBaselayer = EXTERNAL_BASELAYERS.find(
-          (b) => b.layer_id === activeBaselayer.layer_id
-        );
-        const activeLayer = externalTileLayers.find(
-          (t) => t.get('id') === activeBaselayer.layer_id
-        )!;
-
-        if (!externalBaselayer || !activeLayer) return;
-
-        mapRef.current.addLayer(activeLayer);
-      }
-    }
-  }, [activeBaselayer, activeInternalTileLayer, externalTileLayers]);
-
   /**
    * Add keyboard support for switching baselayers
    */

From be5b06893bbdf4d2e22691360577a2b7090868b0 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Tue, 2 Dec 2025 13:04:25 -0500
Subject: [PATCH 4/4] Refactor layer optimizations

---
 src/components/OpenLayersMap.tsx | 53 +++++++++++++-------------------
 1 file changed, 22 insertions(+), 31 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 87481e6..c2f93b4 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -226,7 +226,7 @@ export function OpenLayersMap({
         properties: { id: null }, // placeholder
         source: new XYZ({
           tileGrid: new TileGrid({
-            extent: [-180, -90, 180, 90],
+            extent: [-180, -90, 180, 90], // placeholder
             origin: [-180, 90],
             tileSize: 256, // placeholder
             resolutions: [], // placeholder
@@ -234,6 +234,7 @@ export function OpenLayersMap({
           interpolate: false,
           projection: 'EPSG:4326',
           tilePixelRatio: 1, // placeholder
+          // wrapX: true,
         }),
       });
 
@@ -251,60 +252,50 @@ export function OpenLayersMap({
    * reasons
    */
   useEffect(() => {
+    if (
+      internalLayerRef.current &&
+      internalLayerRef.current.getSource() === null
+    )
+      return;
+
     // Handle internal base layers
     if (assertInternalBaselayer(activeBaselayer) && internalLayerRef.current) {
       // Note that initial tile layer has null ID
-      const olLayerId = internalLayerRef.current.get('id');
-
-      // Get internal layer's resolutions and generate resolutions with the active baselayer's data
-      // so we can check their equality
-      const currentResolutions = internalLayerRef.current
-        .getSource()
-        ?.getResolutions();
-      const newResolutions = getBaselayerResolutions(
-        180,
-        activeBaselayer.tile_size,
-        activeBaselayer.number_of_levels - 1
-      );
-
-      // If resolutions match, isTileGridValid will be true
-      let isTileGridValid = false;
-      if (currentResolutions) {
-        isTileGridValid = currentResolutions.every(
-          (val, idx) => val === newResolutions[idx]
-        );
-      }
+      const olLayerId = internalLayerRef.current.get('layer_id');
+      const activeLayerId = activeBaselayer.layer_id;
 
       // Best case we're only updating the URL for the tile request when parameters or internal baselayers are changed
       const url =
-        `${SERVICE_URL}/maps/${activeBaselayer.layer_id}/{z}/{-y}/{x}/tile.png?` +
+        `${SERVICE_URL}/maps/${activeLayerId}/{z}/{-y}/{x}/tile.png?` +
         `cmap=${activeBaselayer.cmap}&vmin=${activeBaselayer.isLogScale ? Math.pow(10, activeBaselayer.vmin) : activeBaselayer.vmin}` +
         `&vmax=${activeBaselayer.isLogScale ? Math.pow(10, activeBaselayer.vmax) : activeBaselayer.vmax}` +
         `&flip=${flipTiles}&log_norm=${activeBaselayer.isLogScale}&abs=${activeBaselayer.isAbsoluteValue}`;
 
-      // Check if tile grid needs to be re-created; note that the only time olLayerId is null
-      // is when the internalLayerRef.current has a null ID property.
-      if (olLayerId === null || !isTileGridValid) {
+      if (olLayerId === activeLayerId) {
+        // Simply update the source's URL when tile grid can be preserved, i.e. layer_id has not changed
+        internalLayerRef.current.getSource()?.setUrl(url);
+      } else {
         const newSource = new XYZ({
           url,
           tileGrid: new TileGrid({
             extent: [-180, -90, 180, 90],
             origin: [-180, 90],
             tileSize: activeBaselayer.tile_size,
-            resolutions: newResolutions,
+            resolutions: getBaselayerResolutions(
+              180,
+              activeBaselayer.tile_size,
+              activeBaselayer.number_of_levels - 1
+            ),
           }),
           interpolate: false,
           projection: 'EPSG:4326',
           tilePixelRatio: activeBaselayer.tile_size / 256,
         });
         internalLayerRef.current.setSource(newSource);
-      } else {
-        // Simply update the source's URL when tile grid can be preserved
-        internalLayerRef.current.getSource()?.setUrl(url);
       }
 
-      // Update ID property on the internal layer and show the layer on the map
-      internalLayerRef.current.set('id', activeBaselayer.layer_id);
+      // Update attributes on the internal layer and show the layer on the map
+      internalLayerRef.current.set('layer_id', activeBaselayer.layer_id);
       internalLayerRef.current.setVisible(true);
     }