Merge pull request #829 from openlayers/manage-layer-visibility

Set OpenLayers layer visibility to false when no layers are visible
openlayers · Mar 2, 2023 · 7475d02 · 7475d02
2 parents d1fb949 + e703e53
commit 7475d02
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/src/apply.js b/src/apply.js
@@ -20,6 +20,7 @@ import VectorSource from 'ol/source/Vector.js';
 import VectorTileLayer from 'ol/layer/VectorTile.js';
 import VectorTileSource, {defaultLoadFunction} from 'ol/source/VectorTile.js';
 import View from 'ol/View.js';
+import derefLayers from '@mapbox/mapbox-gl-style-spec/deref.js';
 import {
   METERS_PER_UNIT,
   equivalent,
@@ -804,6 +805,27 @@ function updateRasterLayerProperties(glLayer, layer, zoom, functionCache) {
   layer.setOpacity(opacity);
 }
 
+function manageVisibility(layer, mapOrGroup) {
+  layer.on('change', function () {
+    const mapboxLayers = derefLayers(mapOrGroup.get('mapbox-style').layers);
+    const layerMapboxLayerids = layer.get('mapbox-layers');
+    const visible = mapboxLayers
+      .filter(function (mapboxLayer) {
+        return layerMapboxLayerids.includes(mapboxLayer.id);
+      })
+      .some(function (mapboxLayer) {
+        return (
+          !mapboxLayer.layout ||
+          !mapboxLayer.layout.visibility ||
+          mapboxLayer.layout.visibility === 'visible'
+        );
+      });
+    if (layer.get('visible') !== visible) {
+      layer.setVisible(visible);
+    }
+  });
+}
+
 /**
  * @param {*} glStyle Mapbox Style.
  * @param {Map|LayerGroup} mapOrGroup Map or layer group.
@@ -884,6 +906,7 @@ function processStyle(glStyle, mapOrGroup, styleUrl, options) {
           layer = setupBackgroundLayer(glLayer, options, functionCache);
         } else if (glSource.type == 'vector') {
           layer = setupVectorLayer(glSource, styleUrl, options);
+          manageVisibility(layer, mapOrGroup);
         } else if (glSource.type == 'raster') {
           layerIds = [];
           layer = setupRasterLayer(glSource, styleUrl, options);
@@ -896,6 +919,7 @@ function processStyle(glStyle, mapOrGroup, styleUrl, options) {
           );
         } else if (glSource.type == 'geojson') {
           layer = setupGeoJSONLayer(glSource, styleUrl, options);
+          manageVisibility(layer, mapOrGroup);
         } else if (
           glSource.type == 'raster-dem' &&
           glLayer.type == 'hillshade'

diff --git a/test/apply.test.js b/test/apply.test.js
@@ -1086,4 +1086,38 @@ describe('ol-mapbox-style', function () {
         });
     });
   });
+  describe('manageVisibility', function () {
+    let target;
+    beforeEach(function () {
+      target = document.createElement('div');
+    });
+
+    it('manages layer visibility', function (done) {
+      apply(target, JSON.parse(JSON.stringify(brightV9)))
+        .then(function (map) {
+          const layer = getLayer(map, 'landuse_park');
+          should.equal(layer.getVisible(), true);
+
+          const landuseParkLayer = getMapboxLayer(map, 'landuse_park');
+          const mapboxSource = landuseParkLayer.source;
+          const mapboxLayers = map
+            .get('mapbox-style')
+            .layers.filter((layer) => layer.source == mapboxSource);
+          mapboxLayers.forEach((mapboxLayer) => {
+            mapboxLayer.layout = Object.assign(mapboxLayer.layout || {}, {
+              visibility: 'none',
+            });
+            updateMapboxLayer(map, mapboxLayer);
+          });
+          should.equal(layer.getVisible(), false);
+          landuseParkLayer.layout.visibility = 'visible';
+          updateMapboxLayer(map, landuseParkLayer);
+          should.equal(layer.getVisible(), true);
+          done();
+        })
+        .catch(function (error) {
+          done(error);
+        });
+    });
+  });
 });