From 159c758e156500bb967bb7333e7989762346b244 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 19 May 2025 16:34:03 -0400
Subject: [PATCH 01/17] Fix CSS issue with scale

---
 src/index.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 09831e3..f4667ff 100644
--- a/src/index.css
+++ b/src/index.css
@@ -42,7 +42,6 @@ body {
 
 .scale-control {
   font-size: 1.3em;
-  padding: 1px 0 1px 8px;
   border: 2px solid rgba(0, 0, 0, 0.3);
   border-top: none;
   right: 3em;
@@ -50,6 +49,12 @@ body {
   position: absolute;
   background-color: rgba(255, 255, 255, 0.7);
   box-shadow: 0 0 5px #bbb;
+  box-sizing: border-box;
+}
+
+.scale-control > div {
+  box-sizing: border-box;
+  padding-left: 8px;
 }
 
 .source-markers {

From 55e1fa434b1785540e54c7663e6307a3dbb4d8ea Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Tue, 27 May 2025 13:52:59 -0400
Subject: [PATCH 02/17] Refactor types, state, handlers to allow external
 baselayers

---
 src/App.tsx                      | 68 ++++++++++++++++----------------
 src/components/BoxMenu.tsx       |  1 +
 src/components/LayerSelector.tsx | 18 ++++++++-
 src/configs/mapSettings.ts       | 18 ++++++++-
 src/reducers/baselayerReducer.ts | 67 ++++++++++++++++++++++---------
 src/types/maps.ts                | 12 +++++-
 src/utils/layerUtils.ts          | 13 ++++++
 7 files changed, 140 insertions(+), 57 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ffbb72b..c426179 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { MapMetadataResponse, Band, SourceList } from './types/maps';
 import { ColorMapControls } from './components/ColorMapControls';
 import { fetchProducts } from './utils/fetchUtils';
 import {
+  assertBand,
   baselayerReducer,
   CHANGE_BASELAYER,
   CHANGE_CMAP_TYPE,
@@ -13,6 +14,7 @@ import { useQuery } from './hooks/useQuery';
 import { useHighlightBoxes } from './hooks/useHighlightBoxes';
 import { OpenLayersMap } from './components/OpenLayersMap';
 import { handleSelectChange } from './utils/layerUtils';
+import { EXTERNAL_BASELAYERS } from './configs/mapSettings';
 
 function App() {
   /** contains useful state of the baselayer for tile requests and matplotlib color mapping */
@@ -98,10 +100,12 @@ function App() {
    * TileLayer requests.
    */
   const onBaseLayerChange = useCallback(
-    (selectedBaselayerId: number) => {
-      const newActiveBaselayer = bands?.find(
-        (b) => b.id === selectedBaselayerId
-      );
+    (selectedBaselayerId: string) => {
+      const isExternalBaselayer = selectedBaselayerId.includes('external');
+
+      const newActiveBaselayer = isExternalBaselayer
+        ? EXTERNAL_BASELAYERS.find((b) => b.id === selectedBaselayerId)
+        : bands?.find((b) => b.id === Number(selectedBaselayerId));
 
       if (!newActiveBaselayer) return;
 
@@ -149,7 +153,7 @@ function App() {
   /** Creates an object of data needed by the submap endpoints to download and to add regions. Since it's 
     composed from state at this level, we must construct it here and pass it down. */
   const submapData = useMemo(() => {
-    if (baselayerState.activeBaselayer) {
+    if (assertBand(baselayerState.activeBaselayer)) {
       const { map_id: mapId, id: bandId } = baselayerState.activeBaselayer;
       const { cmap, cmapValues } = baselayerState;
       return {
@@ -162,33 +166,27 @@ function App() {
     }
   }, [baselayerState]);
 
-  if (
-    !baselayerState.activeBaselayer ||
-    !baselayerState.cmap ||
-    !baselayerState.cmapValues
-  ) {
-    return null;
-  } else {
-    const { activeBaselayer, cmap, cmapValues } = baselayerState;
-    return (
-      <>
-        {baselayerState.activeBaselayer && bands && (
-          <OpenLayersMap
-            bands={bands}
-            baselayerState={baselayerState}
-            onBaseLayerChange={onBaseLayerChange}
-            sourceLists={sourceLists}
-            activeSourceListIds={activeSourceListIds}
-            onSelectedSourceListsChange={onSelectedSourceListsChange}
-            highlightBoxes={optimisticHighlightBoxes}
-            setBoxes={updateHighlightBoxes}
-            activeBoxIds={activeBoxIds}
-            setActiveBoxIds={setActiveBoxIds}
-            onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
-            submapData={submapData}
-            addOptimisticHighlightBox={addOptimisticHighlightBox}
-          />
-        )}
+  const { activeBaselayer, cmap, cmapValues } = baselayerState;
+  return (
+    <>
+      {baselayerState.activeBaselayer && bands && (
+        <OpenLayersMap
+          bands={bands}
+          baselayerState={baselayerState}
+          onBaseLayerChange={onBaseLayerChange}
+          sourceLists={sourceLists}
+          activeSourceListIds={activeSourceListIds}
+          onSelectedSourceListsChange={onSelectedSourceListsChange}
+          highlightBoxes={optimisticHighlightBoxes}
+          setBoxes={updateHighlightBoxes}
+          activeBoxIds={activeBoxIds}
+          setActiveBoxIds={setActiveBoxIds}
+          onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
+          submapData={submapData}
+          addOptimisticHighlightBox={addOptimisticHighlightBox}
+        />
+      )}
+      {assertBand(activeBaselayer) && cmap && cmapValues && (
         <ColorMapControls
           values={[cmapValues.min, cmapValues.max]}
           onCmapValuesChange={onCmapValuesChange}
@@ -198,9 +196,9 @@ function App() {
           units={activeBaselayer.units}
           quantity={activeBaselayer.quantity}
         />
-      </>
-    );
-  }
+      )}
+    </>
+  );
 }
 
 export default App;
diff --git a/src/components/BoxMenu.tsx b/src/components/BoxMenu.tsx
index 2d26190..e987ad1 100644
--- a/src/components/BoxMenu.tsx
+++ b/src/components/BoxMenu.tsx
@@ -48,6 +48,7 @@ export function BoxMenu({
                 <button
                   className="area-select-button highlight-box-button"
                   key={option.display}
+                  disabled={!submapData}
                   onClick={() => {
                     if (submapData) {
                       downloadSubmap(
diff --git a/src/components/LayerSelector.tsx b/src/components/LayerSelector.tsx
index 44a4877..dce2488 100644
--- a/src/components/LayerSelector.tsx
+++ b/src/components/LayerSelector.tsx
@@ -4,6 +4,7 @@ import { makeLayerName } from '../utils/layerUtils';
 import { LayersIcon } from './icons/LayersIcon';
 import './styles/layer-selector.css';
 import { MapProps } from './OpenLayersMap';
+import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
 
 interface Props
   extends Omit<
@@ -14,7 +15,7 @@ interface Props
     | 'setBoxes'
     | 'addOptimisticHighlightBox'
   > {
-  activeBaselayerId?: number;
+  activeBaselayerId?: number | string;
   sourceLists: SourceList[];
 }
 
@@ -65,11 +66,24 @@ export function LayerSelector({
                 value={band.id}
                 name="baselayer"
                 checked={band.id === activeBaselayerId}
-                onChange={(e) => onBaseLayerChange(Number(e.target.value))}
+                onChange={(e) => onBaseLayerChange(e.target.value)}
               />
               <label htmlFor={String(band.id)}>{makeLayerName(band)}</label>
             </div>
           ))}
+          {EXTERNAL_BASELAYERS.map((bl) => (
+            <div className="input-container" key={bl.id}>
+              <input
+                type="radio"
+                id={bl.id}
+                value={bl.id}
+                name="baselayer"
+                checked={bl.id === activeBaselayerId}
+                onChange={(e) => onBaseLayerChange(e.target.value)}
+              />
+              <label htmlFor={bl.id}>{bl.name}</label>
+            </div>
+          ))}
         </fieldset>
         {sourceLists.length && (
           <fieldset>
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index 19db8ff..b84d9db 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -1,9 +1,11 @@
+import { ExternalBaselayer } from '../types/maps';
+
 // Uses a user-defined VITE_SERVICE_URL environment variable for development; otherwise
 // uses the window.location object's href string, minus the trailing forward slash
 export const SERVICE_URL: string =
   import.meta.env.VITE_SERVICE_URL || window.location.href.slice(0, -1);
 
-export const DEFAULT_MAP_SETTINGS = {
+export const DEFAULT_INTERNAL_MAP_SETTINGS = {
   projection: 'EPSG:4326',
   center: [0, 0],
   zoom: 0,
@@ -12,5 +14,19 @@ export const DEFAULT_MAP_SETTINGS = {
   multiWorld: true,
 };
 
+export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
+  {
+    id: 'external-unwise-neo4',
+    name: 'Legacy Survey | unWISE neo4',
+    projection: 'EPSG:3857',
+    url: 'http://imagine.legacysurvey.org/static/tiles/unwise-neo4/1/{z}/{x}/{y}.jpg',
+    extent: [0, -90, 360, 90],
+    // url: function ([z, x, y]) {
+    //   const tileX = (x + 2 ** z) % (2 ** z); // wrap-around X at 360° RA
+    //   return `http://imagine.legacysurvey.org/static/tiles/unwise-neo4/1/${z}/${tileX}/${y}.jpg`;
+    // },
+  },
+];
+
 // related to controls
 export const NUMBER_OF_FIXED_COORDINATE_DECIMALS = 5;
diff --git a/src/reducers/baselayerReducer.ts b/src/reducers/baselayerReducer.ts
index 9487317..3eb4640 100644
--- a/src/reducers/baselayerReducer.ts
+++ b/src/reducers/baselayerReducer.ts
@@ -1,4 +1,16 @@
-import { Band, BaselayerState } from '../types/maps';
+import { Band, BaselayerState, ExternalBaselayer } from '../types/maps';
+
+export function assertExternalBaselayer(
+  baselayer: Band | ExternalBaselayer | undefined
+): baselayer is ExternalBaselayer {
+  return baselayer !== undefined && 'url' in baselayer;
+}
+
+export function assertBand(
+  baselayer: Band | ExternalBaselayer | undefined
+): baselayer is Band {
+  return baselayer !== undefined && 'map_id' in baselayer;
+}
 
 export const initialBaselayerState: BaselayerState = {
   activeBaselayer: undefined,
@@ -25,7 +37,7 @@ type ChangeCmapValuesAction = {
 
 type ChangeBaselayer = {
   type: typeof CHANGE_BASELAYER;
-  newBaselayer: Band;
+  newBaselayer: Band | ExternalBaselayer;
 };
 
 type Action = ChangeCmapAction | ChangeCmapValuesAction | ChangeBaselayer;
@@ -49,27 +61,46 @@ export function baselayerReducer(state: BaselayerState, action: Action) {
     }
     case 'CHANGE_BASELAYER': {
       const { newBaselayer } = action;
-      /**
-       * If we've yet to set an activeBaselayer or the units change between baselayers,
-       * we need to update the state of cmap properties to the band's recommended values
-       */
-      if (
-        !state.activeBaselayer ||
-        newBaselayer.units !== state.activeBaselayer.units
-      ) {
+
+      if (assertExternalBaselayer(newBaselayer)) {
         return {
-          cmap: newBaselayer.recommended_cmap,
-          cmapValues: {
-            min: newBaselayer.recommended_cmap_min,
-            max: newBaselayer.recommended_cmap_max,
-          },
+          cmap: undefined,
+          cmapValues: undefined,
           activeBaselayer: newBaselayer,
         };
-      } else {
+      }
+
+      if (assertBand(newBaselayer)) {
         /**
-         * Since units aren't changing and we have an already-defined activeBaselayer,
-         * simply set a new activeBaselayer
+         * If we've yet to set an activeBaselayer or we're switching from ExternalBaselayer to a
+         * Band or the units change between Band baselayers, we need to update the state of cmap
+         * properties to the band's recommended values
          */
+        if (
+          !state.activeBaselayer ||
+          assertExternalBaselayer(state.activeBaselayer) ||
+          newBaselayer.units !== state.activeBaselayer.units
+        ) {
+          return {
+            cmap: newBaselayer.recommended_cmap,
+            cmapValues: {
+              min: newBaselayer.recommended_cmap_min,
+              max: newBaselayer.recommended_cmap_max,
+            },
+            activeBaselayer: newBaselayer,
+          };
+        } else {
+          /**
+           * Since units aren't changing and we have an already-defined activeBaselayer,
+           * simply set a new activeBaselayer
+           */
+          return {
+            ...state,
+            activeBaselayer: action.newBaselayer,
+          };
+        }
+      } else {
+        /** Fallback to only updating activeBaselayer */
         return {
           ...state,
           activeBaselayer: action.newBaselayer,
diff --git a/src/types/maps.ts b/src/types/maps.ts
index 04c2288..273206e 100644
--- a/src/types/maps.ts
+++ b/src/types/maps.ts
@@ -83,9 +83,19 @@ export type Box = {
   bottom_right_dec: number;
 };
 
+type TileUrlFunction = (x: number[]) => string;
+
+export type ExternalBaselayer = {
+  id: string;
+  name: string;
+  projection: string;
+  url: string | TileUrlFunction;
+  extent: number[];
+};
+
 export type BaselayerState = {
   /** the active baselayer selected in the map's legend */
-  activeBaselayer?: Band;
+  activeBaselayer?: Band | ExternalBaselayer;
   /** the cmap matplotlib parameters used in the histogram components and tile request */
   cmap?: string;
   /** values for vmin and vmax matplotlib parameters used in histogram components and tile requests */
diff --git a/src/utils/layerUtils.ts b/src/utils/layerUtils.ts
index eed8afc..ff41f2d 100644
--- a/src/utils/layerUtils.ts
+++ b/src/utils/layerUtils.ts
@@ -26,3 +26,16 @@ export function handleSelectChange(
     );
   }
 }
+
+export function getBaselayerResolutions(
+  totalDegrees: number,
+  tileSize: number,
+  maxZoom: number
+) {
+  const resolutionZ0 = totalDegrees / tileSize;
+  const resolutions = [];
+  for (let i = 0; i < maxZoom; i++) {
+    resolutions.push(resolutionZ0 / 2 ** i);
+  }
+  return resolutions;
+}

From 378b2dd4a690333b1cd28100a6cfd4f894bad32f Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Wed, 28 May 2025 14:41:24 -0400
Subject: [PATCH 03/17] Enable reprojection from EPSG:4326 to EPSG:3857 and
 vice versa

---
 src/components/OpenLayersMap.tsx | 181 +++++++++++++++++++++++++------
 src/configs/mapSettings.ts       |   8 +-
 src/utils/layerUtils.ts          |   4 +-
 3 files changed, 155 insertions(+), 38 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index d8535d1..3ef7060 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -1,4 +1,11 @@
-import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Map, View, Feature } from 'ol';
 import { TileGrid } from 'ol/tilegrid';
 import { Tile as TileLayer } from 'ol/layer';
@@ -9,6 +16,12 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Point } from 'ol/geom';
 import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style';
+import {
+  get as getProjection,
+  getPointResolution,
+  transform,
+  toLonLat,
+} from 'ol/proj.js';
 import 'ol/ol.css';
 import {
   Band,
@@ -17,7 +30,11 @@ import {
   SourceList,
   SubmapData,
 } from '../types/maps';
-import { DEFAULT_MAP_SETTINGS, SERVICE_URL } from '../configs/mapSettings';
+import {
+  DEFAULT_INTERNAL_MAP_SETTINGS,
+  EXTERNAL_BASELAYERS,
+  SERVICE_URL,
+} from '../configs/mapSettings';
 import { CoordinatesDisplay } from './CoordinatesDisplay';
 import { LayerSelector } from './LayerSelector';
 import { CropIcon } from './icons/CropIcon';
@@ -28,11 +45,13 @@ import { AddHighlightBoxLayer } from './layers/AddHighlightBoxLayer';
 import { generateSearchContent } from '../utils/externalSearchUtils';
 import './styles/highlight-controls.css';
 import './styles/area-selection.css';
+import { assertBand } from '../reducers/baselayerReducer';
+import { getBaselayerResolutions } from '../utils/layerUtils';
 
 export type MapProps = {
   bands: Band[];
   baselayerState: BaselayerState;
-  onBaseLayerChange: (baselayerId: number) => void;
+  onBaseLayerChange: (baselayerId: string) => void;
   sourceLists?: SourceList[];
   activeSourceListIds: number[];
   onSelectedSourceListsChange: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -72,12 +91,6 @@ export function OpenLayersMap({
 
   const tileLayers = useMemo(() => {
     return bands.map((band) => {
-      const resolutionZ0 = 180 / band.tile_size;
-      const levels = band.levels;
-      const resolutions = [];
-      for (let i = 0; i < levels; i++) {
-        resolutions.push(resolutionZ0 / 2 ** i);
-      }
       return new TileLayer({
         properties: { id: 'baselayer-' + band.id },
         source: new XYZ({
@@ -86,7 +99,11 @@ export function OpenLayersMap({
             extent: [-180, -90, 180, 90],
             origin: [-180, 90],
             tileSize: band.tile_size,
-            resolutions,
+            resolutions: getBaselayerResolutions(
+              180,
+              band.tile_size,
+              band.levels
+            ),
           }),
           interpolate: false,
           projection: 'EPSG:4326',
@@ -96,6 +113,29 @@ export function OpenLayersMap({
     });
   }, [bands]);
 
+  const externalTileLayers = useMemo(() => {
+    return EXTERNAL_BASELAYERS.map((b) => {
+      return new TileLayer({
+        properties: { id: b.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,
+              9
+            ),
+            origin: [b.extent[0], b.extent[3]],
+          }),
+          wrapX: true,
+        }),
+      });
+    });
+  }, []);
+
   /**
    * Create the map with a scale control, a layer for the "add box" functionality
    * and a 'pointermove' interaction for the coordinate display
@@ -105,11 +145,17 @@ export function OpenLayersMap({
     if (!stableMapRef) {
       mapRef.current = new Map({
         target: 'map',
-        view: new View(DEFAULT_MAP_SETTINGS),
+        view: new View(DEFAULT_INTERNAL_MAP_SETTINGS),
       });
 
       mapRef.current.on('pointermove', (e) => {
-        setCoordinates(e.coordinate);
+        const units = mapRef.current?.getView().getProjection().getUnits();
+        if (units === 'm') {
+          const lonLat = toLonLat(e.coordinate);
+          setCoordinates(lonLat);
+        } else {
+          setCoordinates(e.coordinate);
+        }
       });
 
       /**
@@ -208,6 +254,50 @@ export function OpenLayersMap({
     };
   }, []);
 
+  const onChangeProjection = useCallback(
+    (projection: string) => {
+      // (projection: string, extent: number[]) => {
+      if (mapRef.current) {
+        const currentView = mapRef.current.getView();
+        const currentProjection = currentView.getProjection();
+        const newProjection = getProjection(projection)!;
+        const currentResolution = currentView.getResolution();
+        const currentCenter = currentView.getCenter() ?? [0, 0];
+        const currentRotation = currentView.getRotation();
+        const newCenter = transform(
+          currentCenter,
+          currentProjection,
+          newProjection
+        );
+        const currentMPU = currentProjection.getMetersPerUnit();
+        const newMPU = newProjection!.getMetersPerUnit();
+        const currentPointResolution =
+          getPointResolution(
+            currentProjection,
+            1 / currentMPU!,
+            currentCenter,
+            'm'
+          ) * currentMPU!;
+        const newPointResolution =
+          getPointResolution(newProjection!, 1 / newMPU!, newCenter, 'm') *
+          newMPU!;
+        const newResolution =
+          (currentResolution! * currentPointResolution) / newPointResolution;
+        const newView = new View({
+          center: newCenter,
+          resolution: newResolution,
+          rotation: currentRotation,
+          projection: newProjection,
+          // extent,
+          showFullExtent: true,
+          multiWorld: true,
+        });
+        mapRef.current.setView(newView);
+      }
+    },
+    [mapRef.current]
+  );
+
   /**
    * Updates tilelayers when new baselayer is selected and/or color map settings change
    */
@@ -216,33 +306,54 @@ export function OpenLayersMap({
       mapRef.current.getAllLayers().forEach((layer) => {
         const layerId = layer.get('id');
         if (!layerId) return;
-        if (layerId.includes('baselayer')) {
+        if (layerId.includes('baselayer') || layerId.includes('external')) {
           mapRef.current?.removeLayer(layer);
         }
       });
-      const resolutionZ0 = 180 / activeBaselayer.tile_size;
-      const levels = activeBaselayer.levels;
-      const resolutions = [];
-      for (let i = 0; i < levels; i++) {
-        resolutions.push(resolutionZ0 / 2 ** i);
+      if (assertBand(activeBaselayer)) {
+        const resolutionZ0 = 180 / activeBaselayer.tile_size;
+        const levels = activeBaselayer.levels;
+        const resolutions = [];
+        for (let i = 0; i < levels; i++) {
+          resolutions.push(resolutionZ0 / 2 ** i);
+        }
+        const source = new XYZ({
+          url: `${SERVICE_URL}/maps/${activeBaselayer.map_id}/${activeBaselayer.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}`,
+          tileGrid: new TileGrid({
+            extent: [-180, -90, 180, 90],
+            origin: [-180, 90],
+            tileSize: activeBaselayer.tile_size,
+            resolutions,
+          }),
+          interpolate: false,
+          projection: 'EPSG:4326',
+          tilePixelRatio: activeBaselayer.tile_size / 256,
+        });
+        const activeLayer = tileLayers.find(
+          (t) => t.get('id') === 'baselayer-' + activeBaselayer!.id
+        )!;
+        activeLayer.setSource(source);
+        mapRef.current.addLayer(activeLayer);
+        onChangeProjection(
+          DEFAULT_INTERNAL_MAP_SETTINGS.projection
+          // DEFAULT_INTERNAL_MAP_SETTINGS.extent,
+        );
+      } else {
+        const externalBaselayer = EXTERNAL_BASELAYERS.find(
+          (b) => b.id === activeBaselayer.id
+        );
+        const activeLayer = externalTileLayers.find(
+          (t) => t.get('id') === activeBaselayer.id
+        )!;
+
+        if (!externalBaselayer || !activeLayer) return;
+
+        onChangeProjection(
+          externalBaselayer.projection
+          // externalBaselayer.extent,
+        );
+        mapRef.current.addLayer(activeLayer);
       }
-      const source = new XYZ({
-        url: `${SERVICE_URL}/maps/${activeBaselayer.map_id}/${activeBaselayer.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}`,
-        tileGrid: new TileGrid({
-          extent: [-180, -90, 180, 90],
-          origin: [-180, 90],
-          tileSize: activeBaselayer.tile_size,
-          resolutions,
-        }),
-        interpolate: false,
-        projection: 'EPSG:4326',
-        tilePixelRatio: activeBaselayer.tile_size / 256,
-      });
-      const activeLayer = tileLayers.find(
-        (t) => t.get('id') === 'baselayer-' + activeBaselayer!.id
-      )!;
-      activeLayer.setSource(source);
-      mapRef.current.addLayer(activeLayer);
     }
   }, [activeBaselayer, cmap, cmapValues, tileLayers]);
 
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index b84d9db..121314e 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -1,3 +1,4 @@
+import { transformExtent } from 'ol/proj';
 import { ExternalBaselayer } from '../types/maps';
 
 // Uses a user-defined VITE_SERVICE_URL environment variable for development; otherwise
@@ -20,9 +21,14 @@ export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
     name: 'Legacy Survey | unWISE neo4',
     projection: 'EPSG:3857',
     url: 'http://imagine.legacysurvey.org/static/tiles/unwise-neo4/1/{z}/{x}/{y}.jpg',
-    extent: [0, -90, 360, 90],
+    extent: transformExtent(
+      [-180, -85.06, 180, 85.06],
+      'EPSG:4326',
+      'EPSG:3857'
+    ),
     // url: function ([z, x, y]) {
     //   const tileX = (x + 2 ** z) % (2 ** z); // wrap-around X at 360° RA
+    //   // const tileX = ((x + 2) ** z) % (2 ** z); // wrap-around X at 360° RA
     //   return `http://imagine.legacysurvey.org/static/tiles/unwise-neo4/1/${z}/${tileX}/${y}.jpg`;
     // },
   },
diff --git a/src/utils/layerUtils.ts b/src/utils/layerUtils.ts
index ff41f2d..7158f00 100644
--- a/src/utils/layerUtils.ts
+++ b/src/utils/layerUtils.ts
@@ -28,11 +28,11 @@ export function handleSelectChange(
 }
 
 export function getBaselayerResolutions(
-  totalDegrees: number,
+  worldWidth: number,
   tileSize: number,
   maxZoom: number
 ) {
-  const resolutionZ0 = totalDegrees / tileSize;
+  const resolutionZ0 = worldWidth / tileSize;
   const resolutions = [];
   for (let i = 0; i < maxZoom; i++) {
     resolutions.push(resolutionZ0 / 2 ** i);

From 1162d13976e6cfbbfcbf535cf6d164546dd627d3 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Wed, 28 May 2025 16:12:39 -0400
Subject: [PATCH 04/17] Transform coords for sources and search overlay for
 different projections

---
 src/components/OpenLayersMap.tsx       | 12 ++++++++---
 src/components/layers/SourcesLayer.tsx | 29 +++++++++++++++++++-------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 3ef7060..08f2d11 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -210,11 +210,17 @@ export function OpenLayersMap({
                 );
               }
             }
+            const mapProj = e.map.getView().getProjection();
+            let searchCoords = e.coordinate;
+            let mapPosition = e.coordinate;
+            if (mapProj.getCode() === 'EPSG:3857') {
+              searchCoords = toLonLat(e.coordinate);
+            }
             externalSearchRef.current?.append(
-              generateSearchContent(e.coordinate)
+              generateSearchContent(searchCoords)
             );
-            simbadOverlay.setPosition(e.coordinate);
-            externalSearchMarker.setGeometry(new Point(e.coordinate));
+            simbadOverlay.setPosition(mapPosition);
+            externalSearchMarker.setGeometry(new Point(mapPosition));
           }
         } else {
           const simbadOverlay = e.map.getOverlayById('simbad-search-overlay');
diff --git a/src/components/layers/SourcesLayer.tsx b/src/components/layers/SourcesLayer.tsx
index 877c171..027667b 100644
--- a/src/components/layers/SourcesLayer.tsx
+++ b/src/components/layers/SourcesLayer.tsx
@@ -8,6 +8,7 @@ import { Circle } from 'ol/geom';
 import Select from 'ol/interaction/Select.js';
 import { click } from 'ol/events/condition';
 import { MapProps } from '../OpenLayersMap';
+import { transform } from 'ol/proj';
 
 type SourcesLayerProps = {
   sourceLists: MapProps['sourceLists'];
@@ -27,6 +28,7 @@ export function SourcesLayer({
 
   const sourceOverlays = useMemo(() => {
     if (!sourceLists.length) return [];
+    const projection = mapRef.current?.getView().getProjection();
     return sourceLists
       .filter((sl) => activeSourceListIds.includes(sl.id))
       .map(
@@ -38,13 +40,18 @@ export function SourcesLayer({
             layers: [
               new VectorLayer({
                 source: new VectorSource({
-                  features: sl.sources.map(
-                    (source) =>
-                      new Feature({
-                        geometry: new Circle([source.ra, source.dec], 1),
-                        sourceData: source,
-                      })
-                  ),
+                  features: sl.sources.map((source) => {
+                    let coords = [source.ra, source.dec];
+                    let rad = 1;
+                    if (projection && projection.getCode() === 'EPSG:3857') {
+                      coords = transform(coords, 'EPSG:4326', 'EPSG:3857');
+                      rad = 100000;
+                    }
+                    return new Feature({
+                      geometry: new Circle(coords, rad),
+                      sourceData: source,
+                    });
+                  }),
                 }),
                 style: {
                   'stroke-width': 2,
@@ -97,9 +104,15 @@ export function SourcesLayer({
           return;
         }
 
+        const projection = mapRef.current?.getView().getProjection();
+
         selectedFeatures.forEach((feature) => {
           const sourceData = feature.get('sourceData') as Source;
-          popupOverlay.setPosition([sourceData.ra, sourceData.dec]);
+          let coords = [sourceData.ra, sourceData.dec];
+          if (projection && projection.getCode() === 'EPSG:3857') {
+            coords = transform(coords, 'EPSG:4326', 'EPSG:3857');
+          }
+          popupOverlay.setPosition(coords);
           setSelectedSourceData(sourceData);
         });
       });

From 80a6049572e89de1eb2b5fec09adca63d5444d67 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 9 Jun 2025 14:34:41 -0400
Subject: [PATCH 05/17] Fix layer selector panel logic for empty arrays

---
 src/components/LayerSelector.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/LayerSelector.tsx b/src/components/LayerSelector.tsx
index dce2488..00e84f4 100644
--- a/src/components/LayerSelector.tsx
+++ b/src/components/LayerSelector.tsx
@@ -85,7 +85,7 @@ export function LayerSelector({
             </div>
           ))}
         </fieldset>
-        {sourceLists.length && (
+        {sourceLists.length ? (
           <fieldset>
             <legend>Source catalogs</legend>
             {sourceLists.map((sl) => (
@@ -101,8 +101,8 @@ export function LayerSelector({
               </div>
             ))}
           </fieldset>
-        )}
-        {highlightBoxes && (
+        ) : null}
+        {highlightBoxes && highlightBoxes.length ? (
           <fieldset>
             <legend>Highlight regions</legend>
             {highlightBoxes.map((box) => (
@@ -118,7 +118,7 @@ export function LayerSelector({
               </div>
             ))}
           </fieldset>
-        )}
+        ) : null}
       </div>
     </>
   );

From 6e86567400fbe33b2ff5416a3871cec87f9d50c1 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 9 Jun 2025 14:48:31 -0400
Subject: [PATCH 06/17] Add higher precision to reprojection extent

---
 src/components/OpenLayersMap.tsx | 20 +++++++++++++++++---
 src/configs/mapSettings.ts       |  4 +++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 08f2d11..0040af2 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -86,6 +86,7 @@ export function OpenLayersMap({
     undefined
   );
   const [isDrawing, setIsDrawing] = useState(false);
+  const [flipTiles, setFlipTiles] = useState(false);
 
   const { activeBaselayer, cmap, cmapValues } = baselayerState;
 
@@ -94,7 +95,7 @@ export function OpenLayersMap({
       return new TileLayer({
         properties: { id: 'baselayer-' + band.id },
         source: new XYZ({
-          url: `${SERVICE_URL}/maps/${band.map_id}/${band.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}`,
+          url: `${SERVICE_URL}/maps/${band.map_id}/${band.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}&flip=${flipTiles}`,
           tileGrid: new TileGrid({
             extent: [-180, -90, 180, 90],
             origin: [-180, 90],
@@ -324,7 +325,7 @@ export function OpenLayersMap({
           resolutions.push(resolutionZ0 / 2 ** i);
         }
         const source = new XYZ({
-          url: `${SERVICE_URL}/maps/${activeBaselayer.map_id}/${activeBaselayer.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}`,
+          url: `${SERVICE_URL}/maps/${activeBaselayer.map_id}/${activeBaselayer.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}&flip=${flipTiles}`,
           tileGrid: new TileGrid({
             extent: [-180, -90, 180, 90],
             origin: [-180, 90],
@@ -361,10 +362,23 @@ export function OpenLayersMap({
         mapRef.current.addLayer(activeLayer);
       }
     }
-  }, [activeBaselayer, cmap, cmapValues, tileLayers]);
+  }, [activeBaselayer, cmap, cmapValues, tileLayers, flipTiles]);
 
   return (
     <div id="map" style={{ cursor: isDrawing ? 'crosshair' : 'auto' }}>
+      <div style={{ position: 'absolute', left: 50, top: 10, zIndex: 5000 }}>
+        <label style={{ display: 'flex', flexDirection: 'row', gap: 5 }}>
+          <input
+            type="checkbox"
+            checked={flipTiles}
+            onChange={(e) => {
+              console.log(e.target.checked);
+              setFlipTiles(!flipTiles);
+            }}
+          />
+          {flipTiles ? '360 < ra < 0' : '-180 < ra < 180'}
+        </label>
+      </div>
       <div ref={externalSearchRef} className="ol-popup"></div>
       <div className="ol-zoom ol-control draw-box-btn-container">
         <button
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index 121314e..4a8f910 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -15,6 +15,8 @@ export const DEFAULT_INTERNAL_MAP_SETTINGS = {
   multiWorld: true,
 };
 
+const MERCATOR_MAX_LAT = 85.0511287798066;
+
 export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
   {
     id: 'external-unwise-neo4',
@@ -22,7 +24,7 @@ export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
     projection: 'EPSG:3857',
     url: 'http://imagine.legacysurvey.org/static/tiles/unwise-neo4/1/{z}/{x}/{y}.jpg',
     extent: transformExtent(
-      [-180, -85.06, 180, 85.06],
+      [-180, -MERCATOR_MAX_LAT, 180, MERCATOR_MAX_LAT],
       'EPSG:4326',
       'EPSG:3857'
     ),

From f36c53e7927de8a8cc15195f5b84a3bd2328c755 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Wed, 11 Jun 2025 10:48:58 -0400
Subject: [PATCH 07/17] Let OL handle reprojection

---
 src/components/OpenLayersMap.tsx | 40 +++++++++++++++++++++++++-------
 src/configs/mapSettings.ts       |  9 ++++---
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 0040af2..59a1ede 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -21,6 +21,7 @@ import {
   getPointResolution,
   transform,
   toLonLat,
+  getTransform,
 } from 'ol/proj.js';
 import 'ol/ol.css';
 import {
@@ -31,8 +32,10 @@ import {
   SubmapData,
 } from '../types/maps';
 import {
+  CAR_BBOX,
   DEFAULT_INTERNAL_MAP_SETTINGS,
   EXTERNAL_BASELAYERS,
+  MERCATOR_BBOX,
   SERVICE_URL,
 } from '../configs/mapSettings';
 import { CoordinatesDisplay } from './CoordinatesDisplay';
@@ -47,6 +50,7 @@ import './styles/highlight-controls.css';
 import './styles/area-selection.css';
 import { assertBand } from '../reducers/baselayerReducer';
 import { getBaselayerResolutions } from '../utils/layerUtils';
+import { applyTransform } from 'ol/extent';
 
 export type MapProps = {
   bands: Band[];
@@ -268,6 +272,18 @@ export function OpenLayersMap({
         const currentView = mapRef.current.getView();
         const currentProjection = currentView.getProjection();
         const newProjection = getProjection(projection)!;
+        const fromLonLat = getTransform('EPSG:4326', newProjection);
+        const bbox = projection === 'EPSG:4326' ? CAR_BBOX : MERCATOR_BBOX;
+        newProjection.setWorldExtent(bbox);
+
+        // approximate calculation of projection extent,
+        // checking if the world extent crosses the dateline
+        if (bbox[0] > bbox[2]) {
+          bbox[2] += 360;
+        }
+
+        const extent = applyTransform(bbox, fromLonLat, undefined, 8);
+
         const currentResolution = currentView.getResolution();
         const currentCenter = currentView.getCenter() ?? [0, 0];
         const currentRotation = currentView.getRotation();
@@ -290,16 +306,22 @@ export function OpenLayersMap({
           newMPU!;
         const newResolution =
           (currentResolution! * currentPointResolution) / newPointResolution;
+
+        newProjection.setExtent(extent);
+
         const newView = new View({
           center: newCenter,
           resolution: newResolution,
           rotation: currentRotation,
           projection: newProjection,
-          // extent,
+          extent,
           showFullExtent: true,
           multiWorld: true,
         });
+
         mapRef.current.setView(newView);
+        newView.fit(extent);
+        newView.setCenter(newCenter);
       }
     },
     [mapRef.current]
@@ -341,10 +363,10 @@ export function OpenLayersMap({
         )!;
         activeLayer.setSource(source);
         mapRef.current.addLayer(activeLayer);
-        onChangeProjection(
-          DEFAULT_INTERNAL_MAP_SETTINGS.projection
-          // DEFAULT_INTERNAL_MAP_SETTINGS.extent,
-        );
+        // onChangeProjection(
+        //   DEFAULT_INTERNAL_MAP_SETTINGS.projection
+        //   // DEFAULT_INTERNAL_MAP_SETTINGS.extent,
+        // );
       } else {
         const externalBaselayer = EXTERNAL_BASELAYERS.find(
           (b) => b.id === activeBaselayer.id
@@ -355,10 +377,10 @@ export function OpenLayersMap({
 
         if (!externalBaselayer || !activeLayer) return;
 
-        onChangeProjection(
-          externalBaselayer.projection
-          // externalBaselayer.extent,
-        );
+        // onChangeProjection(
+        //   externalBaselayer.projection
+        //   // externalBaselayer.extent,
+        // );
         mapRef.current.addLayer(activeLayer);
       }
     }
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index 4a8f910..a9a8417 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -6,17 +6,20 @@ import { ExternalBaselayer } from '../types/maps';
 export const SERVICE_URL: string =
   import.meta.env.VITE_SERVICE_URL || window.location.href.slice(0, -1);
 
+const MERCATOR_MAX_LAT = 85.0511287798066;
+
+export const CAR_BBOX = [-180, -90, 180, 90];
+export const MERCATOR_BBOX = [-180, -MERCATOR_MAX_LAT, 180, MERCATOR_MAX_LAT];
+
 export const DEFAULT_INTERNAL_MAP_SETTINGS = {
   projection: 'EPSG:4326',
   center: [0, 0],
   zoom: 0,
-  extent: [-180, -90, 180, 90],
+  // extent: [-180, -90, 180, 90],
   showFullExtent: true,
   multiWorld: true,
 };
 
-const MERCATOR_MAX_LAT = 85.0511287798066;
-
 export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
   {
     id: 'external-unwise-neo4',

From 50a4ebf1fb6e5ba5e88cb418a6fdf7f7a2ae4063 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 16 Jun 2025 15:16:51 -0400
Subject: [PATCH 08/17] Sync graticule to flipped tile state

---
 src/components/layers/GraticuleLayer.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/layers/GraticuleLayer.tsx b/src/components/layers/GraticuleLayer.tsx
index 333e542..2981c3d 100644
--- a/src/components/layers/GraticuleLayer.tsx
+++ b/src/components/layers/GraticuleLayer.tsx
@@ -4,11 +4,20 @@ import Stroke from 'ol/style/Stroke';
 
 export function GraticuleLayer({
   mapRef,
+  flipped,
 }: {
   mapRef: React.RefObject<Map | null>;
+  flipped: boolean;
 }) {
   useEffect(() => {
     if (mapRef.current) {
+      mapRef.current.getAllLayers().forEach((l) => {
+        const id = l.getProperties().id;
+        if (id && id.includes('graticule-')) {
+          mapRef.current?.removeLayer(l);
+        }
+      });
+
       const graticule1 = new Graticule({
         strokeStyle: new Stroke({
           color: 'rgba(198,198,198,0.5)',
@@ -19,7 +28,7 @@ export function GraticuleLayer({
         lonLabelPosition: 0,
         latLabelPosition: 0.999,
         latLabelFormatter: (lat) => String(lat),
-        lonLabelFormatter: (lon) => String(lon),
+        lonLabelFormatter: (lon) => String(flipped ? lon * -1 + 180 : lon),
         wrapX: false,
         properties: {
           id: 'graticule-1',
@@ -36,7 +45,7 @@ export function GraticuleLayer({
         lonLabelPosition: 1,
         latLabelPosition: 0.012,
         latLabelFormatter: (lat) => String(lat),
-        lonLabelFormatter: (lon) => String(lon),
+        lonLabelFormatter: (lon) => String(flipped ? lon * -1 + 180 : lon),
         wrapX: false,
         properties: {
           id: 'graticule-2',
@@ -46,7 +55,7 @@ export function GraticuleLayer({
       mapRef.current.addLayer(graticule1);
       mapRef.current.addLayer(graticule2);
     }
-  }, [mapRef.current]);
+  }, [mapRef.current, flipped]);
 
   return null;
 }

From 88d6d7d5690b643d36093197f089f3a21c1ff2e9 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 16 Jun 2025 15:17:47 -0400
Subject: [PATCH 09/17] Add ToggleSwitch component for RA range state

---
 src/components/ToggleSwitch.tsx         | 41 ++++++++++++
 src/components/styles/toggle-switch.css | 88 +++++++++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 src/components/ToggleSwitch.tsx
 create mode 100644 src/components/styles/toggle-switch.css

diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
new file mode 100644
index 0000000..9060bde
--- /dev/null
+++ b/src/components/ToggleSwitch.tsx
@@ -0,0 +1,41 @@
+import './styles/toggle-switch.css';
+
+type ToggleSwitchProps = {
+  checked: boolean;
+  onChange: () => void;
+  disabled: boolean;
+};
+
+export function ToggleSwitch({
+  checked,
+  onChange,
+  disabled,
+}: ToggleSwitchProps) {
+  return (
+    <div
+      className="toggle-container"
+      title={
+        disabled ? 'You cannot switch to an incompatible RA range.' : undefined
+      }
+    >
+      <input
+        className="input"
+        id="toggle"
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      <label
+        className={'label' + (disabled ? ' disabled' : '')}
+        htmlFor="toggle"
+      >
+        <div className="left">-180 &lt; ra &lt; 180</div>
+        <div className="switch">
+          <span className="slider round"></span>
+        </div>
+        <div className="right">360 &lt; ra &lt; 0</div>
+      </label>
+    </div>
+  );
+}
diff --git a/src/components/styles/toggle-switch.css b/src/components/styles/toggle-switch.css
new file mode 100644
index 0000000..37ea70b
--- /dev/null
+++ b/src/components/styles/toggle-switch.css
@@ -0,0 +1,88 @@
+.toggle-container {
+  position: absolute;
+  left: 50px;
+  top: 12px;
+  z-index: 5000;
+  background-color: white;
+  border-radius: 4px;
+  padding: 3px;
+  box-shadow: 1px 2px 2px rgba(128, 128, 128, 0.25);
+}
+
+.toggle-container.disabled {
+  cursor: not-allowed;
+}
+
+.label {
+  display: flex;
+  flex-direction: row;
+  font-size: 1em;
+  cursor: pointer;
+}
+
+.label.disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.input {
+  display: none;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  height: 16px;
+}
+
+.slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 12px;
+  width: 12px;
+  left: 2px;
+  bottom: 1px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .label .slider {
+  background-color: black;
+}
+
+input:focus + .label .slider {
+  box-shadow: 0 0 1px black;
+}
+
+input:checked + .label .slider:before {
+  -webkit-transform: translateX(12px);
+  -ms-transform: translateX(12px);
+  transform: translateX(12px);
+}
+
+.slider.round {
+  border-radius: 34px;
+  border: 1px solid darkgray;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.left,
+.right {
+  margin: 0 0.5em;
+}

From b1b9211b3444cf7a6b04db5d7e57926616212cad Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 16 Jun 2025 15:18:55 -0400
Subject: [PATCH 10/17] Wire up disabled state for external layers

---
 src/components/LayerSelector.tsx         | 8 +++++++-
 src/components/styles/layer-selector.css | 6 ++++++
 src/types/maps.ts                        | 1 +
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/LayerSelector.tsx b/src/components/LayerSelector.tsx
index 00e84f4..863f51f 100644
--- a/src/components/LayerSelector.tsx
+++ b/src/components/LayerSelector.tsx
@@ -17,6 +17,7 @@ interface Props
   > {
   activeBaselayerId?: number | string;
   sourceLists: SourceList[];
+  isFlipped: boolean;
 }
 
 export function LayerSelector({
@@ -29,6 +30,7 @@ export function LayerSelector({
   highlightBoxes,
   activeBoxIds,
   onSelectedHighlightBoxChange,
+  isFlipped,
 }: Props) {
   const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -72,7 +74,10 @@ export function LayerSelector({
             </div>
           ))}
           {EXTERNAL_BASELAYERS.map((bl) => (
-            <div className="input-container" key={bl.id}>
+            <div
+              className={`input-container ${bl.disabledState(isFlipped) ? 'disabled' : ''}`}
+              key={bl.id}
+            >
               <input
                 type="radio"
                 id={bl.id}
@@ -80,6 +85,7 @@ export function LayerSelector({
                 name="baselayer"
                 checked={bl.id === activeBaselayerId}
                 onChange={(e) => onBaseLayerChange(e.target.value)}
+                disabled={bl.disabledState(isFlipped)}
               />
               <label htmlFor={bl.id}>{bl.name}</label>
             </div>
diff --git a/src/components/styles/layer-selector.css b/src/components/styles/layer-selector.css
index 841d834..49d1c0c 100644
--- a/src/components/styles/layer-selector.css
+++ b/src/components/styles/layer-selector.css
@@ -30,3 +30,9 @@
   height: 40px;
   fill: #666;
 }
+
+.input-container.disabled > label,
+input[type='radio']:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
diff --git a/src/types/maps.ts b/src/types/maps.ts
index 273206e..54ddcb5 100644
--- a/src/types/maps.ts
+++ b/src/types/maps.ts
@@ -91,6 +91,7 @@ export type ExternalBaselayer = {
   projection: string;
   url: string | TileUrlFunction;
   extent: number[];
+  disabledState: (state: boolean) => boolean;
 };
 
 export type BaselayerState = {

From 7cd1094efaedce13efb0505d92f9fce6fd9babba Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 16 Jun 2025 15:20:24 -0400
Subject: [PATCH 11/17] Fix internal baselayer caching issue and clean up

---
 src/components/OpenLayersMap.tsx | 143 ++++---------------------------
 1 file changed, 15 insertions(+), 128 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 59a1ede..b60300a 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -1,11 +1,4 @@
-import {
-  ChangeEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { Map, View, Feature } from 'ol';
 import { TileGrid } from 'ol/tilegrid';
 import { Tile as TileLayer } from 'ol/layer';
@@ -16,13 +9,7 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Point } from 'ol/geom';
 import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style';
-import {
-  get as getProjection,
-  getPointResolution,
-  transform,
-  toLonLat,
-  getTransform,
-} from 'ol/proj.js';
+import { toLonLat } from 'ol/proj.js';
 import 'ol/ol.css';
 import {
   Band,
@@ -32,10 +19,8 @@ import {
   SubmapData,
 } from '../types/maps';
 import {
-  CAR_BBOX,
   DEFAULT_INTERNAL_MAP_SETTINGS,
   EXTERNAL_BASELAYERS,
-  MERCATOR_BBOX,
   SERVICE_URL,
 } from '../configs/mapSettings';
 import { CoordinatesDisplay } from './CoordinatesDisplay';
@@ -50,7 +35,7 @@ import './styles/highlight-controls.css';
 import './styles/area-selection.css';
 import { assertBand } from '../reducers/baselayerReducer';
 import { getBaselayerResolutions } from '../utils/layerUtils';
-import { applyTransform } from 'ol/extent';
+import { ToggleSwitch } from './ToggleSwitch';
 
 export type MapProps = {
   bands: Band[];
@@ -154,13 +139,7 @@ export function OpenLayersMap({
       });
 
       mapRef.current.on('pointermove', (e) => {
-        const units = mapRef.current?.getView().getProjection().getUnits();
-        if (units === 'm') {
-          const lonLat = toLonLat(e.coordinate);
-          setCoordinates(lonLat);
-        } else {
-          setCoordinates(e.coordinate);
-        }
+        setCoordinates(e.coordinate);
       });
 
       /**
@@ -265,68 +244,6 @@ export function OpenLayersMap({
     };
   }, []);
 
-  const onChangeProjection = useCallback(
-    (projection: string) => {
-      // (projection: string, extent: number[]) => {
-      if (mapRef.current) {
-        const currentView = mapRef.current.getView();
-        const currentProjection = currentView.getProjection();
-        const newProjection = getProjection(projection)!;
-        const fromLonLat = getTransform('EPSG:4326', newProjection);
-        const bbox = projection === 'EPSG:4326' ? CAR_BBOX : MERCATOR_BBOX;
-        newProjection.setWorldExtent(bbox);
-
-        // approximate calculation of projection extent,
-        // checking if the world extent crosses the dateline
-        if (bbox[0] > bbox[2]) {
-          bbox[2] += 360;
-        }
-
-        const extent = applyTransform(bbox, fromLonLat, undefined, 8);
-
-        const currentResolution = currentView.getResolution();
-        const currentCenter = currentView.getCenter() ?? [0, 0];
-        const currentRotation = currentView.getRotation();
-        const newCenter = transform(
-          currentCenter,
-          currentProjection,
-          newProjection
-        );
-        const currentMPU = currentProjection.getMetersPerUnit();
-        const newMPU = newProjection!.getMetersPerUnit();
-        const currentPointResolution =
-          getPointResolution(
-            currentProjection,
-            1 / currentMPU!,
-            currentCenter,
-            'm'
-          ) * currentMPU!;
-        const newPointResolution =
-          getPointResolution(newProjection!, 1 / newMPU!, newCenter, 'm') *
-          newMPU!;
-        const newResolution =
-          (currentResolution! * currentPointResolution) / newPointResolution;
-
-        newProjection.setExtent(extent);
-
-        const newView = new View({
-          center: newCenter,
-          resolution: newResolution,
-          rotation: currentRotation,
-          projection: newProjection,
-          extent,
-          showFullExtent: true,
-          multiWorld: true,
-        });
-
-        mapRef.current.setView(newView);
-        newView.fit(extent);
-        newView.setCenter(newCenter);
-      }
-    },
-    [mapRef.current]
-  );
-
   /**
    * Updates tilelayers when new baselayer is selected and/or color map settings change
    */
@@ -340,33 +257,12 @@ export function OpenLayersMap({
         }
       });
       if (assertBand(activeBaselayer)) {
-        const resolutionZ0 = 180 / activeBaselayer.tile_size;
-        const levels = activeBaselayer.levels;
-        const resolutions = [];
-        for (let i = 0; i < levels; i++) {
-          resolutions.push(resolutionZ0 / 2 ** i);
-        }
-        const source = new XYZ({
-          url: `${SERVICE_URL}/maps/${activeBaselayer.map_id}/${activeBaselayer.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}&flip=${flipTiles}`,
-          tileGrid: new TileGrid({
-            extent: [-180, -90, 180, 90],
-            origin: [-180, 90],
-            tileSize: activeBaselayer.tile_size,
-            resolutions,
-          }),
-          interpolate: false,
-          projection: 'EPSG:4326',
-          tilePixelRatio: activeBaselayer.tile_size / 256,
-        });
+        const url = `${SERVICE_URL}/maps/${activeBaselayer.map_id}/${activeBaselayer.id}/{z}/{-y}/{x}/tile.png?cmap=${cmap}&vmin=${cmapValues?.min}&vmax=${cmapValues?.max}&flip=${flipTiles}`;
         const activeLayer = tileLayers.find(
           (t) => t.get('id') === 'baselayer-' + activeBaselayer!.id
         )!;
-        activeLayer.setSource(source);
+        activeLayer.getSource()?.setUrl(url);
         mapRef.current.addLayer(activeLayer);
-        // onChangeProjection(
-        //   DEFAULT_INTERNAL_MAP_SETTINGS.projection
-        //   // DEFAULT_INTERNAL_MAP_SETTINGS.extent,
-        // );
       } else {
         const externalBaselayer = EXTERNAL_BASELAYERS.find(
           (b) => b.id === activeBaselayer.id
@@ -377,10 +273,6 @@ export function OpenLayersMap({
 
         if (!externalBaselayer || !activeLayer) return;
 
-        // onChangeProjection(
-        //   externalBaselayer.projection
-        //   // externalBaselayer.extent,
-        // );
         mapRef.current.addLayer(activeLayer);
       }
     }
@@ -388,19 +280,13 @@ export function OpenLayersMap({
 
   return (
     <div id="map" style={{ cursor: isDrawing ? 'crosshair' : 'auto' }}>
-      <div style={{ position: 'absolute', left: 50, top: 10, zIndex: 5000 }}>
-        <label style={{ display: 'flex', flexDirection: 'row', gap: 5 }}>
-          <input
-            type="checkbox"
-            checked={flipTiles}
-            onChange={(e) => {
-              console.log(e.target.checked);
-              setFlipTiles(!flipTiles);
-            }}
-          />
-          {flipTiles ? '360 < ra < 0' : '-180 < ra < 180'}
-        </label>
-      </div>
+      <ToggleSwitch
+        checked={flipTiles}
+        onChange={() => {
+          setFlipTiles(!flipTiles);
+        }}
+        disabled={!assertBand(activeBaselayer)}
+      />
       <div ref={externalSearchRef} className="ol-popup"></div>
       <div className="ol-zoom ol-control draw-box-btn-container">
         <button
@@ -446,8 +332,9 @@ export function OpenLayersMap({
         highlightBoxes={highlightBoxes}
         activeBoxIds={activeBoxIds}
         onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
+        isFlipped={flipTiles}
       />
-      <GraticuleLayer mapRef={mapRef} />
+      <GraticuleLayer mapRef={mapRef} flipped={flipTiles} />
       {coordinates && <CoordinatesDisplay coordinates={coordinates} />}
     </div>
   );

From de792b86974061c75118c79533e7f3119fe7f1da Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 16 Jun 2025 16:16:00 -0400
Subject: [PATCH 12/17] Sync CoordinatesDisplay to flipTiles state

---
 src/components/CoordinatesDisplay.tsx | 18 ++++++++++++++----
 src/components/OpenLayersMap.tsx      | 20 +++++++-------------
 src/configs/mapSettings.ts            | 20 ++++++++++++++------
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/components/CoordinatesDisplay.tsx b/src/components/CoordinatesDisplay.tsx
index 361c025..a81cad0 100644
--- a/src/components/CoordinatesDisplay.tsx
+++ b/src/components/CoordinatesDisplay.tsx
@@ -1,15 +1,25 @@
-import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
+import {
+  NUMBER_OF_FIXED_COORDINATE_DECIMALS,
+  transformCoords,
+} from '../configs/mapSettings';
 import './styles/coordinates-display.css';
 
-export function CoordinatesDisplay({ coordinates }: { coordinates: number[] }) {
+export function CoordinatesDisplay({
+  coordinates,
+  flipped,
+}: {
+  coordinates: number[];
+  flipped: boolean;
+}) {
+  const transformedCoords = transformCoords(coordinates, flipped);
   return (
     <div className="coordinates-display">
       <span className="parens">( </span>
       <span className="coords lat">
-        {coordinates[0].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)} ,
+        {transformedCoords[0].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)} ,
       </span>
       <span className="coords lng">
-        {coordinates[1].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)}
+        {transformedCoords[1].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)}
       </span>
       <span className="parens"> )</span>
     </div>
diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index b60300a..de2ccb5 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -9,7 +9,6 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Point } from 'ol/geom';
 import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style';
-import { toLonLat } from 'ol/proj.js';
 import 'ol/ol.css';
 import {
   Band,
@@ -194,17 +193,10 @@ export function OpenLayersMap({
                 );
               }
             }
-            const mapProj = e.map.getView().getProjection();
-            let searchCoords = e.coordinate;
-            let mapPosition = e.coordinate;
-            if (mapProj.getCode() === 'EPSG:3857') {
-              searchCoords = toLonLat(e.coordinate);
-            }
-            externalSearchRef.current?.append(
-              generateSearchContent(searchCoords)
-            );
-            simbadOverlay.setPosition(mapPosition);
-            externalSearchMarker.setGeometry(new Point(mapPosition));
+            const coords = e.coordinate;
+            externalSearchRef.current?.append(generateSearchContent(coords));
+            simbadOverlay.setPosition(coords);
+            externalSearchMarker.setGeometry(new Point(coords));
           }
         } else {
           const simbadOverlay = e.map.getOverlayById('simbad-search-overlay');
@@ -335,7 +327,9 @@ export function OpenLayersMap({
         isFlipped={flipTiles}
       />
       <GraticuleLayer mapRef={mapRef} flipped={flipTiles} />
-      {coordinates && <CoordinatesDisplay coordinates={coordinates} />}
+      {coordinates && (
+        <CoordinatesDisplay coordinates={coordinates} flipped={flipTiles} />
+      )}
     </div>
   );
 }
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index a9a8417..6932655 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -14,7 +14,7 @@ export const MERCATOR_BBOX = [-180, -MERCATOR_MAX_LAT, 180, MERCATOR_MAX_LAT];
 export const DEFAULT_INTERNAL_MAP_SETTINGS = {
   projection: 'EPSG:4326',
   center: [0, 0],
-  zoom: 0,
+  zoom: 2,
   // extent: [-180, -90, 180, 90],
   showFullExtent: true,
   multiWorld: true,
@@ -31,13 +31,21 @@ export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
       'EPSG:4326',
       'EPSG:3857'
     ),
-    // url: function ([z, x, y]) {
-    //   const tileX = (x + 2 ** z) % (2 ** z); // wrap-around X at 360° RA
-    //   // const tileX = ((x + 2) ** z) % (2 ** z); // wrap-around X at 360° RA
-    //   return `http://imagine.legacysurvey.org/static/tiles/unwise-neo4/1/${z}/${tileX}/${y}.jpg`;
-    // },
+    disabledState: (isFlipped: boolean) => !isFlipped,
   },
 ];
 
 // related to controls
 export const NUMBER_OF_FIXED_COORDINATE_DECIMALS = 5;
+
+export function transformCoords(
+  coords: number[],
+  isFlipped: boolean
+): number[] {
+  if (isFlipped) {
+    const [ra, dec] = coords;
+    return [ra * -1 + 180, dec];
+  } else {
+    return coords;
+  }
+}

From 17b619ec26f0fa1b8bca4809ee62953493fa2a4d Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Tue, 17 Jun 2025 13:22:53 -0400
Subject: [PATCH 13/17] Sync externalSearch params and overlay with flipTiles
 state

---
 src/components/CoordinatesDisplay.tsx |   4 +-
 src/components/OpenLayersMap.tsx      | 130 +++++++++++++++++++-------
 src/configs/mapSettings.ts            |  25 ++++-
 3 files changed, 122 insertions(+), 37 deletions(-)

diff --git a/src/components/CoordinatesDisplay.tsx b/src/components/CoordinatesDisplay.tsx
index a81cad0..04bb87a 100644
--- a/src/components/CoordinatesDisplay.tsx
+++ b/src/components/CoordinatesDisplay.tsx
@@ -1,6 +1,6 @@
 import {
   NUMBER_OF_FIXED_COORDINATE_DECIMALS,
-  transformCoords,
+  transformGraticuleCoords,
 } from '../configs/mapSettings';
 import './styles/coordinates-display.css';
 
@@ -11,7 +11,7 @@ export function CoordinatesDisplay({
   coordinates: number[];
   flipped: boolean;
 }) {
-  const transformedCoords = transformCoords(coordinates, flipped);
+  const transformedCoords = transformGraticuleCoords(coordinates, flipped);
   return (
     <div className="coordinates-display">
       <span className="parens">( </span>
diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index de2ccb5..6a79636 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -1,5 +1,12 @@
-import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
-import { Map, View, Feature } from 'ol';
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Map, View, Feature, MapBrowserEvent } from 'ol';
 import { TileGrid } from 'ol/tilegrid';
 import { Tile as TileLayer } from 'ol/layer';
 import { XYZ } from 'ol/source';
@@ -21,6 +28,8 @@ import {
   DEFAULT_INTERNAL_MAP_SETTINGS,
   EXTERNAL_BASELAYERS,
   SERVICE_URL,
+  transformGraticuleCoords,
+  transformCoords,
 } from '../configs/mapSettings';
 import { CoordinatesDisplay } from './CoordinatesDisplay';
 import { LayerSelector } from './LayerSelector';
@@ -70,6 +79,9 @@ export function OpenLayersMap({
   const mapRef = useRef<Map | null>(null);
   const drawBoxRef = useRef<VectorLayer | null>(null);
   const externalSearchRef = useRef<HTMLDivElement | null>(null);
+  const externalSearchMarkerRef = useRef<Feature | null>(null);
+  const previousSearchOverlayHandlerRef =
+    useRef<(e: MapBrowserEvent<any>) => void | null>(null);
   const [coordinates, setCoordinates] = useState<number[] | undefined>(
     undefined
   );
@@ -170,8 +182,11 @@ export function OpenLayersMap({
         })
       );
 
+      externalSearchMarkerRef.current = externalSearchMarker;
+
       const externalSearchMarkerSource = new VectorSource({
         features: [externalSearchMarker],
+        wrapX: false,
       });
 
       const externalSearchMarkerLayer = new VectorLayer({
@@ -181,36 +196,6 @@ export function OpenLayersMap({
 
       mapRef.current.addLayer(externalSearchMarkerLayer);
 
-      // Create the click handler that displays/hides the marker and the popup
-      mapRef.current.on('click', (e) => {
-        if (e.originalEvent.metaKey) {
-          const simbadOverlay = e.map.getOverlayById('simbad-search-overlay');
-          if (simbadOverlay) {
-            if (externalSearchRef.current) {
-              while (externalSearchRef.current.firstChild) {
-                externalSearchRef.current.removeChild(
-                  externalSearchRef.current.firstChild
-                );
-              }
-            }
-            const coords = e.coordinate;
-            externalSearchRef.current?.append(generateSearchContent(coords));
-            simbadOverlay.setPosition(coords);
-            externalSearchMarker.setGeometry(new Point(coords));
-          }
-        } else {
-          const simbadOverlay = e.map.getOverlayById('simbad-search-overlay');
-          if (simbadOverlay) {
-            externalSearchRef.current!.innerHTML = '';
-            simbadOverlay.setPosition(undefined);
-            externalSearchMarker.setGeometry(undefined);
-          }
-        }
-      });
-      /**
-       * END
-       */
-
       mapRef.current.addControl(
         new ScaleLine({
           className: 'scale-control',
@@ -219,7 +204,9 @@ export function OpenLayersMap({
       );
 
       // create a source and layer for the "add box" functionality
-      const boxSource = new VectorSource();
+      const boxSource = new VectorSource({
+        wrapX: false,
+      });
       const boxVector = new VectorLayer({
         source: boxSource,
         properties: {
@@ -236,6 +223,82 @@ export function OpenLayersMap({
     };
   }, []);
 
+  const handleSearchOverlay = useCallback(
+    (e: MapBrowserEvent) => {
+      if (e.originalEvent.metaKey) {
+        const simbadOverlay = e.map.getOverlayById('simbad-search-overlay');
+        if (simbadOverlay) {
+          if (externalSearchRef.current) {
+            while (externalSearchRef.current.firstChild) {
+              externalSearchRef.current.removeChild(
+                externalSearchRef.current.firstChild
+              );
+            }
+          }
+          const overlayCoords = e.coordinate;
+          const searchCoords = transformGraticuleCoords(
+            overlayCoords,
+            flipTiles
+          );
+          externalSearchRef.current?.append(
+            generateSearchContent(searchCoords)
+          );
+          simbadOverlay.setPosition(overlayCoords);
+          externalSearchMarkerRef.current?.setGeometry(
+            new Point(overlayCoords)
+          );
+        }
+      } else {
+        const simbadOverlay = e.map.getOverlayById('simbad-search-overlay');
+        if (simbadOverlay) {
+          externalSearchRef.current!.innerHTML = '';
+          simbadOverlay.setPosition(undefined);
+          externalSearchMarkerRef.current?.setGeometry(undefined);
+        }
+      }
+    },
+    [externalSearchMarkerRef.current, flipTiles]
+  );
+
+  useEffect(() => {
+    if (mapRef.current) {
+      if (previousSearchOverlayHandlerRef.current) {
+        mapRef.current.un('click', previousSearchOverlayHandlerRef.current);
+      }
+      previousSearchOverlayHandlerRef.current = handleSearchOverlay;
+      mapRef.current.on('click', handleSearchOverlay);
+    }
+  }, [handleSearchOverlay]);
+
+  useEffect(() => {
+    if (mapRef.current) {
+      const simbadOverlay = mapRef.current.getOverlayById(
+        'simbad-search-overlay'
+      );
+      if (simbadOverlay) {
+        const coords = simbadOverlay.getPosition();
+        if (coords) {
+          if (externalSearchRef.current) {
+            while (externalSearchRef.current.firstChild) {
+              externalSearchRef.current.removeChild(
+                externalSearchRef.current.firstChild
+              );
+            }
+          }
+          const searchCoords = transformCoords(coords, flipTiles, 'search');
+          const overlayCoords = transformCoords(coords, flipTiles, 'layer');
+          externalSearchRef.current?.append(
+            generateSearchContent(searchCoords)
+          );
+          simbadOverlay.setPosition(overlayCoords);
+          externalSearchMarkerRef.current?.setGeometry(
+            new Point(overlayCoords)
+          );
+        }
+      }
+    }
+  }, [flipTiles]);
+
   /**
    * Updates tilelayers when new baselayer is selected and/or color map settings change
    */
@@ -295,6 +358,7 @@ export function OpenLayersMap({
         sourceLists={sourceLists}
         activeSourceListIds={activeSourceListIds}
         mapRef={mapRef}
+        flipped={flipTiles}
       />
       <HighlightBoxLayer
         highlightBoxes={highlightBoxes}
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index 6932655..bfa545d 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -38,14 +38,35 @@ export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
 // related to controls
 export const NUMBER_OF_FIXED_COORDINATE_DECIMALS = 5;
 
-export function transformCoords(
+export function transformGraticuleCoords(
   coords: number[],
   isFlipped: boolean
 ): number[] {
   if (isFlipped) {
     const [ra, dec] = coords;
-    return [ra * -1 + 180, dec];
+    const newRa = ra * -1 + 180;
+    return [newRa, dec];
   } else {
     return coords;
   }
 }
+
+export function transformCoords(
+  coords: number[],
+  isFlipped: boolean,
+  context: 'search' | 'layer'
+): number[] {
+  const [ra, dec] = coords;
+  const newRa = coords[0] * -1 + (coords[0] > 0 ? 180 : -180);
+  if (isFlipped) {
+    if (context === 'search') {
+      return [ra > 0 ? ra : ra + 360, dec];
+    }
+    if (context === 'layer') {
+      return [newRa, dec];
+    }
+    return coords;
+  } else {
+    return [newRa, dec];
+  }
+}

From 4657b601f39d451d7c7262ccb3ca3d78aa8bf1ca Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Wed, 18 Jun 2025 14:47:56 -0400
Subject: [PATCH 14/17] Sync catalog vectors and popup to flipTiles state

---
 src/components/CoordinatesDisplay.tsx  |   6 +-
 src/components/OpenLayersMap.tsx       |   8 +-
 src/components/layers/SourcesLayer.tsx | 218 +++++++++++++++----------
 src/configs/mapSettings.ts             |  33 ----
 src/utils/layerUtils.ts                |  56 +++++++
 5 files changed, 196 insertions(+), 125 deletions(-)

diff --git a/src/components/CoordinatesDisplay.tsx b/src/components/CoordinatesDisplay.tsx
index 04bb87a..e928874 100644
--- a/src/components/CoordinatesDisplay.tsx
+++ b/src/components/CoordinatesDisplay.tsx
@@ -1,7 +1,5 @@
-import {
-  NUMBER_OF_FIXED_COORDINATE_DECIMALS,
-  transformGraticuleCoords,
-} from '../configs/mapSettings';
+import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
+import { transformGraticuleCoords } from '../utils/layerUtils';
 import './styles/coordinates-display.css';
 
 export function CoordinatesDisplay({
diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 6a79636..39f31c6 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -28,8 +28,6 @@ import {
   DEFAULT_INTERNAL_MAP_SETTINGS,
   EXTERNAL_BASELAYERS,
   SERVICE_URL,
-  transformGraticuleCoords,
-  transformCoords,
 } from '../configs/mapSettings';
 import { CoordinatesDisplay } from './CoordinatesDisplay';
 import { LayerSelector } from './LayerSelector';
@@ -42,7 +40,11 @@ import { generateSearchContent } from '../utils/externalSearchUtils';
 import './styles/highlight-controls.css';
 import './styles/area-selection.css';
 import { assertBand } from '../reducers/baselayerReducer';
-import { getBaselayerResolutions } from '../utils/layerUtils';
+import {
+  getBaselayerResolutions,
+  transformCoords,
+  transformGraticuleCoords,
+} from '../utils/layerUtils';
 import { ToggleSwitch } from './ToggleSwitch';
 
 export type MapProps = {
diff --git a/src/components/layers/SourcesLayer.tsx b/src/components/layers/SourcesLayer.tsx
index 027667b..e898959 100644
--- a/src/components/layers/SourcesLayer.tsx
+++ b/src/components/layers/SourcesLayer.tsx
@@ -1,123 +1,171 @@
-import { useRef, useState, useEffect, useMemo } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 import { Source } from '../../types/maps';
 import { Feature, Map, Overlay } from 'ol';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import LayerGroup from 'ol/layer/Group';
 import { Circle } from 'ol/geom';
-import Select from 'ol/interaction/Select.js';
+import Select, { SelectEvent } from 'ol/interaction/Select.js';
 import { click } from 'ol/events/condition';
 import { MapProps } from '../OpenLayersMap';
-import { transform } from 'ol/proj';
+import { transformSources } from '../../utils/layerUtils';
 
 type SourcesLayerProps = {
   sourceLists: MapProps['sourceLists'];
   activeSourceListIds: MapProps['activeSourceListIds'];
   mapRef: React.RefObject<Map | null>;
+  flipped: boolean;
 };
 
 export function SourcesLayer({
   sourceLists = [],
   activeSourceListIds,
   mapRef,
+  flipped,
 }: SourcesLayerProps) {
   const popupRef = useRef<HTMLDivElement | null>(null);
   const [selectedSourceData, setSelectedSourceData] = useState<
     Source | undefined
   >(undefined);
 
-  const sourceOverlays = useMemo(() => {
-    if (!sourceLists.length) return [];
-    const projection = mapRef.current?.getView().getProjection();
-    return sourceLists
+  const sourceGroupRef = useRef<LayerGroup | null>(null);
+  const selectInteractionRef = useRef<Select | null>(null);
+  const handleSourceClickRef = useRef<(e: SelectEvent) => void | null>(null);
+  const popupOverlayRef = useRef<Overlay | null>(null);
+
+  const handleSourceClick = useCallback(
+    (e: SelectEvent) => {
+      const select = selectInteractionRef.current;
+      const popupOverlay = popupOverlayRef.current;
+      if (!select || !popupOverlay) return;
+      const selectedFeatures = e.selected;
+      if (selectedFeatures.length === 0) {
+        popupOverlay.setPosition(undefined);
+        setSelectedSourceData(undefined);
+        return;
+      }
+      selectedFeatures.forEach((feature) => {
+        const { newOverlayCoords, newSourceData } = transformSources(
+          feature,
+          flipped
+        );
+        popupOverlay.setPosition(newOverlayCoords);
+        setSelectedSourceData(newSourceData);
+      });
+    },
+    [flipped]
+  );
+
+  // Create/reuse the source group layer
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    const map = mapRef.current;
+
+    // Clean up old layer if needed
+    if (sourceGroupRef.current) {
+      map.removeLayer(sourceGroupRef.current);
+    }
+
+    const newLayers = sourceLists
       .filter((sl) => activeSourceListIds.includes(sl.id))
-      .map(
-        (sl) =>
-          new LayerGroup({
-            properties: {
-              id: 'sourcelist-group-' + sl.id,
-            },
-            layers: [
-              new VectorLayer({
-                source: new VectorSource({
-                  features: sl.sources.map((source) => {
-                    let coords = [source.ra, source.dec];
-                    let rad = 1;
-                    if (projection && projection.getCode() === 'EPSG:3857') {
-                      coords = transform(coords, 'EPSG:4326', 'EPSG:3857');
-                      rad = 100000;
-                    }
-                    return new Feature({
-                      geometry: new Circle(coords, rad),
-                      sourceData: source,
-                    });
-                  }),
-                }),
-                style: {
-                  'stroke-width': 2,
-                  'stroke-color': '#3388FF',
-                  'fill-color': [51, 136, 255, 0.2],
-                },
-              }),
-            ],
-            zIndex: 500,
-          })
-      );
+      .map((sl) => {
+        return new VectorLayer({
+          source: new VectorSource({
+            features: sl.sources.map((source) => {
+              const coords = [source.ra, source.dec];
+              return new Feature({
+                geometry: new Circle(coords, 1),
+                sourceData: source,
+              });
+            }),
+            wrapX: false,
+          }),
+          style: {
+            'stroke-width': 2,
+            'stroke-color': '#3388FF',
+            'fill-color': [51, 136, 255, 0.2],
+          },
+        });
+      });
+
+    const group = new LayerGroup({
+      layers: newLayers,
+      properties: { id: 'sourcelist-group' },
+      zIndex: 500,
+    });
+
+    sourceGroupRef.current = group;
+    map.addLayer(group);
   }, [sourceLists, activeSourceListIds]);
 
+  // Set up interaction and popup
   useEffect(() => {
-    if (!mapRef.current) return;
-    mapRef.current.getLayers().forEach((l) => {
-      const id = l.get('id') as string;
-      if (typeof id === 'string' && id.includes('sourcelist-group')) {
-        l.setVisible(false);
-      }
+    const map = mapRef.current;
+    if (!map || !popupRef.current) return;
+
+    // Add popup overlay
+    const popupOverlay = new Overlay({
+      element: popupRef.current,
     });
-    sourceOverlays.forEach((so) => {
-      mapRef.current?.addLayer(so);
+    popupOverlayRef.current = popupOverlay;
+    map.addOverlay(popupOverlay);
+
+    // Set up click interaction
+    const select = new Select({
+      condition: click,
+      layers: (layer) => {
+        const group = sourceGroupRef.current;
+        return group ? group.getLayers().getArray().includes(layer) : false;
+      },
     });
-  }, [sourceOverlays]);
+
+    map.addInteraction(select);
+    selectInteractionRef.current = select;
+
+    return () => {
+      map.removeOverlay(popupOverlay);
+      map.removeInteraction(select);
+    };
+  }, []);
 
   useEffect(() => {
-    if (!mapRef.current) return;
-    if (popupRef.current) {
-      const popupOverlay = new Overlay({
-        element: popupRef.current,
-      });
-      mapRef.current.addOverlay(popupOverlay);
-      const select = new Select({
-        condition: click,
-        layers: (layer) => {
-          return sourceOverlays.some((group) =>
-            group.getLayers().getArray().includes(layer)
-          );
-        },
-      });
-      mapRef.current.addInteraction(select);
-      select.on('select', (e) => {
-        const selectedFeatures = e.selected;
-
-        if (selectedFeatures.length === 0) {
-          // user clicked on empty space, so clear popup data
-          popupOverlay.setPosition(undefined);
-          setSelectedSourceData(undefined);
-          return;
-        }
-
-        const projection = mapRef.current?.getView().getProjection();
-
-        selectedFeatures.forEach((feature) => {
-          const sourceData = feature.get('sourceData') as Source;
-          let coords = [sourceData.ra, sourceData.dec];
-          if (projection && projection.getCode() === 'EPSG:3857') {
-            coords = transform(coords, 'EPSG:4326', 'EPSG:3857');
+    if (mapRef.current) {
+      if (handleSourceClickRef.current) {
+        selectInteractionRef.current?.un(
+          'select',
+          handleSourceClickRef.current
+        );
+      }
+      handleSourceClickRef.current = handleSourceClick;
+      selectInteractionRef.current?.on('select', handleSourceClick);
+    }
+  }, [handleSourceClick]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    const sourceGroup = sourceGroupRef.current;
+    if (!sourceGroup || !map) return;
+    sourceGroup.getLayers().forEach((l) => {
+      const source = (l as VectorLayer).getSource();
+      if (source instanceof VectorSource) {
+        source.getFeatures().forEach((f: Feature) => {
+          if (f) {
+            const { newOverlayCoords, newSourceData } = transformSources(
+              f,
+              flipped
+            );
+            const circle = f.getGeometry() as Circle;
+            circle.setCenter(newOverlayCoords);
+            if (newSourceData.id === selectedSourceData?.id) {
+              popupOverlayRef.current?.setPosition(newOverlayCoords);
+              setSelectedSourceData(newSourceData);
+            }
           }
-          popupOverlay.setPosition(coords);
-          setSelectedSourceData(sourceData);
         });
-      });
-    }
-  }, [mapRef.current, popupRef.current, sourceOverlays, activeSourceListIds]);
+      }
+    });
+  }, [flipped]);
 
   return (
     <div ref={popupRef} className="source-popup">
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index bfa545d..4113ef2 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -37,36 +37,3 @@ export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
 
 // related to controls
 export const NUMBER_OF_FIXED_COORDINATE_DECIMALS = 5;
-
-export function transformGraticuleCoords(
-  coords: number[],
-  isFlipped: boolean
-): number[] {
-  if (isFlipped) {
-    const [ra, dec] = coords;
-    const newRa = ra * -1 + 180;
-    return [newRa, dec];
-  } else {
-    return coords;
-  }
-}
-
-export function transformCoords(
-  coords: number[],
-  isFlipped: boolean,
-  context: 'search' | 'layer'
-): number[] {
-  const [ra, dec] = coords;
-  const newRa = coords[0] * -1 + (coords[0] > 0 ? 180 : -180);
-  if (isFlipped) {
-    if (context === 'search') {
-      return [ra > 0 ? ra : ra + 360, dec];
-    }
-    if (context === 'layer') {
-      return [newRa, dec];
-    }
-    return coords;
-  } else {
-    return [newRa, dec];
-  }
-}
diff --git a/src/utils/layerUtils.ts b/src/utils/layerUtils.ts
index 7158f00..04fbec7 100644
--- a/src/utils/layerUtils.ts
+++ b/src/utils/layerUtils.ts
@@ -1,4 +1,6 @@
+import { Feature } from 'ol';
 import { Band } from '../types/maps';
+import { Source } from '../types/maps';
 
 /**
  * A utility function to format a layer's name.
@@ -39,3 +41,57 @@ export function getBaselayerResolutions(
   }
   return resolutions;
 }
+
+export function transformGraticuleCoords(
+  coords: number[],
+  isFlipped: boolean
+): number[] {
+  if (isFlipped) {
+    const [ra, dec] = coords;
+    const newRa = ra * -1 + 180;
+    return [newRa, dec];
+  } else {
+    return coords;
+  }
+}
+
+export function transformCoords(
+  coords: number[],
+  isFlipped: boolean,
+  context: 'search' | 'layer'
+): number[] {
+  const [ra, dec] = coords;
+  const newRa = coords[0] * -1 + (coords[0] > 0 ? 180 : -180);
+  if (isFlipped) {
+    if (context === 'search') {
+      return [ra > 0 ? ra : ra + 360, dec];
+    }
+    if (context === 'layer') {
+      return [newRa, dec];
+    }
+    return coords;
+  } else {
+    return [newRa, dec];
+  }
+}
+
+export function transformSources(feature: Feature, flipped: boolean) {
+  const sourceData = feature.get('sourceData') as Source;
+  let newOverlayCoords = [sourceData.ra, sourceData.dec];
+  let newSourceData = { ...sourceData };
+  if (flipped) {
+    newOverlayCoords = transformCoords(
+      [sourceData.ra, sourceData.dec],
+      flipped,
+      'layer'
+    );
+    newSourceData = {
+      ...sourceData,
+      ra: sourceData.ra < 0 ? sourceData.ra + 360 : sourceData.ra,
+    };
+  }
+  return {
+    newOverlayCoords,
+    newSourceData,
+  };
+}

From 1d8bde28a9acb3b4f6beaad039b7de8869ce5e65 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Fri, 20 Jun 2025 16:22:09 -0400
Subject: [PATCH 15/17] Sync box positions with flipTiles state

---
 src/components/OpenLayersMap.tsx            |   1 +
 src/components/layers/HighlightBoxLayer.tsx | 267 ++++++++++++++------
 src/types/maps.ts                           |  11 +-
 src/utils/layerUtils.ts                     |  36 ++-
 4 files changed, 233 insertions(+), 82 deletions(-)

diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 39f31c6..fa33894 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -369,6 +369,7 @@ export function OpenLayersMap({
         setActiveBoxIds={setActiveBoxIds}
         setBoxes={setBoxes}
         submapData={submapData}
+        flipped={flipTiles}
       />
       <AddHighlightBoxLayer
         mapRef={mapRef}
diff --git a/src/components/layers/HighlightBoxLayer.tsx b/src/components/layers/HighlightBoxLayer.tsx
index b3de839..25904d6 100644
--- a/src/components/layers/HighlightBoxLayer.tsx
+++ b/src/components/layers/HighlightBoxLayer.tsx
@@ -1,13 +1,14 @@
-import { useRef, useState, useMemo, useEffect } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 import { Box, BoxWithPositionalData } from '../../types/maps';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
-import { Feature, Map, Overlay } from 'ol';
-import { fromExtent } from 'ol/geom/Polygon';
+import { Feature, Map, MapBrowserEvent, Overlay } from 'ol';
+import Polygon, { fromExtent } from 'ol/geom/Polygon';
 import { MenuIcon } from '../icons/MenuIcon';
 import { MapProps } from '../OpenLayersMap';
 import { deleteSubmapBox } from '../../utils/fetchUtils';
 import { BoxMenu } from '../BoxMenu';
+import { transformBoxes } from '../../utils/layerUtils';
 
 type HightlightBoxLayerProps = {
   highlightBoxes: MapProps['highlightBoxes'];
@@ -16,6 +17,7 @@ type HightlightBoxLayerProps = {
   setActiveBoxIds: MapProps['setActiveBoxIds'];
   setBoxes: MapProps['setBoxes'];
   submapData: MapProps['submapData'];
+  flipped: boolean;
 };
 
 export function HighlightBoxLayer({
@@ -25,100 +27,211 @@ export function HighlightBoxLayer({
   setActiveBoxIds,
   setBoxes,
   submapData,
+  flipped,
 }: HightlightBoxLayerProps) {
   const boxOverlayRef = useRef<HTMLDivElement | null>(null);
   const [selectedBoxData, setSelectedBoxData] = useState<
     BoxWithPositionalData | undefined
   >(undefined);
   const [showMenu, setShowMenu] = useState(false);
+  const addedLayerIdsRef = useRef<Set<string>>(new Set());
+  const overlayRef = useRef<Overlay>(null);
+  const handleBoxHoverRef = useRef<(e: MapBrowserEvent) => void>(null);
 
-  const highlightBoxOverlays = useMemo(() => {
-    if (!highlightBoxes) return [];
-    return highlightBoxes
-      .filter((box) => activeBoxIds.includes(box.id))
-      .map(
-        (box) =>
-          new VectorLayer({
-            properties: {
-              id: 'highlight-box-' + box.id,
-            },
-            source: new VectorSource({
-              features: [
-                new Feature({
-                  geometry: fromExtent([
-                    box.top_left_ra,
-                    box.bottom_right_dec,
-                    box.bottom_right_ra,
-                    box.top_left_dec,
-                  ]), // minX, minY, maxX, maxY
-                  boxData: box,
-                }),
-              ],
-            }),
-            zIndex: 500,
-          })
-      );
-  }, [highlightBoxes, activeBoxIds]);
+  const handleBoxHover = useCallback(
+    (e: MapBrowserEvent) => {
+      if (!e.map.hasFeatureAtPixel(e.pixel)) {
+        overlayRef.current?.setPosition(undefined);
+        setSelectedBoxData(undefined);
+        setShowMenu(false);
+        return;
+      }
+
+      e.map.forEachFeatureAtPixel(e.pixel, (f) => {
+        const boxData = f.get('boxData') as Box;
+        if (!boxData) return;
+
+        const topLeft = e.map.getPixelFromCoordinate([
+          boxData.top_left_ra,
+          boxData.top_left_dec,
+        ]);
+        const bottomRight = e.map.getPixelFromCoordinate([
+          boxData.bottom_right_ra,
+          boxData.bottom_right_dec,
+        ]);
+
+        const width = Math.abs(topLeft[0] - bottomRight[0]);
+        const height = Math.abs(topLeft[1] - bottomRight[1]);
+
+        overlayRef.current!.setPosition([
+          boxData.top_left_ra,
+          boxData.top_left_dec,
+        ]);
+
+        setSelectedBoxData({
+          ...boxData,
+          top: topLeft[1],
+          left: topLeft[0],
+          width,
+          height,
+        });
+      });
+    },
+    [flipped]
+  );
 
   useEffect(() => {
-    if (!mapRef.current) return;
-    mapRef.current.getLayers().forEach((l) => {
-      const id = l.get('id') as string;
-      if (typeof id === 'string' && id.includes('highlight-box')) {
-        l.setVisible(false);
+    if (!mapRef.current || !highlightBoxes?.length) return;
+
+    const map = mapRef.current;
+    const existingLayers = map.getLayers().getArray();
+
+    // Build a Set of current valid highlight box IDs
+    const validBoxIds = new Set(
+      highlightBoxes.filter((b) => activeBoxIds.includes(b.id)).map((b) => b.id)
+    );
+
+    // Remove old layers not in current valid list
+    existingLayers.forEach((layer) => {
+      const id = layer.get('id');
+      if (typeof id === 'string' && id.startsWith('highlight-box-')) {
+        const boxId = id.replace('highlight-box-', '');
+        if (!validBoxIds.has(Number(boxId))) {
+          map.removeLayer(layer);
+          addedLayerIdsRef.current.delete(id);
+        }
       }
     });
-    highlightBoxOverlays.forEach((box) => {
-      mapRef.current?.addLayer(box);
+
+    // Add new layers for valid boxes not yet added
+    highlightBoxes.forEach((box) => {
+      const layerId = `highlight-box-${box.id}`;
+      if (!activeBoxIds.includes(box.id)) return;
+      if (addedLayerIdsRef.current.has(layerId)) return;
+
+      const boxPosition = transformBoxes(
+        {
+          top_left_ra: box.top_left_ra,
+          top_left_dec: box.top_left_dec,
+          bottom_right_ra: box.bottom_right_ra,
+          bottom_right_dec: box.bottom_right_dec,
+        },
+        flipped
+      );
+
+      const layer = new VectorLayer({
+        properties: { id: layerId },
+        source: new VectorSource({
+          features: [
+            new Feature({
+              geometry: fromExtent([
+                boxPosition.top_left_ra,
+                boxPosition.bottom_right_dec,
+                boxPosition.bottom_right_ra,
+                boxPosition.top_left_dec,
+              ]),
+              boxData: {
+                ...box,
+                ...boxPosition,
+              },
+            }),
+          ],
+          wrapX: false,
+        }),
+        zIndex: 500,
+      });
+
+      map?.addLayer(layer);
+      addedLayerIdsRef.current.add(layerId);
     });
-  }, [highlightBoxOverlays]);
+  }, [mapRef.current, highlightBoxes, activeBoxIds, flipped]);
 
   useEffect(() => {
-    if (!mapRef.current) return;
-    const doesOverlayExist = mapRef.current.getOverlayById('box-overlay');
-    if (!doesOverlayExist && boxOverlayRef.current) {
-      const boxOverlay = new Overlay({
+    if (!mapRef.current || !boxOverlayRef.current) return;
+    if (!overlayRef.current) {
+      overlayRef.current = new Overlay({
         element: boxOverlayRef.current,
         id: 'box-overlay',
       });
-      mapRef.current.addOverlay(boxOverlay);
-      mapRef.current.on('pointermove', (e) => {
-        if (!e.map.hasFeatureAtPixel(e.pixel)) {
-          boxOverlay.setPosition(undefined);
-          setSelectedBoxData(undefined);
-          setShowMenu(false);
-          return;
-        }
-        e.map.forEachFeatureAtPixel(e.pixel, function (f) {
-          const boxData = f.get('boxData') as Box;
-          if (!boxData) return;
-          const topLeftBoxPosition = e.map.getPixelFromCoordinate([
-            boxData.top_left_ra,
-            boxData.top_left_dec,
-          ]);
-          const bottomRightBoxPosition = e.map.getPixelFromCoordinate([
-            boxData.bottom_right_ra,
-            boxData.bottom_right_dec,
-          ]);
-          const boxWidth = Math.abs(
-            topLeftBoxPosition[0] - bottomRightBoxPosition[0]
-          );
-          const boxHeight = Math.abs(
-            topLeftBoxPosition[1] - bottomRightBoxPosition[1]
-          );
-          boxOverlay.setPosition([boxData.top_left_ra, boxData.top_left_dec]);
-          setSelectedBoxData({
-            ...boxData,
-            top: topLeftBoxPosition[1],
-            left: topLeftBoxPosition[0],
-            width: boxWidth,
-            height: boxHeight,
-          });
-        });
-      });
+      mapRef.current.addOverlay(overlayRef.current);
     }
   }, [mapRef.current, boxOverlayRef.current]);
 
+  useEffect(() => {
+    if (mapRef.current) {
+      if (handleBoxHoverRef.current) {
+        mapRef.current.un('pointermove', handleBoxHoverRef.current);
+      }
+      handleBoxHoverRef.current = handleBoxHover;
+      mapRef.current.on('pointermove', handleBoxHover);
+    }
+  }, [mapRef.current, handleBoxHover]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    map.getAllLayers().forEach((l) => {
+      const layerId = l.getProperties()['id'] as string;
+      if (addedLayerIdsRef.current.has(layerId)) {
+        const vectorSource = l.getSource();
+        if (vectorSource instanceof VectorSource) {
+          const feature = vectorSource.getFeatures()[0];
+          const box = feature.getGeometry() as Polygon;
+          const currentData = feature.get('boxData');
+          if (!flipped) {
+            const id = Number(layerId.replace('highlight-box-', ''));
+            const originalBox = highlightBoxes?.find((b) => b.id === id);
+            if (originalBox) {
+              box.setCoordinates([
+                [
+                  [originalBox.top_left_ra, originalBox.top_left_dec],
+                  [originalBox.bottom_right_ra, originalBox.top_left_dec],
+                  [originalBox.bottom_right_ra, originalBox.bottom_right_dec],
+                  [originalBox.top_left_ra, originalBox.bottom_right_dec],
+                  [originalBox.top_left_ra, originalBox.top_left_dec],
+                ],
+              ]);
+              const newData = {
+                ...currentData,
+                top_left_ra: originalBox.top_left_ra,
+                top_left_dec: originalBox.top_left_dec,
+                bottom_right_ra: originalBox.bottom_right_ra,
+                bottom_right_dec: originalBox.bottom_right_dec,
+              };
+              feature.set('boxData', newData);
+            }
+          } else {
+            const currentExtentArray = box.getExtent();
+            const currentExtent = {
+              top_left_ra: currentExtentArray[0],
+              bottom_right_dec: currentExtentArray[1],
+              bottom_right_ra: currentExtentArray[2],
+              top_left_dec: currentExtentArray[3],
+            };
+            const newExtent = transformBoxes(currentExtent, flipped);
+            box.setCoordinates([
+              [
+                [newExtent.top_left_ra, newExtent.top_left_dec],
+                [newExtent.bottom_right_ra, newExtent.top_left_dec],
+                [newExtent.bottom_right_ra, newExtent.bottom_right_dec],
+                [newExtent.top_left_ra, newExtent.bottom_right_dec],
+                [newExtent.top_left_ra, newExtent.top_left_dec],
+              ],
+            ]);
+            const newData = {
+              ...currentData,
+              top_left_ra: newExtent.top_left_ra,
+              top_left_dec: newExtent.top_left_dec,
+              bottom_right_ra: newExtent.bottom_right_ra,
+              bottom_right_dec: newExtent.bottom_right_dec,
+            };
+            feature.set('boxData', newData);
+          }
+        }
+      }
+    });
+  }, [flipped, highlightBoxes]);
+
   return (
     <>
       <div
diff --git a/src/types/maps.ts b/src/types/maps.ts
index 54ddcb5..fb2e2ed 100644
--- a/src/types/maps.ts
+++ b/src/types/maps.ts
@@ -73,16 +73,19 @@ export interface SourceList extends SourceListResponse {
   sources: Source[];
 }
 
-export type Box = {
-  id: number;
-  name: string;
-  description: string;
+export type BoxExtent = {
   top_left_ra: number;
   top_left_dec: number;
   bottom_right_ra: number;
   bottom_right_dec: number;
 };
 
+export type Box = BoxExtent & {
+  id: number;
+  name: string;
+  description: string;
+};
+
 type TileUrlFunction = (x: number[]) => string;
 
 export type ExternalBaselayer = {
diff --git a/src/utils/layerUtils.ts b/src/utils/layerUtils.ts
index 04fbec7..c859a25 100644
--- a/src/utils/layerUtils.ts
+++ b/src/utils/layerUtils.ts
@@ -1,5 +1,5 @@
 import { Feature } from 'ol';
-import { Band } from '../types/maps';
+import { Band, BoxExtent } from '../types/maps';
 import { Source } from '../types/maps';
 
 /**
@@ -95,3 +95,37 @@ export function transformSources(feature: Feature, flipped: boolean) {
     newSourceData,
   };
 }
+
+export function transformBoxes(boxExtent: BoxExtent, flipped: boolean) {
+  let newBoxPosition = {
+    ...boxExtent,
+  };
+
+  if (flipped) {
+    const isLeftRaNegative = boxExtent.top_left_ra < 0;
+    const isRightRaNegative = boxExtent.bottom_right_ra < 0;
+    const newRaLeft = transformCoords(
+      [boxExtent.bottom_right_ra, boxExtent.bottom_right_dec],
+      flipped,
+      'layer'
+    )[0];
+    if (
+      (isLeftRaNegative && isRightRaNegative) ||
+      (!isLeftRaNegative && !isRightRaNegative)
+    ) {
+      newBoxPosition['top_left_ra'] = newRaLeft;
+      newBoxPosition['bottom_right_ra'] = transformCoords(
+        [boxExtent.top_left_ra, boxExtent.top_left_dec],
+        flipped,
+        'layer'
+      )[0];
+    } else {
+      const newRaRight =
+        newRaLeft + Math.abs(boxExtent.bottom_right_ra - boxExtent.top_left_ra);
+      newBoxPosition['top_left_ra'] = newRaLeft;
+      newBoxPosition['bottom_right_ra'] = newRaRight;
+    }
+  }
+
+  return newBoxPosition;
+}

From f5a551091a0506c629fe3164a260b72ceab693e4 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Fri, 20 Jun 2025 17:04:16 -0400
Subject: [PATCH 16/17] Add disabledMessage prop to ToggleSwitch

---
 src/components/ToggleSwitch.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
index 9060bde..f4f2ce8 100644
--- a/src/components/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch.tsx
@@ -4,19 +4,19 @@ type ToggleSwitchProps = {
   checked: boolean;
   onChange: () => void;
   disabled: boolean;
+  disabledMessage: string;
 };
 
 export function ToggleSwitch({
   checked,
   onChange,
   disabled,
+  disabledMessage,
 }: ToggleSwitchProps) {
   return (
     <div
       className="toggle-container"
-      title={
-        disabled ? 'You cannot switch to an incompatible RA range.' : undefined
-      }
+      title={disabled ? disabledMessage : undefined}
     >
       <input
         className="input"

From 8e1122b1ecca431d2baa3cc21e4b12fa119e8b2c Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 23 Jun 2025 12:39:00 -0400
Subject: [PATCH 17/17] Sync addBox actions to flipTiles state

---
 src/components/AddBoxDialog.tsx               |  4 ++
 src/components/BoxMenu.tsx                    | 20 +++++--
 src/components/OpenLayersMap.tsx              | 12 +++-
 .../layers/AddHighlightBoxLayer.tsx           |  9 ++-
 src/components/layers/HighlightBoxLayer.tsx   | 58 ++++++++++++-------
 src/utils/fetchUtils.ts                       | 33 ++++++++++-
 src/utils/layerUtils.ts                       |  9 +++
 7 files changed, 114 insertions(+), 31 deletions(-)

diff --git a/src/components/AddBoxDialog.tsx b/src/components/AddBoxDialog.tsx
index c8cde3d..eea018e 100644
--- a/src/components/AddBoxDialog.tsx
+++ b/src/components/AddBoxDialog.tsx
@@ -12,6 +12,7 @@ type AddBoxDialogProps = {
   setActiveBoxIds: MapProps['setActiveBoxIds'];
   addOptimisticHighlightBox: MapProps['addOptimisticHighlightBox'];
   handleAddBoxCleanup: () => void;
+  flipped: boolean;
 };
 
 export function AddBoxDialog({
@@ -22,6 +23,7 @@ export function AddBoxDialog({
   setActiveBoxIds,
   addOptimisticHighlightBox,
   handleAddBoxCleanup,
+  flipped,
 }: AddBoxDialogProps) {
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
@@ -51,6 +53,7 @@ export function AddBoxDialog({
 
       addSubmapAsBox(
         boxData,
+        flipped,
         setBoxes,
         setActiveBoxIds,
         addOptimisticHighlightBox
@@ -69,6 +72,7 @@ export function AddBoxDialog({
       addOptimisticHighlightBox,
       setActiveBoxIds,
       setBoxes,
+      flipped,
     ]
   );
 
diff --git a/src/components/BoxMenu.tsx b/src/components/BoxMenu.tsx
index e987ad1..73a8494 100644
--- a/src/components/BoxMenu.tsx
+++ b/src/components/BoxMenu.tsx
@@ -3,6 +3,7 @@ import { BoxWithPositionalData, NewBoxData, SubmapData } from '../types/maps';
 import { MenuIcon } from './icons/MenuIcon';
 import { SUBMAP_DOWNLOAD_OPTIONS } from '../configs/submapConfigs';
 import { downloadSubmap } from '../utils/fetchUtils';
+import { transformBoxes } from '../utils/layerUtils';
 
 type BoxMenuProps = {
   isNewBox: boolean;
@@ -12,6 +13,7 @@ type BoxMenuProps = {
   additionalButtons?: ReactNode[];
   submapData?: SubmapData;
   showMenuOverlay?: boolean;
+  flipped: boolean;
 };
 
 export function BoxMenu({
@@ -22,6 +24,7 @@ export function BoxMenu({
   additionalButtons = [],
   submapData,
   showMenuOverlay,
+  flipped,
 }: BoxMenuProps) {
   return (
     <div
@@ -51,13 +54,22 @@ export function BoxMenu({
                   disabled={!submapData}
                   onClick={() => {
                     if (submapData) {
+                      const boxPosition = transformBoxes(
+                        {
+                          top_left_ra: boxData.top_left_ra,
+                          top_left_dec: boxData.top_left_dec,
+                          bottom_right_ra: boxData.bottom_right_ra,
+                          bottom_right_dec: boxData.bottom_right_dec,
+                        },
+                        flipped
+                      );
                       downloadSubmap(
                         {
                           ...submapData,
-                          top: boxData.top_left_dec,
-                          left: boxData.top_left_ra,
-                          bottom: boxData.bottom_right_dec,
-                          right: boxData.bottom_right_ra,
+                          top: boxPosition.top_left_dec,
+                          left: boxPosition.top_left_ra,
+                          bottom: boxPosition.bottom_right_dec,
+                          right: boxPosition.bottom_right_ra,
                         },
                         option.ext
                       );
diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index fa33894..09cac1f 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -88,6 +88,7 @@ export function OpenLayersMap({
     undefined
   );
   const [isDrawing, setIsDrawing] = useState(false);
+  const [isNewBoxDrawn, setIsNewBoxDrawn] = useState(false);
   const [flipTiles, setFlipTiles] = useState(false);
 
   const { activeBaselayer, cmap, cmapValues } = baselayerState;
@@ -335,6 +336,8 @@ export function OpenLayersMap({
     }
   }, [activeBaselayer, cmap, cmapValues, tileLayers, flipTiles]);
 
+  const disableToggleForNewBox = isDrawing || isNewBoxDrawn;
+
   return (
     <div id="map" style={{ cursor: isDrawing ? 'crosshair' : 'auto' }}>
       <ToggleSwitch
@@ -342,7 +345,12 @@ export function OpenLayersMap({
         onChange={() => {
           setFlipTiles(!flipTiles);
         }}
-        disabled={!assertBand(activeBaselayer)}
+        disabled={!assertBand(activeBaselayer) || disableToggleForNewBox}
+        disabledMessage={
+          disableToggleForNewBox
+            ? 'You cannot switch when drawing a new highlight region.'
+            : 'You cannot switch to an incompatible RA range.'
+        }
       />
       <div ref={externalSearchRef} className="ol-popup"></div>
       <div className="ol-zoom ol-control draw-box-btn-container">
@@ -376,10 +384,12 @@ export function OpenLayersMap({
         drawBoxRef={drawBoxRef}
         isDrawing={isDrawing}
         setIsDrawing={setIsDrawing}
+        setIsNewBoxDrawn={setIsNewBoxDrawn}
         submapData={submapData}
         setBoxes={setBoxes}
         setActiveBoxIds={setActiveBoxIds}
         addOptimisticHighlightBox={addOptimisticHighlightBox}
+        flipped={flipTiles}
       />
       <LayerSelector
         bands={bands}
diff --git a/src/components/layers/AddHighlightBoxLayer.tsx b/src/components/layers/AddHighlightBoxLayer.tsx
index 567d8d9..29e59d2 100644
--- a/src/components/layers/AddHighlightBoxLayer.tsx
+++ b/src/components/layers/AddHighlightBoxLayer.tsx
@@ -12,10 +12,12 @@ type AddHightlightBoxLayerProps = {
   drawBoxRef: React.RefObject<VectorLayer | null>;
   isDrawing: boolean;
   setIsDrawing: (drawing: boolean) => void;
+  setIsNewBoxDrawn: (drawn: boolean) => void;
   submapData: MapProps['submapData'];
   setBoxes: MapProps['setBoxes'];
   setActiveBoxIds: MapProps['setActiveBoxIds'];
   addOptimisticHighlightBox: MapProps['addOptimisticHighlightBox'];
+  flipped: boolean;
 };
 
 export function AddHighlightBoxLayer({
@@ -23,12 +25,13 @@ export function AddHighlightBoxLayer({
   drawBoxRef,
   isDrawing,
   setIsDrawing,
+  setIsNewBoxDrawn,
   submapData,
   setBoxes,
   setActiveBoxIds,
   addOptimisticHighlightBox,
+  flipped,
 }: AddHightlightBoxLayerProps) {
-  // const drawBoxRef = useRef<VectorLayer | null>(null);
   const drawRef = useRef<Draw | null>(null);
   const [newBoxData, setNewBoxData] = useState<NewBoxData | undefined>(
     undefined
@@ -92,6 +95,7 @@ export function AddHighlightBoxLayer({
           }
 
           setIsDrawing(false);
+          setIsNewBoxDrawn(true);
         });
         map.addInteraction(draw);
         drawRef.current = draw;
@@ -127,6 +131,7 @@ export function AddHighlightBoxLayer({
 
   const handleAddBoxCleanup = useCallback(() => {
     setNewBoxData(undefined);
+    setIsNewBoxDrawn(false);
     const source = drawBoxRef.current?.getSource();
     if (source) {
       source.clear();
@@ -138,6 +143,7 @@ export function AddHighlightBoxLayer({
       {newBoxData && (
         <BoxMenu
           isNewBox={true}
+          flipped={flipped}
           boxData={newBoxData}
           setShowMenu={setShowNewBoxMenu}
           showMenu={showNewBoxMenu}
@@ -169,6 +175,7 @@ export function AddHighlightBoxLayer({
         setActiveBoxIds={setActiveBoxIds}
         addOptimisticHighlightBox={addOptimisticHighlightBox}
         handleAddBoxCleanup={handleAddBoxCleanup}
+        flipped={flipped}
       />
     </>
   );
diff --git a/src/components/layers/HighlightBoxLayer.tsx b/src/components/layers/HighlightBoxLayer.tsx
index 25904d6..13e810a 100644
--- a/src/components/layers/HighlightBoxLayer.tsx
+++ b/src/components/layers/HighlightBoxLayer.tsx
@@ -8,7 +8,7 @@ import { MenuIcon } from '../icons/MenuIcon';
 import { MapProps } from '../OpenLayersMap';
 import { deleteSubmapBox } from '../../utils/fetchUtils';
 import { BoxMenu } from '../BoxMenu';
-import { transformBoxes } from '../../utils/layerUtils';
+import { transformBoxes, isBoxSynced } from '../../utils/layerUtils';
 
 type HightlightBoxLayerProps = {
   highlightBoxes: MapProps['highlightBoxes'];
@@ -178,28 +178,36 @@ export function HighlightBoxLayer({
           const feature = vectorSource.getFeatures()[0];
           const box = feature.getGeometry() as Polygon;
           const currentData = feature.get('boxData');
+          const id = Number(layerId.replace('highlight-box-', ''));
+          const originalBox = highlightBoxes?.find((b) => b.id === id);
+
+          if (!originalBox) return;
+
+          const originalExtent = {
+            top_left_ra: originalBox.top_left_ra,
+            bottom_right_dec: originalBox.bottom_right_dec,
+            bottom_right_ra: originalBox.bottom_right_ra,
+            top_left_dec: originalBox.top_left_dec,
+          };
+
           if (!flipped) {
-            const id = Number(layerId.replace('highlight-box-', ''));
-            const originalBox = highlightBoxes?.find((b) => b.id === id);
-            if (originalBox) {
-              box.setCoordinates([
-                [
-                  [originalBox.top_left_ra, originalBox.top_left_dec],
-                  [originalBox.bottom_right_ra, originalBox.top_left_dec],
-                  [originalBox.bottom_right_ra, originalBox.bottom_right_dec],
-                  [originalBox.top_left_ra, originalBox.bottom_right_dec],
-                  [originalBox.top_left_ra, originalBox.top_left_dec],
-                ],
-              ]);
-              const newData = {
-                ...currentData,
-                top_left_ra: originalBox.top_left_ra,
-                top_left_dec: originalBox.top_left_dec,
-                bottom_right_ra: originalBox.bottom_right_ra,
-                bottom_right_dec: originalBox.bottom_right_dec,
-              };
-              feature.set('boxData', newData);
-            }
+            box.setCoordinates([
+              [
+                [originalBox.top_left_ra, originalBox.top_left_dec],
+                [originalBox.bottom_right_ra, originalBox.top_left_dec],
+                [originalBox.bottom_right_ra, originalBox.bottom_right_dec],
+                [originalBox.top_left_ra, originalBox.bottom_right_dec],
+                [originalBox.top_left_ra, originalBox.top_left_dec],
+              ],
+            ]);
+            const newData = {
+              ...currentData,
+              top_left_ra: originalBox.top_left_ra,
+              top_left_dec: originalBox.top_left_dec,
+              bottom_right_ra: originalBox.bottom_right_ra,
+              bottom_right_dec: originalBox.bottom_right_dec,
+            };
+            feature.set('boxData', newData);
           } else {
             const currentExtentArray = box.getExtent();
             const currentExtent = {
@@ -208,6 +216,11 @@ export function HighlightBoxLayer({
               bottom_right_ra: currentExtentArray[2],
               top_left_dec: currentExtentArray[3],
             };
+
+            if (!isBoxSynced(currentExtent, originalExtent)) {
+              return;
+            }
+
             const newExtent = transformBoxes(currentExtent, flipped);
             box.setCoordinates([
               [
@@ -260,6 +273,7 @@ export function HighlightBoxLayer({
       {showMenu && selectedBoxData && (
         <BoxMenu
           isNewBox={false}
+          flipped={flipped}
           boxData={selectedBoxData}
           setShowMenu={setShowMenu}
           showMenu={showMenu}
diff --git a/src/utils/fetchUtils.ts b/src/utils/fetchUtils.ts
index 65cae8d..e218ad3 100644
--- a/src/utils/fetchUtils.ts
+++ b/src/utils/fetchUtils.ts
@@ -9,6 +9,7 @@ import {
   SubmapDataWithBounds,
 } from '../types/maps';
 import { SubmapFileExtensions } from '../configs/submapConfigs';
+import { transformBoxes } from './layerUtils';
 
 type SourcesResponse = {
   catalogs: SourceListResponse[];
@@ -107,19 +108,45 @@ export async function addSubmapAsBox(
     top_left: number[];
     bottom_right: number[];
   },
+  flipped: boolean,
   setBoxes: (boxes: Box[]) => void,
   setActiveBoxIds: React.Dispatch<React.SetStateAction<number[]>>,
   addOptimisticHighlightBox: (action: Box) => void
 ) {
   const { params, top_left, bottom_right } = boxData;
 
-  const endpoint = `${SERVICE_URL}/highlights/boxes/new?${params.toString()}`;
+  let syncedPositionForBackend = {
+    top_left_ra: top_left[0],
+    top_left_dec: top_left[1],
+    bottom_right_ra: bottom_right[0],
+    bottom_right_dec: bottom_right[1],
+  };
+
+  if (flipped) {
+    syncedPositionForBackend = transformBoxes(
+      {
+        top_left_ra: top_left[0],
+        top_left_dec: top_left[1],
+        bottom_right_ra: bottom_right[0],
+        bottom_right_dec: bottom_right[1],
+      },
+      flipped
+    );
+  }
 
   const requestBody = {
-    top_left,
-    bottom_right,
+    top_left: [
+      syncedPositionForBackend.top_left_ra,
+      syncedPositionForBackend.top_left_dec,
+    ],
+    bottom_right: [
+      syncedPositionForBackend.bottom_right_ra,
+      syncedPositionForBackend.bottom_right_dec,
+    ],
   };
 
+  const endpoint = `${SERVICE_URL}/highlights/boxes/new?${params.toString()}`;
+
   try {
     const response = await fetch(endpoint, {
       method: 'PUT',
diff --git a/src/utils/layerUtils.ts b/src/utils/layerUtils.ts
index c859a25..e59364a 100644
--- a/src/utils/layerUtils.ts
+++ b/src/utils/layerUtils.ts
@@ -129,3 +129,12 @@ export function transformBoxes(boxExtent: BoxExtent, flipped: boolean) {
 
   return newBoxPosition;
 }
+
+export function isBoxSynced(currentData: BoxExtent, originalData: BoxExtent) {
+  return (
+    currentData.top_left_ra === originalData.top_left_ra &&
+    currentData.top_left_dec === originalData.top_left_dec &&
+    currentData.bottom_right_ra === originalData.bottom_right_ra &&
+    currentData.bottom_right_dec === originalData.bottom_right_dec
+  );
+}