Add new external baselayers and update neo4 to neo11

src/components/styles/aperture-layer.css

@@ -2,5 +2,5 @@
   position: absolute;
   top: 128px;
   left: 9px;
-  z-index: 400;
+  z-index: 1000;
 }

src/components/styles/loading-overlay.css

@@ -1,13 +1,13 @@
 .loading-overlay {
   position: absolute;
-  height: 100%;
-  width: 100%;
+  top: 50%;
+  right: 50%;
   z-index: 500;
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 0.4;
-  background-color: white;
+  pointer-events: all;
+  background-color: transparent;
 }
 
 .loaded {

src/configs/mapSettings.ts

@@ -8,7 +8,6 @@ export const SERVICE_URL: string =
 
 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 = {
@@ -24,29 +23,42 @@ export const EXTERNAL_DETAILS_ID = 'external-comparison-maps';
 
 export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
   {
-    layer_id: 'external-unwise-neo6',
-    name: 'Legacy Survey | unWISE neo6',
+    layer_id: 'external-legacy-dr9',
+    name: 'Legacy Survey | DR9',
     projection: 'EPSG:3857',
-    url: 'https://s3.us-west-2.amazonaws.com/unwise-neo6.legacysurvey.org/{z}/{x}/{y}.jpg',
+    url: 'https://{a-d}.legacysurvey.org/viewer/ls-dr9-mid/1/{z}/{x}/{y}.jpg',
     extent: transformExtent(
       [-180, -MERCATOR_MAX_LAT, 180, MERCATOR_MAX_LAT],
       'EPSG:4326',
       'EPSG:3857'
     ),
-    maxZoom: 10,
+    maxZoom: 16,
     disabledState: (isFlipped: boolean) => !isFlipped,
   },
   {
-    layer_id: 'external-unwise-neo4',
-    name: 'Legacy Survey | unWISE neo4',
+    layer_id: 'external-unwise-neo11',
+    name: 'Legacy Survey | unWISE neo11',
     projection: 'EPSG:3857',
-    url: 'https://imagine.legacysurvey.org/static/tiles/unwise-neo4/1/{z}/{x}/{y}.jpg',
+    url: 'https://{a-d}.legacysurvey.org/viewer/unwise-neo11/1/{z}/{x}/{y}.jpg',
     extent: transformExtent(
       [-180, -MERCATOR_MAX_LAT, 180, MERCATOR_MAX_LAT],
       'EPSG:4326',
       'EPSG:3857'
     ),
-    maxZoom: 8,
+    maxZoom: 16,
+    disabledState: (isFlipped: boolean) => !isFlipped,
+  },
+  {
+    layer_id: 'external-legacy-vlass',
+    name: 'Legacy Survey | VLASS 1.2',
+    projection: 'EPSG:3857',
+    url: 'https://{a-d}.legacysurvey.org/viewer/vlass1.2/1/{z}/{x}/{y}.jpg',
+    extent: transformExtent(
+      [-180, -MERCATOR_MAX_LAT, 180, MERCATOR_MAX_LAT],
+      'EPSG:4326',
+      'EPSG:3857'
+    ),
+    maxZoom: 16,
     disabledState: (isFlipped: boolean) => !isFlipped,
   },
 ];

src/hooks/useTileLoading.ts

@@ -12,6 +12,13 @@ export function useTileLoading(mapRef: React.RefObject<Map | null>) {
 
     let pendingTiles = 0;
 
+    function onMoveStart() {
+      pendingTiles = 0;
+      setIsLoadingTiles(false);
+    }
+
+    map.on('movestart', onMoveStart);
+
     function onLoadStart() {
       pendingTiles++;
       setIsLoadingTiles(true);
@@ -58,6 +65,7 @@ export function useTileLoading(mapRef: React.RefObject<Map | null>) {
     });
 
     return () => {
+      map.un('movestart', onMoveStart);
       map.getLayers().forEach((layer) => {
         if (layer instanceof TileLayer) unbindSource(layer as TileLayer<XYZ>);
       });

src/index.css

@@ -43,6 +43,7 @@ body {
 
 .ol-zoom {
   font-size: 1.5em;
+  z-index: 1000;
 }
 
 .scale-control {