@geops/rvf-mobility-web-component 0.1.15 → 0.1.16

package/src/RvfPoisLayer/RvfPoisLayer.tsx

@@ -3,6 +3,7 @@ import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -19,6 +20,7 @@ function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
         return metadata?.["mapset.filter"] === "mapset_poi";
       },
       maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.pois,
       visible: false,
       ...(props || {}),
     });

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -0,0 +1,64 @@
+import VectorLayer from "ol/layer/Vector";
+import { Vector } from "ol/source";
+import { Circle, Stroke, Style } from "ol/style";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+function SingleClickListener() {
+  const { baseLayer, map } = useMapContext();
+  const { selectedFeature } = useRvfContext();
+
+  const layer = useMemo(() => {
+    const layer = new VectorLayer({
+      source: new Vector(),
+      style: new Style({
+        image: new Circle({
+          fill: null,
+          radius: 15,
+          stroke: new Stroke({
+            color: "red",
+            width: 3,
+          }),
+        }),
+      }),
+    });
+    return layer;
+  }, []);
+
+  useEffect(() => {
+    const vectorTileFeature = selectedFeature?.get("vectorTileFeature");
+    selectedFeature?.set("selected", true);
+    if (selectedFeature) {
+      const feature = selectedFeature.clone();
+      feature.setStyle(null);
+      layer.getSource().addFeature(feature);
+      if (vectorTileFeature) {
+        console.log(vectorTileFeature);
+        baseLayer?.mapLibreMap.setFeatureState(vectorTileFeature, {
+          hover: true,
+        });
+      }
+    }
+    return () => {
+      layer?.getSource().clear();
+      selectedFeature?.set("selected", false);
+      if (vectorTileFeature) {
+        baseLayer?.mapLibreMap?.setFeatureState(vectorTileFeature, {
+          hover: false,
+        });
+      }
+    };
+  }, [baseLayer?.mapLibreMap, layer, selectedFeature]);
+
+  useEffect(() => {
+    layer?.setMap(map);
+    return () => {
+      layer?.setMap(null);
+    };
+  }, [layer, map]);
+
+  return null;
+}
+export default SingleClickListener;

package/src/RvfSelectedFeatureHighlightLayer/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RvfSelectedFeatureHighlightLayer";

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -6,6 +6,7 @@ import { useEffect, useMemo } from "preact/hooks";
 import Automat from "../icons/Automat";
 import InPerson from "../icons/InPerson";
 import Video from "../icons/Video";
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -24,6 +25,7 @@ function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
         return metadata?.["general.filter"] === "selling_points";
       },
       maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.verkaufsstellen,
       ...(props || {}),
 
       title: (

package/src/RvfShare/RvfShare.tsx

@@ -16,7 +16,7 @@ function RvfShare({
   const { map } = useMapContext();
 
   return (
-    <div className={twMerge("flex flex-col gap-2 " + className)} {...props}>
+    <div className={twMerge("flex flex-col gap-6 " + className)} {...props}>
       <a
         className="flex items-center gap-2"
         href={`mailto:?subject=Karte&body=${window?.location.href}`}

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -4,7 +4,6 @@ import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { Feature } from "ol";
 import { Point } from "ol/geom";
 import { Group, Vector } from "ol/layer";
-import { unByKey } from "ol/Observable";
 import { Cluster } from "ol/source";
 import VectorSource from "ol/source/Vector";
 import { memo } from "preact/compat";
@@ -15,8 +14,9 @@ import Car from "../icons/Car";
 import CargoBike from "../icons/CargoBike";
 import Ride from "../icons/Ride";
 import Scooter from "../icons/Scooter";
+import { API_REQUEST_FEATURE_TYPE, RVF_LAYERS_NAMES } from "../utils/constants";
+import createFreeFloatMobilityLayer from "../utils/createFreeFloatMobilityLayer";
 import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
-import createFreeFloatMobilityLayer from "../utils/createSharedMobilityLayer";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -38,10 +38,19 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
             return metadata?.["rvf.filter"] === "bike";
           },
           maplibreLayer: baseLayer,
+          maxZoom: 18,
         }),
-        createMobiDataBwWfsLayer("sharing_stations_bicycle", "green"),
-        createFreeFloatMobilityLayer("sharing_vehicles", "green", "bike"),
+        createMobiDataBwWfsLayer(
+          API_REQUEST_FEATURE_TYPE.stations.bike,
+          "green",
+        ),
+        createFreeFloatMobilityLayer(
+          API_REQUEST_FEATURE_TYPE.freeFloat.bike,
+          "green",
+          "bike",
+        ),
       ],
+      name: RVF_LAYERS_NAMES.fahrrad,
       title: (
         <div className="flex items-center justify-between gap-2">
           Fahrrad
@@ -58,10 +67,19 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
             return metadata?.["rvf.filter"] === "car";
           },
           maplibreLayer: baseLayer,
+          maxZoom: 18,
         }),
-        createMobiDataBwWfsLayer("sharing_stations_car", "green"),
-        createFreeFloatMobilityLayer("sharing_vehicles", "green", "car"),
+        createMobiDataBwWfsLayer(
+          API_REQUEST_FEATURE_TYPE.stations.car,
+          "green",
+        ),
+        createFreeFloatMobilityLayer(
+          API_REQUEST_FEATURE_TYPE.freeFloat.car,
+          "green",
+          "car",
+        ),
       ],
+      name: RVF_LAYERS_NAMES.auto,
       title: (
         <div className="flex items-center justify-between gap-2">
           Auto
@@ -78,10 +96,19 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
             return metadata?.["rvf.filter"] === "cargo_bike";
           },
           maplibreLayer: baseLayer,
+          maxZoom: 18,
         }),
-        createMobiDataBwWfsLayer("sharing_stations_cargo_bicycle", "green"),
-        createFreeFloatMobilityLayer("sharing_vehicles", "green", "cargo_bike"),
+        createMobiDataBwWfsLayer(
+          API_REQUEST_FEATURE_TYPE.stations.cargoBike,
+          "green",
+        ),
+        createFreeFloatMobilityLayer(
+          API_REQUEST_FEATURE_TYPE.freeFloat.cargoBike,
+          "green",
+          "cargo_bike",
+        ),
       ],
+      name: RVF_LAYERS_NAMES.cargobike,
       title: (
         <div className="flex items-center justify-between gap-2">
           Cargobike
@@ -100,9 +127,19 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         //   },
         //   maplibreLayer: baseLayer,
         // }),
-        createMobiDataBwWfsLayer("sharing_stations_scooters_standing", "green"),
-        createFreeFloatMobilityLayer("sharing_vehicles", "green", "scooter"),
+
+        // https://www.mobidata-bw.de/dataset/escootch
+        createMobiDataBwWfsLayer(
+          API_REQUEST_FEATURE_TYPE.stations.scooter,
+          "green",
+        ),
+        createFreeFloatMobilityLayer(
+          API_REQUEST_FEATURE_TYPE.freeFloat.scooter,
+          "green",
+          "scooter",
+        ),
       ],
+      name: RVF_LAYERS_NAMES.eroller,
       title: (
         <div className="flex items-center justify-between gap-2">
           E-Roller
@@ -117,6 +154,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "hitchhiking";
       },
       maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.mitfahrpunkte,
       title: (
         <div className="flex items-center justify-between gap-2">
           Mitfahrpunkte
@@ -134,14 +172,14 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         sharingHitchHiking,
       ],
       ...props,
-    });
+    } as GroupOptions);
   }, [baseLayer, props]);
 
   // Reload features every minute
   useEffect(() => {
     const interval = window.setInterval(() => {
       group.getLayers().forEach((layer: Group) => {
-        layer.getLayers().forEach((layer: MaplibreStyleLayer | Vector) => {
+        layer.getLayers?.().forEach((layer: MaplibreStyleLayer | Vector) => {
           const source = layer.getSource();
           source?.refresh();
 
@@ -167,15 +205,9 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     if (!map || !group) {
       return;
     }
-
-    const key = map.on("moveend", () => {
-      console.log("ZOOM", map.getView().getZoom());
-    });
-
     map.addLayer(group);
 
     return () => {
-      unByKey(key);
       map.removeLayer(group);
     };
   }, [map, group]);

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -110,16 +110,8 @@ function SingleClickListener() {
         setSelectedFeature(null);
         setSelectedFeatures([]);
       } else {
-        const feats = [];
-        features.forEach((feature) => {
-          if (feature.get("features")) {
-            feats.push(...feature.get("features"));
-          } else {
-            feats.push(feature);
-          }
-        });
-        setSelectedFeatures(feats);
-        setSelectedFeature(feats[0]);
+        setSelectedFeatures(features);
+        setSelectedFeature(features[0]);
       }
     },
     [

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

@@ -3,6 +3,7 @@ import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -20,6 +21,7 @@ function RvfTarifZonenLayer(props: MaplibreStyleLayerOptions) {
         return metadata?.["rvf.filter"] === "zones";
       },
       maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.tarifzonen,
       ...(props || {}),
     });
   }, [baseLayer, props]);

package/src/RvfTopics/RvfTopics.tsx

@@ -2,27 +2,42 @@ import { getUid } from "ol";
 import { Group } from "ol/layer";
 import BaseLayer from "ol/layer/Base";
 import { JSX, PreactDOMAttributes } from "preact";
-import { memo } from "preact/compat";
+import { memo, useEffect, useMemo, useState } from "preact/compat";
 
 import RvfLayerTree from "../RvfLayerTree";
 import { SelectionType } from "../RvfLayerTree/TreeItem/TreeItem";
+import getLayersAsFlatArray from "../utils/getLayersAsFlatArray";
 import useMapContext from "../utils/hooks/useMapContext";
 
+export interface RvfLayerTreeConfig {
+  childItems: RvfLayerTreeConfig[];
+  id: string;
+  isControlChecked: boolean;
+  layer: BaseLayer;
+  revision: number;
+  selectionType: SelectionType;
+  title: string;
+}
+
 export type RvfTopicsProps = {} & JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-const getConfigForLayer = (layer: BaseLayer) => {
+const getConfigForLayer = (
+  layer: BaseLayer,
+  revision: number,
+): RvfLayerTreeConfig => {
   return {
     childItems:
       (layer as Group)
         ?.getLayers?.()
         .getArray()
         .map((subLayer) => {
-          return getConfigForLayer(subLayer);
+          return getConfigForLayer(subLayer, revision);
         }) || [],
     id: getUid(layer),
     isControlChecked: layer.getVisible(),
     layer,
+    revision,
     selectionType: SelectionType.CHECKBOX,
     title: layer.get("title"),
   };
@@ -30,13 +45,30 @@ const getConfigForLayer = (layer: BaseLayer) => {
 
 function RvfTopics(props: RvfTopicsProps) {
   const { map } = useMapContext();
+  const [revision, setRevision] = useState(0);
+
+  const layers: RvfLayerTreeConfig[] = useMemo(() => {
+    const config =
+      map
+        ?.getLayers()
+        .getArray()
+        .map((layer) => {
+          return getConfigForLayer(layer, revision);
+        }) || [];
+    return config;
+  }, [map, revision]);
 
-  const layers = map
-    .getLayers()
-    .getArray()
-    .map((layer) => {
-      return getConfigForLayer(layer);
+  // Force update of config when a layers`s visibility changes progammatically
+  useEffect(() => {
+    const layers = getLayersAsFlatArray(map.getLayers().getArray());
+    layers.forEach((layer) => {
+      layer.on("change:visible", () => {
+        setRevision((prev) => {
+          return prev + 1;
+        });
+      });
     });
+  }, [map]);
 
   return <RvfLayerTree layers={layers} {...props} />;
 }

package/src/StationsLayer/StationsLayer.tsx

@@ -3,6 +3,7 @@ import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
 function StationsLayer(props: MaplibreStyleLayerOptions) {
@@ -17,6 +18,7 @@ function StationsLayer(props: MaplibreStyleLayerOptions) {
         return metadata?.["tralis.variable"] === "station";
       },
       maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.haltestellen,
       ...(props || {}),
     });
   }, [baseLayer, props]);

package/src/icons/Bike/rvf_shared_bike.svg

@@ -7,8 +7,8 @@
         <path d="M12.82383728,1c6.53012848,0,11.82383728,5.29371262,11.82383728,11.82384109,0,6.53011703-5.2937088,11.82384109-11.82383728,11.82384109-6.53012085,0-11.82383728-5.29372406-11.82383728-11.82384109C1,6.29371262,6.29371643,1,12.82383728,1M12.82383728,0C5.75274658,0,0,5.7527504,0,12.82384109c0,7.07108688,5.75274658,12.82384109,12.82383728,12.82384109s12.82383728-5.75275421,12.82383728-12.82384109C25.64767456,5.7527504,19.89492798,0,12.82383728,0h0Z" style="fill: #f7f4f4;"/>
       </g>
       <g id="verkehrstraeger_verkehrstraeger-rad-2px" data-name="verkehrstraeger/verkehrstraeger-rad-2px">
-        <path id="Fill-1" d="M8.86352249,11.52875744h1.58400038c.43718404,0,.792-.35481596.792-.792s-.35481596-.79200019-.792-.79200019h-1.58400038c-.01504804,0-.02771988.00792018-.04197598.00871212-.41659202.02296803-.75002402.36115207-.75002402.78328806,0,.43718404.35481596.792.792.792" style="fill: #fff; fill-rule: evenodd;"/>
-        <path d="M18.36764488,18.99228122c-.53417969,0-1.06298828-.13037109-1.57275391-.38818359-.41992188-.21289062-.78759766-.50439453-1.09277344-.86621094-.54833984-.64892578-.83837891-1.42675781-.83837891-2.24951172,0-.98876953.40966797-1.90576172,1.15429688-2.58251953l-.61669922-1.16113281-4.18896484,2.34960938-.56396484.32519531c.08349609.43896484.13525391.75634766.13525391,1.06884766,0,1.93212891-1.57177734,3.50390625-3.50390625,3.50390625-.1328125,0-.26025391-.01806641-.38720703-.03613281-1.80908203-.24169922-3.11669922-1.72802734-3.11669922-3.46777344,0-.46289062.09033203-.91552734.26855469-1.34423828.54638672-1.31201172,1.81640625-2.15966797,3.23535156-2.15966797.53369141,0,1.06347656.13085938,1.57324219.38964844.38525391.19580078.72265625.45117188,1.00292969.75830078l.62402344-.30664062,4.10742188-2.37109375-.91503906-1.70458984c-.04492188-.07910156-.06494141-.16699219-.07763672-.23486328l-.01757812-.10742188c-.04443359-.36376953.18408203-.70703125.53125-.79931641l1.52441406-.40869141c.06738281-.01855469.13134766-.02734375.19482422-.02734375.33007812,0,.62109375.22314453.70654297.54296875.06640625.24755859-.00830078.50927734-.19970703.69970703-.10449219.10449219-.20556641.16699219-.31787109.19677734l-.55908203.14990234.72558594,1.40722656,1.125,1.94824219c.43652344-.08203125.75146484-.1328125,1.05957031-.1328125,1.93701172.0078125,3.50390625,1.57861328,3.50390625,3.50390625,0,.03613281-.00488281.07080078-.01025391.10498047-.11425781,1.94628906-1.64404297,3.39892578-3.49365234,3.39892578ZM16.75485191,14.25253513c-.27929688.36279297-.42724609.79003906-.42724609,1.23583984,0,.57714844.25244141,1.13183594.69238281,1.52197266.37744141.33398438.85595703.51806641,1.34765625.51806641.22851562,0,.46484375-.04394531.70166016-.13134766l.578125-.33300781c.48632812-.39746094.76025391-.97021484.76025391-1.57568359,0-.66162109-.32617188-1.28564453-.87255859-1.66992188-.34716797-.2421875-.75097656-.37011719-1.16748047-.37011719-.04101562,0-.08056641.00537109-.12060547.01074219l-.08837891.01220703-.02001953.08496094.85205078,1.4765625c.14013672.2421875.12646484.54003906-.03515625.77685547-.06787109.09960938-.14404297.17236328-.23242188.22265625-.08984375.05273438-.19140625.08203125-.31005859.08984375h-.0078125c-.31933594,0-.55322266-.13378906-.68261719-.35742188l-.91308594-1.58300781-.0546875.07080078ZM7.27975425,13.44833591c-1.125,0-2.04003906.91503906-2.04003906,2.04003906s.91503906,2.04003906,2.04003906,2.04003906,2.04003906-.91503906,2.04003906-2.04003906c0-.04345703-.00585938-.0859375-.01171875-.12841797l-.01171875-.08837891-.08544922-.02197266-1.67089844.96533203c-.11181641.06396484-.23828125.09814453-.36572266.09814453-.26123047,0-.50390625-.14013672-.63476562-.36621094-.20166016-.34912109-.08154297-.79833984.26855469-1.00097656l1.69287109-.97705078c-.35498047-.375-.77929688-.52050781-1.22119141-.52050781Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-1" d="M9.25954019,11.68411861h1.42560034c.39346563,0,.7128-.31933437.7128-.7128s-.31933437-.71280017-.7128-.71280017h-1.42560034c-.01354324,0-.02494789.00712816-.03777838.00784091-.37493282.02067123-.67502162.32503686-.67502162.70495926,0,.39346563.31933437.7128.7128.7128" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M17.81325035,18.40129001c-.48076172,0-.95668945-.11733398-1.41547852-.34936523-.37792969-.19160156-.70883789-.45395508-.98349609-.77958984-.49350586-.5840332-.75454102-1.28408203-.75454102-2.02456055,0-.88989258.36870117-1.71518555,1.03886719-2.32426758l-.5550293-1.04501953-3.77006836,2.11464844-.50756836.29267578c.07514648.39506836.12172852.68071289.12172852.96196289,0,1.73891602-1.41459961,3.15351563-3.15351563,3.15351563-.11953125,0-.23422852-.01625977-.34848633-.03251953-1.62817383-.2175293-2.8050293-1.55522461-2.8050293-3.12099609,0-.41660156.08129883-.82397461.24169922-1.20981445.49174805-1.18081055,1.63476562-1.94370117,2.91181641-1.94370117.48032227,0,.95712891.11777344,1.41591797.35068359.34672852.1762207.65039062.40605469.90263672.6824707l.56162109-.27597656,3.69667969-2.13398438-.82353516-1.53413086c-.04042969-.07119141-.05844727-.15029297-.06987305-.21137695l-.01582031-.09667969c-.03999023-.32739258.16567383-.63632812.478125-.71938477l1.37197266-.36782227c.06064453-.01669922.11821289-.02460938.1753418-.02460938.29707031,0,.55898437.20083008.63588867.48867188.05976563.22280273-.0074707.45834961-.17973633.62973633-.09404297.09404297-.18500977.15029297-.28608398.17709961l-.50317383.13491211.65302734,1.26650391,1.0125,1.75341797c.39287109-.07382813.67631836-.11953125.95361328-.11953125,1.74331055.00703125,3.15351563,1.42075195,3.15351563,3.15351563,0,.03251953-.00439453.0637207-.00922852.09448242-.10283203,1.75166016-1.47963867,3.0590332-3.14428711,3.0590332ZM16.36173667,14.13551853c-.25136719.32651367-.38452148.71103516-.38452148,1.11225586,0,.51943359.22719727,1.01865234.62314453,1.36977539.33969727.30058594.77036133.46625977,1.21289062.46625977.20566406,0,.41835938-.03955078.63149414-.11821289l.5203125-.29970703c.43769531-.35771484.68422852-.87319336.68422852-1.41811523,0-.59545898-.29355469-1.15708008-.78530273-1.50292969-.31245117-.21796875-.67587891-.33310547-1.05073242-.33310547-.03691406,0-.07250977.00483398-.10854492.00966797l-.07954102.01098633-.01801758.07646484.7668457,1.32890625c.12612305.21796875.11381836.48603516-.03164063.69916992-.06108398.08964844-.12963867.15512695-.20917969.20039063-.08085938.04746094-.17226563.07382813-.27905273.08085937h-.00703125c-.28740234,0-.49790039-.12041016-.61435547-.32167969l-.82177734-1.42470703-.04921875.0637207ZM7.83414878,13.41173923c-1.0125,0-1.83603516.82353516-1.83603516,1.83603516s.82353516,1.83603516,1.83603516,1.83603516,1.83603516-.82353516,1.83603516-1.83603516c0-.03911133-.00527344-.07734375-.01054687-.11557617l-.01054687-.07954102-.0769043-.01977539-1.50380859.86879883c-.10063477.05756836-.21445312.08833008-.32915039.08833008-.23510742,0-.45351563-.12612305-.57128906-.32958984-.18149414-.31420898-.07338867-.71850586.24169922-.90087891l1.52358398-.8793457c-.31948242-.3375-.70136719-.46845703-1.09907227-.46845703Z" style="fill: #fff; fill-rule: evenodd;"/>
       </g>
     </g>
   </g>

package/src/icons/Car/rvf_shared_car.svg

@@ -7,9 +7,9 @@
         <path d="M12.82384109,1c6.53012085,0,11.82383728,5.29371643,11.82383728,11.82383728,0,6.53013611-5.29371643,11.82385254-11.82383728,11.82385254-6.53012848,0-11.82384109-5.29371643-11.82384109-11.82385254C1,6.29371643,6.29371262,1,12.82384109,1M12.82384109,0C5.7527504,0,0,5.75274658,0,12.82383728s5.7527504,12.82385254,12.82384109,12.82385254,12.82383728-5.75276184,12.82383728-12.82385254S19.89493179,0,12.82384109,0h0Z" style="fill: #f7f4f4;"/>
       </g>
       <g id="verkehrstraeger_verkehrstraeger-auto-2px" data-name="verkehrstraeger/verkehrstraeger-auto-2px">
-        <path id="Fill-1" d="M17.14383851,14.36036615c.39744003,0,.72.32255997.72.72s-.32255997.72-.72.72-.72-.32255997-.72-.72.32255997-.72.72-.72" style="fill: #fff; fill-rule: evenodd;"/>
-        <path id="Fill-7" d="M8.50383851,14.36036615c-.39744003,0-.72.32255997-.72.72s.32255997.72.72.72.72-.32255997.72-.72-.32255997-.72-.72-.72" style="fill: #fff; fill-rule: evenodd;"/>
-        <path id="Fill-11" d="M18.58383851,13.64036615v3.6c0,.39744003-.32255997.72-.72.72h-1.41047974v-.72287979c0-.39240005-.31536049-.70920044-.70560036-.71712021h-.04391991v-.00287979h-5.7254401c-.39744003,0-.72.32255997-.72.72v.72287979h-1.4745599c-.39744003,0-.72-.32255997-.72-.72v-3.6l.31319996-.72.30024004-.68831989.82656.41327991.24624001.12312.12168011.05399986c.16631996.06480011.34343983.09792011.52199993.09792011h6.86015991l.13391991-.00647987c.17711952-.01656017.34992073-.06552006.50976082-.1454401l.24623932-.12312.84168045-.42048008.29375931.69552006.30456024.72ZM8.50383851,10.33268625l.56591984-1.29960005c.11448029-.26280001.37368004-.43272005.66024021-.43272005h6.24600014c.28943962,0,.55007996.17280001.66311966.43992004l.50472015,1.19375999.27936035.66168011-.27936035.13967983-.88992004.44496002h-6.86015991l-.88992004-.44496002-.25127998-.12527985.25127998-.57744003ZM20.02383851,10.76036615h-1.09440033l-.30383926-.72-.66023987-1.56095999c-.3376799-.79992-1.12176041-1.31904001-1.98936035-1.31904001h-6.24600014c-.85968018,0-1.63728012.50976-1.98,1.29744003l-.68904001,1.58255997-.31392008.72h-1.12319996c-.39743999,0-.72.32255997-.72.72s.32256001.72.72.72h.49608001l-.31320004.72-.06335996.14543976c-.07847998.18072029-.11952001.37656052-.11952001.57456024v3.6c0,1.1930397.96695995,2.16,2.16,2.16h1.4745599l.10728012-.0035994c.74519989-.05544113,1.33272022-.67751999,1.33199993-1.44000069h4.31496002c.00072029.79919975.64511993,1.44360008,1.44072029,1.44360008h1.41047974c1.1930397,0,2.16-.9669603,2.16-2.16v-3.6c0-.19295975-.03888062-.3830397-.11376068-.5608802l-.06695892-.1591198-.30456024-.72h.48527985c.39744003,0,.72-.32255997.72-.72s-.32255997-.72-.72-.72h0Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-1" d="M16.71183851,14.25236615c.35769603,0,.648.29030397.648.648s-.29030397.648-.648.648-.648-.29030397-.648-.648.29030397-.648.648-.648" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-7" d="M8.93583851,14.25236615c-.35769603,0-.648.29030397-.648.648s.29030397.648.648.648.648-.29030397.648-.648-.29030397-.648-.648-.648" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-11" d="M18.00783851,13.60436615v3.24c0,.35769603-.29030397.648-.648.648h-1.26943176v-.65059181c0-.35316005-.28382444-.6382804-.63504032-.64540819h-.03952792v-.00259181h-5.15289609c-.35769603,0-.648.29030397-.648.648v.65059181h-1.32710391c-.35769603,0-.648-.29030397-.648-.648v-3.24l.28187996-.648.27021604-.6194879.743904.37195192.221616.110808.1095121.04859988c.14968797.0583201.30909584.0881281.46979994.0881281h6.17414392l.12052792-.00583189c.15940757-.01490416.31492866-.05896805.45878474-.13089609l.22161539-.110808.75751241-.37843207.26438338.62596805.27410422.648ZM8.93583851,10.62745424l.50932785-1.16964004c.10303226-.23652001.33631203-.38944805.59421619-.38944805h5.62140012c.26049566,0,.49507196.15552001.59680769.39592804l.45424814,1.074384.25142432.5955121-.25142432.12571185-.80092804.40046402h-6.17414392l-.80092804-.40046402-.22615199-.11275186.22615199-.51969603ZM19.30383851,11.01236615h-.9849603l-.27345534-.648-.59421588-1.40486399c-.30391191-.719928-1.00958437-1.18713601-1.79042432-1.18713601h-5.62140012c-.77371216,0-1.47355211.458784-1.782,1.16769603l-.62013601,1.42430397-.28252807.648h-1.01087996c-.35769599,0-.648.29030397-.648.648s.29030401.648.648.648h.44647201l-.28188004.648-.05702396.13089578c-.07063198.16264826-.10756801.33890446-.10756801.51710422v3.24c0,1.07373573.87026396,1.944,1.944,1.944h1.32710391l.09655211-.00323946c.6706799-.04989702,1.1994482-.60976799,1.19879994-1.29600062h3.88346402c.00064826.71927978.58060794,1.29924007,1.29664826,1.29924007h1.26943176c1.07373573,0,1.944-.87026427,1.944-1.944v-3.24c0-.17366377-.03499255-.34473573-.10238461-.50479218l-.06026303-.14320782-.27410422-.648h.43675186c.35769603,0,.648-.29030397.648-.648s-.29030397-.648-.648-.648h0Z" style="fill: #fff; fill-rule: evenodd;"/>
       </g>
     </g>
   </g>

package/src/icons/CargoBike/rvf_shared_cargo_bike.svg

@@ -7,9 +7,9 @@
         <path d="M14.00622177,1c7.18314362,0,13.00623322,5.82308197,13.00623322,13.00622177,0,7.18314362-5.8230896,13.00623322-13.00623322,13.00623322-7.1831398,0-13.00622177-5.8230896-13.00622177-13.00623322C1,6.82308197,6.82308197,1,14.00622177,1M14.00622177,0C6.28316116,0,0,6.28316116,0,14.00622177s6.28316116,14.00623322,14.00622177,14.00623322,14.00623322-6.28317261,14.00623322-14.00623322S21.72928238,0,14.00622177,0h0Z" style="fill: #f7f4f4;"/>
       </g>
       <g id="Group-9">
-        <path id="Fill-1" d="M6.06579909,13.74402308h1.584c.39283185,0,.70487989-.29145602.76665595-.66686401.00712786-.04197598.02534405-.08078381.02534405-.12513599,0-.25423208-.1275122-.46965595-.31363193-.61459183-.12592831-.09820806-.27640798-.16394401-.44748005-.17107206-.01029601-.00079194-.01980008-.00633592-.03088803-.00633592h-1.584c-.43718413,0-.79200009.35481577-.79200009.79199981,0,.0506881.01979998.09424797.02851201.14256024.06969595.36669586.37699196.64943976.76348808.64943976" style="fill: #fff; fill-rule: evenodd;"/>
-        <path d="M19.52975367,21.20815252c-.71337891,0-1.38720703-.27636719-1.89746094-.77832031-.2890625-.28369141-.50830078-.63378906-.65136719-1.04003906-.10986328-.31298828-.16308594-.60546875-.16308594-.89355469,0-.27490234.05029297-.55712891.15332031-.86328125.33007812-.9765625,1.16845703-1.67089844,2.18847656-1.81152344.15820312-.02246094.26171875-.03710938.37011719-.03710938.59814453,0,1.171875.20068359,1.65869141.58105469.66943359.52099609,1.05322266,1.29785156,1.05322266,2.13085938,0,.22412109-.03515625.45605469-.11132812.72900391-.32763672,1.16748047-1.39697266,1.98291016-2.60058594,1.98291016ZM19.52975367,17.24819159c-.68798828,0-1.24804688.56005859-1.24804688,1.24804688s.56005859,1.24804688,1.24804688,1.24804688,1.24804688-.56005859,1.24804688-1.24804688-.56005859-1.24804688-1.24804688-1.24804688Z" style="fill: #fff; fill-rule: evenodd;"/>
-        <path d="M7.76803492,21.27748846c-.23779297,0-.48535156-.02685547-.73583984-.08056641-1.60400391-.34326172-2.76806641-1.78320312-2.76806641-3.42382812,0-.98925781.41113281-1.90771484,1.15820312-2.58642578.2734375-.24853516.57519531-.44921875.89746094-.59619141.40771484-.18603516.84912109-.2890625,1.31201172-.30664062l.13623047-.01464844c.49121094,0,.97607422.10693359,1.44091797.31738281.69189453.31298828,1.27392578.86376953,1.64013672,1.55126953l.62939453-.12011719-.76318359-3.08154297-.5-1.86474609-.20507812-.00683594-.64453125.17285156c-.06201172.01660156-.12597656.02539062-.18994141.02539062-.33056641,0-.62109375-.22314453-.70654297-.54296875-.10449219-.38964844.12744141-.79199219.51757812-.89648438l1.52978516-.41015625c.06152344-.01660156.125-.02490234.18896484-.02490234.03515625,0,.06933594.00244141.10351562.00732422.23632812.02978516.44384766.18457031.55517578.41455078l.06103516.12060547.17626953.66064453,1.16015625.04443359h8.74804688l.12060547.02587891c.35449219.06103516.61132812.35791016.61132812.70605469l-.02490234.12841797c.00537109.07128906.0078125.15527344-.01416016.23974609l-.72802734,2.71533203c-.04638672.17236328-.15917969.32275391-.31738281.42382812-.14257812.08251953-.20068359.11767578-.26855469.13623047l-7.50097656,2.01025391.29248047,1.32470703c.10449219.38964844-.12744141.79150391-.51757812.89599609-.0625.01708984-.12646484.02539062-.19042969.02539062-.33007812,0-.62060547-.22314453-.70605469-.54296875l-.33496094-1.25048828-.62841797.10546875-.05126953.01367188.01416016.11425781c.00634766,1.35693359-.71337891,2.53955078-1.87158203,3.15185547-.52539062.27734375-1.07226562.41796875-1.62597656.41796875ZM7.76803492,15.73305487c-.85644531,0-1.62548828.54589844-1.91455078,1.35888672-.08300781.23144531-.12548828.46044922-.12548828.68115234,0,.58984375.26318359,1.15283203.72167969,1.54492188.37939453.32421875.83496094.49560547,1.31835938.49560547.45654297,0,.89355469-.15527344,1.26318359-.44970703.40527344-.32226562.67041016-.77978516.74707031-1.28857422l.01318359-.09033203-1.59960938.42871094c-.06201172.01660156-.12597656.02539062-.18994141.02539062-.33056641,0-.62109375-.22363281-.70654297-.54345703-.05078125-.18847656-.02490234-.38574219.07324219-.55517578.09765625-.16943359.25537109-.29052734.44433594-.34082031l1.59667969-.42773438-.05810547-.07177734c-.32421875-.40039062-.78027344-.66210938-1.28466797-.73730469-.11230469-.01660156-.20361328-.02978516-.29882812-.02978516ZM12.93453883,15.56508612l3.21630859-.79931641,3.97900391-1.06640625.22705078-.73193359.21240234-.79199219-1.89941406-.07568359h-6.66357422l.92822266,3.46533203Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-1" d="M6.784509,13.90291161h1.4256c.35354867,0,.6343919-.26231042.68999035-.60017761.00641507-.03777838.02280965-.07270543.02280965-.11262239,0-.22880887-.11476098-.42269035-.28226873-.55313265-.11333548-.08838725-.24876718-.14754961-.40273204-.15396486-.00926641-.00071275-.01782007-.00570233-.02779922-.00570233h-1.4256c-.39346572,0-.71280008.3193342-.71280008.71279983,0,.04561929.01781998.08482317.02566081.12830422.06272636.33002627.33929277.58449578.68713928.58449578" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M18.90206812,20.62062811c-.64204102,0-1.24848633-.24873047-1.70771484-.70048828-.26015625-.25532227-.4574707-.57041016-.58623047-.93603516-.09887695-.28168945-.14677734-.54492188-.14677734-.80419922,0-.24741211.04526367-.50141602.13798828-.77695313.29707031-.87890625,1.05161133-1.50380859,1.96962891-1.63037109.14238281-.02021484.23554687-.03339844.33310547-.03339844.53833008,0,1.0546875.18061523,1.49282227.52294922.60249023.46889648.94790039,1.16806641.94790039,1.91777344,0,.20170898-.03164062.41044922-.10019531.65610352-.29487305,1.05073242-1.25727539,1.78461914-2.34052734,1.78461914ZM18.90206812,17.05666327c-.61918945,0-1.12324219.50405273-1.12324219,1.12324219s.50405273,1.12324219,1.12324219,1.12324219,1.12324219-.50405273,1.12324219-1.12324219-.50405273-1.12324219-1.12324219-1.12324219Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M8.31652125,20.68303045c-.21401367,0-.43681641-.02416992-.66225586-.07250977-1.44360352-.30893555-2.49125977-1.60488281-2.49125977-3.08144531,0-.89033203.37001953-1.71694336,1.04238281-2.3277832.24609375-.22368164.51767578-.40429688.80771484-.53657227.36694336-.16743164.76420898-.26015625,1.18081055-.27597656l.12260742-.01318359c.44208984,0,.8784668.09624023,1.29682617.28564453.62270508.28168945,1.1465332.77739258,1.47612305,1.39614258l.56645508-.10810547-.68686523-2.77338867-.45-1.67827148-.18457031-.00615234-.58007812.15556641c-.05581055.01494141-.11337891.02285156-.17094727.02285156-.29750977,0-.55898438-.20083008-.63588867-.48867188-.09404297-.35068359.11469727-.71279297.46582031-.80683594l1.37680664-.36914062c.05537109-.01494141.1125-.02241211.17006836-.02241211.03164063,0,.06240234.00219727.09316406.0065918.21269531.02680664.39946289.16611328.4996582.3730957l.05493164.10854492.15864258.59458008,1.04414063.03999023h7.87324219l.10854492.02329102c.31904297.05493164.55019531.32211914.55019531.63544922l-.02241211.11557617c.00483398.06416016.00703125.13974609-.01274414.21577148l-.65522461,2.44379883c-.04174805.15512695-.14326172.29047852-.28564453.38144531-.12832031.07426758-.18061523.1059082-.24169922.12260742l-6.75087891,1.80922852.26323242,1.19223633c.09404297.35068359-.11469727.71235352-.46582031.80639648-.05625.01538086-.11381836.02285156-.17138672.02285156-.29707031,0-.55854492-.20083008-.63544922-.48867188l-.30146484-1.12543945-.56557617.09492188-.04614258.01230469.01274414.10283203c.00571289,1.22124023-.64204102,2.2855957-1.68442383,2.83666992-.47285156.24960937-.96503906.37617188-1.46337891.37617188ZM8.31652125,15.69304022c-.77080078,0-1.46293945.49130859-1.7230957,1.22299805-.07470703.20830078-.11293945.4144043-.11293945.61303711,0,.53085937.23686523,1.03754883.64951172,1.39042969.34145508.29179687.75146484.44604492,1.18652344.44604492.41088867,0,.80419922-.13974609,1.13686523-.40473633.36474609-.29003906.60336914-.70180664.67236328-1.1597168l.01186523-.08129883-1.43964844.38583984c-.05581055.01494141-.11337891.02285156-.17094727.02285156-.29750977,0-.55898438-.20126953-.63588867-.48911133-.04570312-.16962891-.02241211-.34716797.06591797-.4996582.08789062-.15249023.22983398-.26147461.39990234-.30673828l1.43701172-.38496094-.05229492-.06459961c-.29179687-.36035156-.70224609-.59589844-1.15620117-.66357422-.10107422-.01494141-.18325195-.02680664-.26894531-.02680664ZM12.96637476,15.54186834l2.89467773-.71938477,3.58110352-.95976562.2043457-.65874023.19116211-.71279297-1.70947266-.06811523h-5.9972168l.83540039,3.11879883Z" style="fill: #fff; fill-rule: evenodd;"/>
       </g>
     </g>
   </g>

package/src/icons/Scooter/rvf_shared_scooter.svg

@@ -7,8 +7,8 @@
         <path d="M12.82384109,1c6.53012085,0,11.82383728,5.29371643,11.82383728,11.82384491,0,6.53012085-5.29371643,11.82382965-11.82383728,11.82382965-6.53012848,0-11.82384109-5.2937088-11.82384109-11.82382965C1,6.29371643,6.29371262,1,12.82384109,1M12.82384109,0C5.7527504,0,0,5.75275421,0,12.82384491c0,7.07108307,5.7527504,12.82382965,12.82384109,12.82382965s12.82383728-5.75274658,12.82383728-12.82382965C25.64767838,5.75275421,19.89493179,0,12.82384109,0h0Z" style="fill: #f7f4f4;"/>
       </g>
       <g id="Group-5">
-        <path d="M19.3640435,18.76264753l-1.03417969-3.86083984c-.10400391-.38720703-.50097656-.61914062-.89208984-.51416016-.38769531.10400391-.61816406.50439453-.51416016.89160156l1.03417969,3.85986328c.04980469.18798828.17041016.34472656.33886719.44189453.11230469.06494141.23681641.09814453.36279297.09814453.06347656,0,.12695312-.00830078.18945312-.02539062.18798828-.04980469.34472656-.17041016.44238281-.33886719.09716797-.16845703.12304688-.36474609.07275391-.55224609Z" style="fill: #fff; fill-rule: evenodd;"/>
-        <path d="M18.82009819,7.66889753c-.08447266-.31787109-.37353516-.54003906-.70263672-.54003906-.06347656,0-.12695312.00830078-.25244141.04199219l-4.94335938,1.32421875c-.38769531.10400391-.61914062.50390625-.51513672.89160156.08398438.31445312.37255859.53417969.70117188.53417969.05029297,0,.10107422-.00488281.19042969-.01953125l2.00878906-.52490234.53955078,2.01318359.14892578.46386719-2.20458984,3.81787109-.30517578.60791016h-2.70751953c-.04833984-.19384766-.12255859-.39160156-.22607422-.60351562-.09326172-.18798828-.20849609-.36865234-.34228516-.53759766-.57714844-.7265625-1.42919922-1.14355469-2.33837891-1.14355469-1.65185547,0-2.99609375,1.34423828-2.99609375,2.99609375s1.34423828,2.99609375,2.99609375,2.99609375c1.12451172,0,2.14501953-.63085938,2.66210938-1.64697266.11621094-.22998047.19775391-.44824219.17089844-.60449219h2.99560547c.28808594,0,.65820312-.13525391.80761719-.39306641l2.01318359-3.48730469.86279297-1.52880859c.09716797-.16796875.12353516-.36425781.07324219-.55273438l-.74658203-2.78613281,1.59521484-.42724609c.18798828-.04980469.34472656-.17041016.44189453-.33886719.09765625-.16845703.12353516-.36474609.07275391-.55224609ZM6.33132866,16.99067487c0-.359375.12646484-.70019531.36572266-.98486328.07128906-.08544922.15234375-.16357422.23925781-.23095703.27539062-.21240234.59912109-.32421875.93505859-.32421875.33544922,0,.65917969.11181641.93505859.32421875.18212891.140625.32958984.31347656.43066406.50439453h-1.30566406c-.40136719,0-.72802734.32666016-.72802734.72802734s.32666016.72802734.72802734.72802734h1.28417969c-.109375.19726562-.26269531.36962891-.44775391.50341797-.26708984.19091797-.57714844.29199219-.89648438.29199219-.31982422,0-.62988281-.10107422-.89599609-.29199219-.09765625-.07080078-.18896484-.15673828-.27832031-.26269531-.23925781-.28515625-.36572266-.62597656-.36572266-.98535156Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M18.64085918,18.24216413l-.93076172-3.47475586c-.09360352-.34848633-.45087891-.55722656-.80288086-.46274414-.34892578.09360352-.55634766.45395508-.46274414.80244141l.93076172,3.47387695c.04482422.16918945.15336914.31025391.30498047.39770508.10107422.05844727.21313477.08833008.32651367.08833008.05712891,0,.11425781-.0074707.17050781-.02285156.16918945-.04482422.31025391-.15336914.39814453-.30498047.08745117-.15161133.11074219-.32827148.06547852-.49702148Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M18.1513084,8.25778913c-.07602539-.28608398-.33618164-.48603516-.63237305-.48603516-.05712891,0-.11425781.0074707-.22719727.03779297l-4.44902344,1.19179687c-.34892578.09360352-.55722656.45351563-.46362305.80244141.07558594.28300781.33530273.48076172.63105469.48076172.04526367,0,.0909668-.00439453.17138672-.01757812l1.80791016-.47241211.4855957,1.81186523.1340332.41748047-1.98413086,3.43608398-.2746582.54711914h-2.43676758c-.04350586-.17446289-.11030273-.35244141-.2034668-.54316406-.08393555-.16918945-.18764648-.33178711-.30805664-.48383789-.51943359-.65390625-1.2862793-1.02919922-2.10454102-1.02919922-1.48666992,0-2.69648438,1.20981445-2.69648438,2.69648437s1.20981445,2.69648438,2.69648438,2.69648438c1.01206055,0,1.93051758-.56777344,2.39589844-1.48227539.10458984-.20698242.17797852-.40341797.15380859-.54404297h2.69604492c.25927734,0,.59238281-.12172852.72685547-.35375977l1.81186523-3.13857422.77651367-1.37592773c.08745117-.15117187.11118164-.32783203.06591797-.49746094l-.67192383-2.50751953,1.43569336-.38452148c.16918945-.04482422.31025391-.15336914.39770508-.30498047.08789062-.15161133.11118164-.32827148.06547852-.49702148ZM6.91141582,16.64738874c0-.3234375.11381836-.63017578.32915039-.88637695.06416016-.0769043.13710938-.1472168.21533203-.20786133.24785156-.19116211.53920898-.29179687.84155273-.29179687.3019043,0,.59326172.10063477.84155273.29179687.16391602.1265625.29663086.28212891.38759766.45395508h-1.17509766c-.36123047,0-.65522461.29399414-.65522461.65522461s.29399414.65522461.65522461.65522461h1.15576172c-.0984375.17753906-.23642578.33266602-.40297852.45307617-.24038086.17182617-.51943359.26279297-.80683594.26279297-.2878418,0-.56689453-.0909668-.80639648-.26279297-.08789062-.0637207-.17006836-.14106445-.25048828-.23642578-.21533203-.25664062-.32915039-.56337891-.32915039-.88681641Z" style="fill: #fff; fill-rule: evenodd;"/>
       </g>
     </g>
   </g>

package/src/index.tsx

@@ -13,15 +13,19 @@ register(
     "extent",
     "maxextent",
     "geolocation",
+    "layers",
+    "layertree",
     "mapsurl",
     "mots",
     "notification",
     "notificationat",
     "notificationurl",
     "notificationbeforelayerid",
+    "print",
     "realtime",
     "realtimeUrl",
     "search",
+    "share",
     "tenant",
     "zoom",
     "permalink",

package/src/utils/applyInitialLayerVisibility.ts

@@ -0,0 +1,41 @@
+import { Group } from "ol/layer";
+import BaseLayer from "ol/layer/Base";
+
+const applyInitialLayerVisibility = (
+  layersAttrValue: string,
+  layer: BaseLayer,
+) => {
+  const isPermalinkable = !!layer.get("name");
+  const hasLayersAttribute =
+    isPermalinkable &&
+    !!(layersAttrValue !== null && layersAttrValue !== undefined);
+
+  if (hasLayersAttribute) {
+    const names = (layersAttrValue && layersAttrValue.split(",")) || [];
+    const name = layer.get("name");
+    const shouldBeVisible = names.includes(name);
+    if (layer.getVisible() !== shouldBeVisible) {
+      layer.setVisible(shouldBeVisible);
+
+      if ((layer as Group).getLayers) {
+        (layer as Group)
+          .getLayers()
+          .getArray()
+          .forEach((subLayer) => {
+            subLayer.setVisible(shouldBeVisible);
+            // applyInitialLayerVisibility(layersAttrValue, subLayer);
+          });
+      }
+    }
+  }
+  if ((layer as Group).getLayers) {
+    (layer as Group)
+      .getLayers()
+      .getArray()
+      .forEach((subLayer) => {
+        // subLayer.setVisible(false);
+        applyInitialLayerVisibility(layersAttrValue, subLayer);
+      });
+  }
+};
+export default applyInitialLayerVisibility;