COG layers are loading data even if not visible #12360 (#12488)

* Avoid loading hidden COG layers

* fix: update with comment

Author: rowheat02

web/client/components/map/openlayers/__tests__/Layer-test.jsx

@@ -23,6 +23,7 @@ import '../plugins/TMSLayer';
 import '../plugins/WFSLayer';
 import '../plugins/ElevationLayer';
 import '../plugins/ArcGISLayer';
+import '../plugins/COGLayer';
 import {
     invalidateCappedLoadExtents,
     isMeaningfulCappedExtentRefinement,
@@ -3636,6 +3637,56 @@ describe('Openlayers layer', () => {
         expect(loadCount).toBe(1);
     });
 
+    describe('COG', () => {
+        const cogOptions = {
+            id: 'cog-layer',
+            type: 'cog',
+            title: 'COG layer',
+            visibility: false,
+            sources: [{
+                url: 'data:image/tiff;base64,'
+            }],
+            sourceMetadata: {
+                crs: 'EPSG:3857'
+            }
+        };
+
+        it('does not create an OpenLayers layer while initially hidden', () => {
+            const layer = ReactDOM.render(
+                <OpenlayersLayer
+                    type="cog"
+                    options={cogOptions}
+                    map={map}/>,
+                document.getElementById("container")
+            );
+
+            expect(layer.layer).toBe(null);
+            expect(map.getLayers().getLength()).toBe(0);
+        });
+
+        it('creates the OpenLayers layer when visibility changes from hidden to visible', () => {
+            const layer = ReactDOM.render(
+                <OpenlayersLayer
+                    type="cog"
+                    options={cogOptions}
+                    map={map}/>,
+                document.getElementById("container")
+            );
+
+            ReactDOM.render(
+                <OpenlayersLayer
+                    type="cog"
+                    options={{...cogOptions, visibility: true}}
+                    map={map}/>,
+                document.getElementById("container")
+            );
+
+            expect(layer.layer).toBeTruthy();
+            expect(layer.layer.getSource()).toBeTruthy();
+            expect(map.getLayers().getLength()).toBe(1);
+        });
+    });
+
     describe('FlatGeobuf', () => {
         // The fixture's FGB header reports geometryType=3 (Polygon) and
         // covers central US (-106.2..-95.9, 34.6..42.0). The shared

web/client/components/map/openlayers/plugins/COGLayer.js

@@ -16,7 +16,7 @@ import { isProjectionAvailable } from '../../../../utils/ProjectionUtils';
 import { getRequestConfigurationByUrl } from '../../../../utils/SecurityUtils';
 import { updateUrlParams } from '../../../../utils/URLUtils';
 
-function create(options) {
+function getSource(options) {
     let sources = [];
     let sourceOptions = {};
     if (options.sources && options.sources.length > 0) {
@@ -32,17 +32,27 @@ function create(options) {
             };
         });
     }
+    return new GeoTIFF({
+        convertToRGB: 'auto', // CMYK, YCbCr, CIELab, and ICCLab images will automatically be converted to RGB
+        sourceOptions,
+        sources,
+        wrapX: true
+    });
+}
+
+function create(options) {
+    // GeoTIFF sources fetch eagerly on creation (unlike WMS, which loads on demand),
+    // so `visible: false` won't prevent requests. Skip creating hidden layers;
+    // `update` recreates them when they become visible.
+    if (options.visibility === false) {
+        return null;
+    }
     const layerOl = new TileLayer({
         msId: options.id,
         style: get(options, 'style.body'),
         opacity: options.opacity !== undefined ? options.opacity : 1,
-        visible: options.visibility,
-        source: new GeoTIFF({
-            convertToRGB: 'auto', // CMYK, YCbCr, CIELab, and ICCLab images will automatically be converted to RGB
-            sourceOptions,
-            sources,
-            wrapX: true
-        }),
+        visible: true,
+        source: getSource(options),
         enablePickFeatures: true,
         zIndex: options.zIndex,
         minResolution: options.minResolution,
@@ -55,6 +65,12 @@ function create(options) {
 Layers.registerType('cog', {
     create,
     update(layer, newOptions, oldOptions, map) {
+        if (!layer && newOptions.visibility !== false) {
+            return create(newOptions, map);
+        }
+        if (!layer) {
+            return null;
+        }
         if (newOptions.srs !== oldOptions.srs
             || !isEqual(newOptions.style, oldOptions.style)
             || !isEqual(newOptions.security, oldOptions.security)