Fix layer visibility on permalink when layer in folder

src/PermalinkUtil/PermalinkUtil.js

@@ -1,4 +1,5 @@
 import TileLayer from 'ol/layer/Tile';
+import OlLayerGroup from 'ol/layer/Group';
 import MapUtil from '../MapUtil/MapUtil';
 
 /**
@@ -48,7 +49,16 @@ export class PermalinkUtil {
     if (layers) {
       allLayers.filter((l) => l instanceof TileLayer)
         .forEach((l) => {
-          l.setVisible(layers.includes(l.get('name')));
+          const visible = layers.includes(l.get('name'));
+          l.setVisible(visible);
+          // also make all parent folders / groups visible so
+          // that the layer becomes visible in map
+          if (visible) {
+            PermalinkUtil.setParentsVisible(
+              map,
+              map.getLayerGroup().getLayers(),
+              l.ol_uid);
+          }
         });
     }
 
@@ -63,6 +73,25 @@ export class PermalinkUtil {
       map.getView().setZoom(parseInt(zoom, 10));
     }
   };
+
+  /**
+   * Search through the given Ol-Collection for the given id and
+   * set all parenting groups visible.
+   * @param {Object} map The openlayers map
+   * @param {Object} coll The Openlayers Collection
+   * @param {string} id Ther layer ol uid to search for
+   */
+   static setParentsVisible = (map, coll, id) => {
+     coll.forEach(el => {
+       if (el instanceof OlLayerGroup) {
+         const layers = MapUtil.getLayersByGroup(map, el);
+         if (layers.map(layer => layer.ol_uid).includes(id)) {
+           el.setVisible(true);
+         }
+         PermalinkUtil.setParentsVisible(map, el.getLayers(), id);
+       }
+     });
+   };
 }
 
 export default PermalinkUtil;

src/PermalinkUtil/PermalinkUtil.spec.js

@@ -1,6 +1,7 @@
 /*eslint-env jest*/
 import OlSourceTile from 'ol/source/Tile';
 import OlLayerTile from 'ol/layer/Tile';
+import OlLayerGroup from 'ol/layer/Group';
 
 import {
   PermalinkUtil
@@ -174,7 +175,8 @@ describe('PermalinkUtil', () => {
         Object.defineProperty(window, 'location', {
           value: {
             href: link
-          }
+          },
+          configurable: true
         });
         PermalinkUtil.applyLink(map, '|');
 
@@ -184,6 +186,51 @@ describe('PermalinkUtil', () => {
           .map(l => l.get('name'));
         expect(visibles).toEqual(['peter', 'pan']);
       });
+
+      it('applies visible state to parenting groups', () => {
+        map.getLayers().clear();
+        map.addLayer(new OlLayerGroup({
+          name: 'peter',
+          visible: false,
+          layers: [
+            new OlLayerTile({
+              name: 'paul',
+              visible: false,
+              source: new OlSourceTile({
+                attributions: ''
+              })
+            }),
+            new OlLayerTile({
+              name: 'pan',
+              visible: false,
+              source: new OlSourceTile({
+                attributions: ''
+              })
+            })
+          ]
+        }));
+
+        const link = 'http://fake?zoom=3&center=10|20&layers=pan';
+        delete global.window.location;
+        global.window = Object.create(window);
+        Object.defineProperty(window, 'location', {
+          value: {
+            href: link
+          },
+          configurable: true
+        });
+        PermalinkUtil.applyLink(map, '|');
+
+        const firstLevelVisibles = map.getLayers().getArray()
+          .filter(l => l.getVisible())
+          .map(l => l.get('name'));
+        expect(firstLevelVisibles).toEqual(['peter']);
+
+        const secondLevelVisibles = map.getLayers().getArray()[0]
+          .getLayers().getArray().filter(l => l.getVisible())
+          .map(l => l.get('name'));
+        expect(secondLevelVisibles).toEqual(['pan']);
+      });
     });
   });
 });