fix: enable hash control over individual sublayers (#1635)

* fix: enable hash to control sub layers

* chore: move functions to proper location

Author: karljakoblarsson

apps/client/src/models/AppModel.js

@@ -38,6 +38,8 @@ import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Icon, Fill, Stroke, Style } from "ol/style";
 
+import { setOLSubLayers } from "../utils/groupLayers";
+
 class AppModel {
   /**
    * Initialize new AddModel
@@ -1072,17 +1074,16 @@ class AppModel {
           if (wantedGl[layer]) {
             // In addition, this looks like a group layer that has
             // its sublayers specified and we should take care of that too
-            this.globalObserver.publish("layerswitcher.showLayer", {
-              layer: olLayer,
-              subLayersToShow: wantedGl[layer]?.split(","),
-            });
+            const subLayersToShow = wantedGl[layer]?.split(",");
+            setOLSubLayers(olLayer, subLayersToShow);
           }
           // On the other hand, if the layer to be shown does not exist in 'wantedGl',
           // it means that we should show ALL the sublayers.
           // For that we must publish the event slightly differently. (Also, see
           // where we subscribe to layerswitcher.showLayer for further understanding.)
           else {
-            this.globalObserver.publish("layerswitcher.showLayer", olLayer);
+            const allSubLayers = olLayer.get("allSubLayers");
+            setOLSubLayers(olLayer, allSubLayers);
           }
         }
         // That's it for group layer. The other layers, the "normal"
@@ -1107,6 +1108,7 @@ class AppModel {
         } else if (olLayer.get("layerType") === "group") {
           // Tell the LayerSwitcher about it
           this.globalObserver.publish("layerswitcher.hideLayer", olLayer);
+          olLayer.setVisible(false);
         } else {
           olLayer.setVisible(false);
         }
@@ -1124,10 +1126,9 @@ class AppModel {
           const olLayer = this.map
             .getAllLayers()
             .find((l) => l.get("name") === key);
-          this.globalObserver.publish("layerswitcher.showLayer", {
-            layer: olLayer,
-            subLayersToShow: wantedGl[key]?.split(","),
-          });
+
+          const subLayersToShow = wantedGl[key]?.split(",");
+          setOLSubLayers(olLayer, subLayersToShow);
         }
       }
 
@@ -1151,14 +1152,13 @@ class AppModel {
           // Determine how we should call the layerswitcher.showLayer event.
           // A: No sublayers specified for layer in 'wantedGl'. That means show ALL sublayers.
           // B: Sublayers found in 'wantedGl'. Set visibility accordingly.
-          const param =
-            wantedGl[layer] === undefined
-              ? olLayer
-              : {
-                  layer: olLayer,
-                  subLayersToShow: wantedGl[layer]?.split(","),
-                };
-          this.globalObserver.publish("layerswitcher.showLayer", param);
+          if (wantedGl[layer] === undefined) {
+            const allSubLayers = olLayer.get("allSubLayers");
+            setOLSubLayers(olLayer, allSubLayers);
+          } else {
+            const subLayersToShow = wantedGl[layer]?.split(",");
+            setOLSubLayers(olLayer, subLayersToShow);
+          }
         }
       });
     }

apps/client/src/plugins/LayerSwitcher/LayerSwitcherProvider.js

@@ -12,6 +12,7 @@ import LayerSwitcherView from "./LayerSwitcherView.js";
 import { useLayerZoomWarningSnackbar } from "./useLayerZoomWarningSnackbar";
 import { functionalOk as functionalCookieOk } from "../../models/Cookie";
 import LocalStorageHelper from "../../utils/LocalStorageHelper";
+import { setOLSubLayers, getAllLayerIdsInGroup } from "../../utils/groupLayers";
 
 export const QUICK_ACCESS_KEY = "quickAccess";
 export const QUICK_ACCESS_LS_KEY = "quickAccessLayers";
@@ -96,54 +97,6 @@ const LayerZoomVisibleSnackbarProvider = ({ children, layers }) => {
   );
 };
 
-const setOLSubLayers = (olLayer, visibleSubLayersArray) => {
-  if (visibleSubLayersArray.length === 0) {
-    // Fix underlying source
-    olLayer.getSource().updateParams({
-      // Ensure that the list of sublayers is emptied (otherwise they'd be
-      // "remembered" the next time user toggles group)
-      LAYERS: "",
-      // Remove any filters
-      CQL_FILTER: null,
-    });
-
-    // Hide the layer in OL
-    olLayer.setVisible(false);
-  } else {
-    // Set LAYERS and STYLES so that the exact sublayers that are needed
-    // will be visible
-    olLayer.getSource().updateParams({
-      // join(), so we always provide a string as value to LAYERS
-      LAYERS: visibleSubLayersArray.join(),
-      // Filter STYLES to only contain styles for currently visible layers,
-      // and maintain the order from layersInfo (it's crucial that the order
-      // of STYLES corresponds exactly to the order of LAYERS!)
-      STYLES: Object.entries(olLayer.layersInfo)
-        .filter((k) => visibleSubLayersArray.indexOf(k[0]) !== -1)
-        .map((l) => l[1].style)
-        .join(","),
-      CQL_FILTER: null,
-    });
-    olLayer.set("subLayers", visibleSubLayersArray);
-    olLayer.setVisible(true);
-  }
-};
-
-// TODO move to common. Copied from LayerGroup.js
-const getAllLayerIdsInGroup = (group) => {
-  if (!group) {
-    return [];
-  }
-
-  if (!group.children) {
-    return [group.id];
-  } else {
-    return group.children.flatMap((c) => {
-      return getAllLayerIdsInGroup(c);
-    });
-  }
-};
-
 const getGroupConfigById = (tree, groupId) => {
   if (!tree) {
     return null;

apps/client/src/utils/groupLayers.js

@@ -0,0 +1,46 @@
+export const setOLSubLayers = (olLayer, visibleSubLayersArray) => {
+  if (visibleSubLayersArray.length === 0) {
+    // Fix underlying source
+    olLayer.getSource().updateParams({
+      // Ensure that the list of sublayers is emptied (otherwise they'd be
+      // "remembered" the next time user toggles group)
+      LAYERS: "",
+      // Remove any filters
+      CQL_FILTER: null,
+    });
+
+    // Hide the layer in OL
+    olLayer.setVisible(false);
+  } else {
+    // Set LAYERS and STYLES so that the exact sublayers that are needed
+    // will be visible
+    olLayer.getSource().updateParams({
+      // join(), so we always provide a string as value to LAYERS
+      LAYERS: visibleSubLayersArray.join(),
+      // Filter STYLES to only contain styles for currently visible layers,
+      // and maintain the order from layersInfo (it's crucial that the order
+      // of STYLES corresponds exactly to the order of LAYERS!)
+      STYLES: Object.entries(olLayer.layersInfo)
+        .filter((k) => visibleSubLayersArray.indexOf(k[0]) !== -1)
+        .map((l) => l[1].style)
+        .join(","),
+      CQL_FILTER: null,
+    });
+    olLayer.set("subLayers", visibleSubLayersArray);
+    olLayer.setVisible(true);
+  }
+};
+
+export const getAllLayerIdsInGroup = (group) => {
+  if (!group) {
+    return [];
+  }
+
+  if (!group.children) {
+    return [group.id];
+  } else {
+    return group.children.flatMap((c) => {
+      return getAllLayerIdsInGroup(c);
+    });
+  }
+};