Changes based on comments

packages/geoview-core/public/configs/navigator/05-layer-zoom-levels.json

@@ -44,13 +44,13 @@
             "layerName": "Limited by Zoom - Water Quality",
             "entryType": "group",
             "initialSettings": {
-              "minZoom": 3
+              "minZoom": 5
             },
             "listOfLayerEntryConfig": [
               {
                 "layerId": "5",
                 "initialSettings": {
-                  "minZoom": 5
+                  "minZoom": 7
                 }
               },
               {

packages/geoview-core/src/api/config/types/config-constants.ts

@@ -66,7 +66,7 @@ export const CV_CONST_LEAF_LAYER_SCHEMA_PATH: Record<LayerTypesKey, string> = {
   IMAGE_STATIC: 'https://cgpv/schema#/definitions/ImageStaticLayerEntryConfig',
   GEOPACKAGE: 'https://cgpv/schema#/definitions/VectorLayerEntryConfig',
   XYZ_TILES: 'https://cgpv/schema#/definitions/TileLayerEntryConfig',
-  VECTOR_TILES: 'Thttps://cgpv/schema#/definitions/TileLayerEntryConfig',
+  VECTOR_TILES: 'https://cgpv/schema#/definitions/TileLayerEntryConfig',
   OGC_FEATURE: 'https://cgpv/schema#/definitions/VectorLayerEntryConfig',
   CSV: 'https://cgpv/schema#/definitions/VectorLayerEntryConfig',
 };

packages/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts

@@ -430,6 +430,23 @@ export class MapEventProcessor extends AbstractEventProcessor {
     if (getAppCrosshairsActive(mapId)) this.getMapViewer(mapId).emitMapSingleClick(clickCoordinates);
   }
 
+  static setInVisibleRange(mapId: string, layerPath: string): void {
+    const { orderedLayerInfo, zoom } = this.getMapStateProtected(mapId);
+    const legendLayer = LegendEventProcessor.getLegendLayerInfo(mapId, layerPath);
+
+    if (!legendLayer) return;
+
+    const { minZoom, maxZoom } = legendLayer;
+    const inVisibleRange = zoom ? (!maxZoom || zoom <= maxZoom) && (!minZoom || zoom > minZoom) : true;
+
+    const orderedLayer = orderedLayerInfo.find((layer) => layer.layerPath === layerPath);
+
+    if (orderedLayer && orderedLayer.inVisibleRange !== inVisibleRange) {
+      orderedLayer.inVisibleRange = inVisibleRange;
+      this.setOrderedLayerInfoWithNoOrderChangeState(mapId, orderedLayerInfo);
+    }
+  }
+
   static setZoom(mapId: string, zoom: number): void {
     // Save in store
     this.getMapStateProtected(mapId).setterActions.setZoom(zoom);
@@ -810,7 +827,7 @@ export class MapEventProcessor extends AbstractEventProcessor {
     const pathToSearch = layerPathToReplace || layerPath;
     const index = this.getMapIndexFromOrderedLayerInfo(mapId, pathToSearch);
     const replacedLayers = this.findMapLayerAndChildrenFromOrderedInfo(mapId, pathToSearch);
-    const newOrderedLayerInfo = LayerApi.generateArrayOfLayerOrderInfo(geoviewLayerConfig, this.getMapViewer(mapId).getView().getZoom());
+    const newOrderedLayerInfo = LayerApi.generateArrayOfLayerOrderInfo(geoviewLayerConfig);
     orderedLayerInfo.splice(index, replacedLayers.length, ...newOrderedLayerInfo);
 
     // Redirect
@@ -830,7 +847,7 @@ export class MapEventProcessor extends AbstractEventProcessor {
     index?: number
   ): void {
     const { orderedLayerInfo } = this.getMapStateProtected(mapId);
-    const newOrderedLayerInfo = LayerApi.generateArrayOfLayerOrderInfo(geoviewLayerConfig, this.getMapViewer(mapId).getView().getZoom());
+    const newOrderedLayerInfo = LayerApi.generateArrayOfLayerOrderInfo(geoviewLayerConfig);
     if (!index) orderedLayerInfo.unshift(...newOrderedLayerInfo);
     else orderedLayerInfo.splice(index, 0, ...newOrderedLayerInfo);
 

packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx

@@ -59,7 +59,7 @@ export function SingleLayer({ depth, layer, showLayerDetailsPanel, isFirst, isLa
   const { t } = useTranslation<string>();
 
   const theme = useTheme();
-  const classes = getSxClasses(theme);
+  const sxClasses = useMemo(() => getSxClasses(theme), [theme]);
 
   // Get store states
   const { setSelectedLayerPath, setSelectedLayerSortingArrowId } = useLayerStoreActions();
@@ -441,8 +441,7 @@ export function SingleLayer({ depth, layer, showLayerDetailsPanel, isFirst, isLa
         listItems[0]?.focus();
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [displayState]);
+  }, [displayState, selectedFooterLayerListItemId.length]);
 
   const AnimatedPaper = animated(Paper);
 
@@ -453,7 +452,7 @@ export function SingleLayer({ depth, layer, showLayerDetailsPanel, isFirst, isLa
           <ListItemButton
             selected={layerIsSelected || (layerChildIsSelected && !legendExpanded)}
             tabIndex={-1}
-            sx={{ minHeight: '4.51rem', ...(!inVisibleRange && classes.outOfRange) }}
+            sx={{ minHeight: '4.51rem', ...(!inVisibleRange && sxClasses.outOfRange) }}
             className={!inVisibleRange ? 'out-of-range' : ''}
           >
             <LayerIcon layer={layer} />

packages/geoview-core/src/core/components/legend/legend-layer.tsx

@@ -111,14 +111,12 @@ export function LegendLayer({ layer }: LegendLayerProps): JSX.Element {
           tooltip={t('layers.toggleCollapse') as string}
           onExpandClick={handleExpandGroupClick}
         />
-        {inVisibleRange && (
-          <CollapsibleContent
-            layer={currentLayer}
-            legendExpanded={!isCollapsed}
-            initLightBox={initLightBox}
-            LegendLayerComponent={LegendLayer}
-          />
-        )}
+        <CollapsibleContent
+          layer={currentLayer}
+          legendExpanded={!isCollapsed}
+          initLightBox={initLightBox}
+          LegendLayerComponent={LegendLayer}
+        />
       </Box>
       <LightBoxComponent />
     </>

packages/geoview-core/src/geo/layer/geoview-layers/esri-layer-common.ts

@@ -366,8 +366,8 @@ export function commonProcessInitialSettings(
   }
 
   // Set zoom limits for max / min zooms
-  // ! Note: minScale is actually the maxZoom and maxScale is actually the minZoom
-  // ! As the scale gets smaller, the zoom gets larger
+  // GV Note: minScale is actually the maxZoom and maxScale is actually the minZoom
+  // GV As the scale gets smaller, the zoom gets larger
   if (layerConfig.minScale) {
     const maxScaleZoomLevel = getZoomFromScale(layer.mapId, layerConfig.minScale);
     if (maxScaleZoomLevel && (!layerConfig.initialSettings.maxZoom || maxScaleZoomLevel > layerConfig.initialSettings.maxZoom)) {

packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts

@@ -635,6 +635,7 @@ export class WMS extends AbstractGeoViewRaster {
         if (!layerConfig.source.featureInfo) layerConfig.source.featureInfo = { queryable: !!layerCapabilities.queryable };
         MapEventProcessor.setMapLayerQueryable(this.mapId, layerConfig.layerPath, layerConfig.source.featureInfo.queryable);
 
+        // TODO Add Scale and Zoom level changes to config
         // TODO Since web map runs mostly in zoom levels, may not need Scale limits
         // Set Min/Max Scale Limits
         if (
@@ -654,8 +655,8 @@ export class WMS extends AbstractGeoViewRaster {
           layerConfig.initialSettings!.bounds = validateExtent(layerCapabilities.EX_GeographicBoundingBox as Extent);
 
         // Set zoom limits for max / min zooms
-        // ! Note: minScale is actually the maxZoom and maxScale is actually the minZoom
-        // ! As the scale gets smaller, the zoom gets larger
+        // GV Note: minScale is actually the maxZoom and maxScale is actually the minZoom
+        // GV As the scale gets smaller, the zoom gets larger
         if (layerConfig.minScale) {
           const maxScaleZoomLevel = getZoomFromScale(this.mapId, layerConfig.minScale);
           if (maxScaleZoomLevel && (!layerConfig.initialSettings.maxZoom || maxScaleZoomLevel > layerConfig.initialSettings.maxZoom)) {

packages/geoview-core/src/geo/layer/gv-layers/abstract-gv-layer.ts

@@ -228,11 +228,11 @@ export abstract class AbstractGVLayer extends AbstractBaseLayer {
     this.setVisible(layerConfig.initialSettings?.states?.visible !== false);
 
     // Set the zoom levels here to prevent the layer being stuck endlessly loading
-    if (layerConfig.initialSettings.maxZoom && layerConfig.initialSettings.maxZoom !== 0) {
+    if (layerConfig.initialSettings.maxZoom) {
       this.setMaxZoom(layerConfig.initialSettings.maxZoom);
     }
 
-    if (layerConfig.initialSettings.minZoom && layerConfig.initialSettings.minZoom !== 0) {
+    if (layerConfig.initialSettings.minZoom) {
       this.setMinZoom(layerConfig.initialSettings.minZoom);
     }
 

packages/geoview-core/src/geo/layer/gv-layers/gv-group-layer.ts

@@ -19,6 +19,10 @@ export class GVGroupLayer extends AbstractBaseLayer {
   public constructor(mapId: string, olLayerGroup: LayerGroup, layerConfig: GroupLayerEntryConfig) {
     super(mapId, layerConfig);
     this.olLayer = olLayerGroup;
+
+    // Set extreme zoom settings to group layer so sub layers can load
+    this.olLayer.setMaxZoom(50);
+    this.olLayer.setMinZoom(0);
   }
 
   /**

packages/geoview-core/src/geo/layer/layer.ts

@@ -306,10 +306,7 @@ export class LayerApi {
    * @param {TypeGeoviewLayerConfig} geoviewLayerConfig - The config to get the info from.
    * @returns {TypeOrderedLayerInfo[]} The array of ordered layer info.
    */
-  static generateArrayOfLayerOrderInfo(
-    geoviewLayerConfig: TypeGeoviewLayerConfig | TypeLayerEntryConfig,
-    zoom: number | undefined
-  ): TypeOrderedLayerInfo[] {
+  static generateArrayOfLayerOrderInfo(geoviewLayerConfig: TypeGeoviewLayerConfig | TypeLayerEntryConfig): TypeOrderedLayerInfo[] {
     const newOrderedLayerInfos: TypeOrderedLayerInfo[] = [];
 
     const addSubLayerPathToLayerOrder = (layerEntryConfig: TypeLayerEntryConfig, layerPath: string): void => {
@@ -325,9 +322,7 @@ export class LayerApi {
           layerEntryConfig.initialSettings?.states?.legendCollapsed !== undefined
             ? layerEntryConfig.initialSettings?.states?.legendCollapsed
             : false,
-        inVisibleRange:
-          (!layerEntryConfig.initialSettings?.maxZoom || !zoom || layerEntryConfig.initialSettings.maxZoom >= zoom) &&
-          (!layerEntryConfig.initialSettings?.minZoom || !zoom || layerEntryConfig.initialSettings.minZoom < zoom),
+        inVisibleRange: true,
       };
       newOrderedLayerInfos.push(layerInfo);
       if (layerEntryConfig.listOfLayerEntryConfig?.length) {
@@ -349,9 +344,7 @@ export class LayerApi {
               ? geoviewLayerConfig.initialSettings?.states?.legendCollapsed
               : false,
           visible: geoviewLayerConfig.initialSettings?.states?.visible !== false,
-          inVisibleRange:
-            (!geoviewLayerConfig.initialSettings?.maxZoom || !zoom || geoviewLayerConfig.initialSettings.maxZoom >= zoom) &&
-            (!geoviewLayerConfig.initialSettings?.minZoom || !zoom || geoviewLayerConfig.initialSettings.minZoom < zoom),
+          inVisibleRange: true,
         };
         newOrderedLayerInfos.push(layerInfo);
         (geoviewLayerConfig as TypeGeoviewLayerConfig).listOfLayerEntryConfig.forEach((layerEntryConfig) => {
@@ -414,10 +407,7 @@ export class LayerApi {
           promise.value.forEach((geoviewLayerConfig) => {
             try {
               // Generate array of layer order information
-              const layerInfos = LayerApi.generateArrayOfLayerOrderInfo(
-                geoviewLayerConfig,
-                MapEventProcessor.getMapViewer(this.getMapId()).getView().getZoom()
-              );
+              const layerInfos = LayerApi.generateArrayOfLayerOrderInfo(geoviewLayerConfig);
               orderedLayerInfos.push(...layerInfos);
 
               // Add it
@@ -1000,10 +990,6 @@ export class LayerApi {
    * @returns A new GV Layer which is kept track of in LayerApi and initialized
    */
   #createGVGroupLayer(mapId: string, olLayerGroup: LayerGroup, layerConfig: GroupLayerEntryConfig): GVGroupLayer | undefined {
-    // Set extreme zoom settings to group layer so sub layers can load
-    olLayerGroup.setMaxZoom(50);
-    olLayerGroup.setMinZoom(0);
-
     // Create the GV Group Layer
     const gvGroupLayer = new GVGroupLayer(mapId, olLayerGroup, layerConfig);
 
@@ -1014,6 +1000,14 @@ export class LayerApi {
     return gvGroupLayer;
   }
 
+  #setLayerInVisibleRange(layerConfig: TypeLayerEntryConfig): void {
+    if (layerConfig.listOfLayerEntryConfig) {
+      layerConfig.listOfLayerEntryConfig.forEach((subLayerConfig) => this.#setLayerInVisibleRange(subLayerConfig));
+    }
+
+    MapEventProcessor.setInVisibleRange(this.getMapId(), layerConfig.layerPath);
+  }
+
   /**
    * Continues the addition of the geoview layer.
    * Adds the layer to the map if valid. If not (is a string) emits an error.
@@ -1041,6 +1035,9 @@ export class LayerApi {
     if (!geoviewLayer.allLayerStatusAreGreaterThanOrEqualTo('error')) {
       // Add the OpenLayers layer to the map officially
       this.mapViewer.map.addLayer(geoviewLayer.olRootLayer!);
+
+      // Set in visible range property for all newly added layers
+      geoviewLayer.listOfLayerEntryConfig.forEach((layer) => this.#setLayerInVisibleRange(layer));
     }
 
     // Log

packages/geoview-core/src/geo/map/map-schema-types.ts

@@ -385,6 +385,10 @@ export type TypeGeoviewLayerConfig = {
    */
   initialSettings?: TypeLayerInitialSettings;
 
+  /** Min and max scales */
+  minScale?: number;
+  maxScale?: number;
+
   /** The layer entries to use from the GeoView layer. */
   listOfLayerEntryConfig: TypeLayerEntryConfig[];
 };