@geops/rvf-mobility-web-component 0.1.47-beta.0 → 0.1.48

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -1,8 +1,13 @@
+import { getFeatureInfoAtCoordinate } from "mobility-toolbox-js/ol";
 import { GeoJSON } from "ol/format";
 import { unByKey } from "ol/Observable";
 import { useCallback, useEffect } from "preact/hooks";
 
-import { PROVIDER_LOGOS_BY_FEED_ID } from "../utils/constants";
+import {
+  LAYER_NAME_REALTIME,
+  LAYER_NAME_STATIONS,
+  PROVIDER_LOGOS_BY_FEED_ID,
+} from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 import MobilityEvent from "../utils/MobilityEvent";
@@ -78,7 +83,7 @@ function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
   );
 
   const onSingleClick = useCallback(
-    (evt: MapBrowserEvent<PointerEvent>) => {
+    async (evt: MapBrowserEvent<PointerEvent>) => {
       if (!baseLayer?.mapLibreMap) {
         return;
       }
@@ -87,7 +92,8 @@ function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
         layerFilter: (l) => {
           return l === realtimeLayer;
         },
-      });
+      }) as Feature[];
+      realtimeFeature?.set("layerName", LAYER_NAME_REALTIME);
 
       const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
         layerFilter: (l) => {
@@ -96,7 +102,8 @@ function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
       });
       const [stationFeature] = stationsFeatures.filter((feat) => {
         return feat.get("tralis_network")?.includes(tenant);
-      });
+      }) as Feature[];
+      stationFeature?.set("layerName", LAYER_NAME_STATIONS);
 
       const newStationId = stationFeature?.get("uid");
 
@@ -114,74 +121,87 @@ function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
       }
 
       // Send all the features under the cursor
-      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
-        hitTolerance: 5,
-        layerFilter: (l) => {
-          console.log(queryablelayers);
-          return queryablelayers
-            ? queryablelayers.split(",").includes(l.get("name"))
-            : l.get("isQueryable");
-        },
-      }) as Feature[];
+      // const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+      //   hitTolerance: 5,
+      //   layerFilter: (l) => {
+      //     console.log(queryablelayers);
+      //     return queryablelayers
+      //       ? queryablelayers.split(",").includes(l.get("name"))
+      //       : l.get("isQueryable");
+      //   },
+      // }) as Feature[];
+
+      const queryableLayers = evt.map.getAllLayers().filter((l) => {
+        return queryablelayers
+          ? queryablelayers.split(",").includes(l.get("name"))
+          : l.get("isQueryable");
+      });
+      const featuresInfos = await getFeatureInfoAtCoordinate(
+        evt.coordinate,
+        queryableLayers,
+        5,
+        true,
+      );
+
+      // Set the layerName as property of the feature
+      featuresInfos.forEach((f) => {
+        f.features.forEach((feat) => {
+          feat.set("layerName", f.layer.get("name"));
+        });
+      });
+
+      const features = featuresInfos.flatMap((f) => {
+        return f.features;
+      });
 
       // Append more infos about the features
-      const addMoreData = async (featuress) => {
-        for (const feature of featuress) {
-          const clusterId = feature.get("cluster_id");
-          if (clusterId) {
-            const vtFeat = feature.get("vectorTileFeature");
-            const sourceId = vtFeat.layer.source;
-            const leaves =
-              (await baseLayer.mapLibreMap
-                .getSource<GeoJSONSource>(sourceId)
-                ?.getClusterLeaves(clusterId, 1000, 0)) || [];
-
-            feature.set(
-              "features",
-              leaves.map((l) => {
-                return geojson.readFeature(l);
-              }),
-            );
-          }
-
-          // Sharing station
-          const sharingStationId = selectedFeature?.get("station_id");
-          if (sharingStationId) {
-            const sharingStationInfo =
-              await fetchSharingStation(sharingStationId);
-            selectedFeature.setProperties(sharingStationInfo);
-            selectedFeature.set(
-              "provider_logo",
-              PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
-            );
-          }
+      for (const feature of features) {
+        const clusterId = feature.get("cluster_id");
+        if (clusterId) {
+          const vtFeat = feature.get("vectorTileFeature");
+          const sourceId = vtFeat.layer.source;
+          const leaves =
+            (await baseLayer.mapLibreMap
+              .getSource<GeoJSONSource>(sourceId)
+              ?.getClusterLeaves(clusterId, 1000, 0)) || [];
+
+          feature.set(
+            "features",
+            leaves.map((l) => {
+              return geojson.readFeature(l);
+            }),
+          );
         }
-        // evt.map.getTargetElement().dispatchEvent(
-        //   new MobilityEvent("singleclick", {
-        //     ...evt,
-        //     features: geojson.writeFeaturesObject(features),
-        //     lonlat: toLonLat(evt.coordinate),
-        //   }),
-        // );
-
-        if (newStationId || newTrainId || !features.length) {
-          setSelectedFeature(null);
-          setSelectedFeatures([]);
+
+        // Sharing station
+        const sharingStationId = selectedFeature?.get("station_id");
+        if (sharingStationId) {
+          const sharingStationInfo =
+            await fetchSharingStation(sharingStationId);
+          selectedFeature.setProperties(sharingStationInfo);
+          selectedFeature.set(
+            "provider_logo",
+            PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
+          );
+        }
+      }
+
+      if (newStationId || newTrainId || !features.length) {
+        setSelectedFeature(null);
+        setSelectedFeatures([]);
+      } else {
+        setSelectedFeatures(features);
+
+        // We prioritize some layers like the notification one over the others
+        const notificationFeature = features.find((feat) => {
+          return feat.get("situation");
+        });
+        if (notificationFeature) {
+          setSelectedFeature(notificationFeature);
         } else {
-          setSelectedFeatures(features);
-
-          // We prioritize some layers like the notification one over the others
-          const notificationFeature = features.find((feat) => {
-            return feat.get("severity");
-          });
-          if (notificationFeature) {
-            setSelectedFeature(notificationFeature);
-          } else {
-            setSelectedFeature(features[0]);
-          }
+          setSelectedFeature(features[0]);
         }
-      };
-      void addMoreData(features);
+      }
     },
     [
       baseLayer?.mapLibreMap,

package/src/StopsSearch/StopsSearch.tsx

@@ -12,22 +12,29 @@ import { twMerge } from "tailwind-merge";
 
 import Cancel from "../icons/Cancel";
 import Search from "../icons/Search";
+import IconButton from "../ui/IconButton";
 import useI18n from "../utils/hooks/useI18n";
 import MobilityEvent from "../utils/MobilityEvent";
 
 import type { StopsParameters, StopsResponse } from "mobility-toolbox-js/types";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+import type {
+  HTMLAttributes,
+  PreactDOMAttributes,
+  TargetedKeyboardEvent,
+} from "preact";
 
-export type StopsFeature = StopsResponse["features"];
+export type StopsFeature = StopsResponse["features"][0];
 
 export type StopsSearchProps = {
   apikey: string;
   bbox?: string;
+  cancelButtonClassName?: string;
   className?: string;
   countrycode?: string;
   event?: string;
   field?: string;
   inputClassName?: string;
+  inputContainerClassName?: string;
   limit?: number;
   mots?: string;
   onselect?: (arg: StopsFeature) => void;
@@ -37,6 +44,7 @@ export type StopsSearchProps = {
   resultClassName?: string;
   resultsClassName?: string;
   resultsContainerClassName?: string;
+  searchIconContainerClassName?: string;
   url: string;
   withResultsClassName?: string;
 } & HTMLAttributes<HTMLDivElement> &
@@ -54,11 +62,13 @@ const getQueryForSelectedStation = (selectedStation?: StopsFeature): string => {
 function StopsSearch({
   apikey,
   bbox,
+  cancelButtonClassName,
   className,
   countrycode,
   event,
   field,
   inputClassName,
+  inputContainerClassName,
   limit,
   mots,
   onselect,
@@ -68,6 +78,7 @@ function StopsSearch({
   resultClassName,
   resultsClassName,
   resultsContainerClassName,
+  searchIconContainerClassName,
   url = "https://api.geops.io/stops/v1/",
   withResultsClassName,
 }: StopsSearchProps) {
@@ -217,14 +228,24 @@ function StopsSearch({
         )}
         ref={myRef}
       >
-        <div className={"text-grey flex items-center"}>
+        <div
+          className={twMerge(
+            "text-grey flex items-center",
+            searchIconContainerClassName,
+          )}
+        >
           <Search className="size-4" />
         </div>
-        <div className={"flex grow overflow-hidden border-b-2 border-solid"}>
+        <div
+          className={twMerge(
+            "@container/inputsearch flex grow items-center border-b-2 border-solid",
+            inputContainerClassName,
+          )}
+        >
           <input
             autoComplete="off"
             className={twMerge(
-              "h-8 flex-1 outline-0 placeholder:text-zinc-400",
+              "h-8 flex-1 overflow-hidden text-ellipsis outline-0 placeholder:text-zinc-400",
               inputClassName,
             )}
             id="searchfield"
@@ -232,7 +253,7 @@ function StopsSearch({
               // @ts-expect-error target is missing
               setQuery(evt.target.value);
             }}
-            onKeyUp={(evt: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
+            onKeyUp={(evt: TargetedKeyboardEvent<HTMLInputElement>) => {
               if (evt.key === "Enter") {
                 if (results?.length > 0) {
                   setSelectedStation(results[0]);
@@ -244,15 +265,18 @@ function StopsSearch({
             value={query || ""}
           />
           {query.length > 0 && (
-            <button
-              className="flex items-center"
+            <IconButton
+              className={twMerge(
+                "flex !size-[32px] items-center rounded-none border-none bg-transparent shadow-none",
+                cancelButtonClassName,
+              )}
               onClick={() => {
                 setQuery("");
                 setResults(undefined);
               }}
             >
-              <Cancel className="text-grey size-4" />
-            </button>
+              <Cancel />
+            </IconButton>
           )}
         </div>
       </div>

package/src/WindowMessageListener/WindowMessageListener.tsx

@@ -25,6 +25,7 @@ function WindowMessageListener({ eventNode }: { eventNode: HTMLElement }) {
   useEffect(() => {
     const onMessage = (event) => {
       if (event.data.situations) {
+        console.log("Setting preview situations", event.data.situations);
         setPreviewNotifications(event.data.situations);
       }
     };

package/src/icons/ArrowRight/ArrowRight.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "preact/compat";
+
+function ArrowRight(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="currentColor"
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M13.2928932,5.29289322 C13.6834175,4.90236893 14.3165825,4.90236893 14.7071068,5.29289322 L20.7071068,11.2928932 C20.7355731,11.3213595 20.7623312,11.3515341 20.787214,11.3832499 C20.7927155,11.3901576 20.7982466,11.397397 20.8036654,11.4046934 C20.8215099,11.4288693 20.8382813,11.453725 20.8539326,11.4793398 C20.8613931,11.4913869 20.8685012,11.5036056 20.8753288,11.5159379 C20.8862061,11.5357061 20.8966234,11.5561086 20.9063462,11.5769009 C20.914321,11.5939015 20.9218036,11.6112044 20.9287745,11.628664 C20.9366843,11.6484208 20.9438775,11.6682023 20.9504533,11.6882636 C20.9552713,11.7031487 20.9599023,11.7185367 20.9641549,11.734007 C20.9701664,11.7555635 20.9753602,11.7772539 20.9798348,11.7992059 C20.9832978,11.8166247 20.9863719,11.834051 20.9889822,11.8515331 C20.9962388,11.8996379 21,11.9493797 21,12 L20.9962979,11.9137692 C20.9978436,11.9317345 20.9989053,11.9497336 20.9994829,11.9677454 L21,12 C21,12.0112225 20.9998151,12.0224019 20.9994483,12.0335352 C20.9988772,12.050591 20.997855,12.0679231 20.996384,12.0852242 C20.994564,12.1070574 20.9920941,12.1281144 20.9889807,12.1489612 C20.9863719,12.165949 20.9832978,12.1833753 20.9797599,12.2007258 C20.9753602,12.2227461 20.9701664,12.2444365 20.964279,12.2658396 C20.9599023,12.2814633 20.9552713,12.2968513 20.9502619,12.3121425 C20.9438775,12.3317977 20.9366843,12.3515792 20.928896,12.3710585 C20.9218036,12.3887956 20.914321,12.4060985 20.9063266,12.4232215 C20.8966234,12.4438914 20.8862061,12.4642939 20.8751242,12.484277 C20.8685012,12.4963944 20.8613931,12.5086131 20.8540045,12.5207088 C20.8382813,12.546275 20.8215099,12.5711307 20.8036865,12.5951593 C20.774687,12.6343256 20.7425008,12.6717127 20.7071068,12.7071068 L20.787214,12.6167501 C20.7849289,12.6196628 20.7826279,12.6225624 20.7803112,12.625449 L20.7071068,12.7071068 L14.7071068,18.7071068 C14.3165825,19.0976311 13.6834175,19.0976311 13.2928932,18.7071068 C12.9023689,18.3165825 12.9023689,17.6834175 13.2928932,17.2928932 L17.584,13 L4,13 C3.48716416,13 3.06449284,12.6139598 3.00672773,12.1166211 L3,12 C3,11.4477153 3.44771525,11 4,11 L17.586,11 L13.2928932,6.70710678 C12.9324093,6.34662282 12.9046797,5.77939176 13.2097046,5.38710056 Z"></path>
+    </svg>
+  );
+}
+
+export default ArrowRight;

package/src/icons/ArrowRight/arrow-right.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>arrow-right</title>
+    <defs>
+        <path d="M13.2928932,5.29289322 C13.6834175,4.90236893 14.3165825,4.90236893 14.7071068,5.29289322 L20.7071068,11.2928932 C20.7355731,11.3213595 20.7623312,11.3515341 20.787214,11.3832499 C20.7927155,11.3901576 20.7982466,11.397397 20.8036654,11.4046934 C20.8215099,11.4288693 20.8382813,11.453725 20.8539326,11.4793398 C20.8613931,11.4913869 20.8685012,11.5036056 20.8753288,11.5159379 C20.8862061,11.5357061 20.8966234,11.5561086 20.9063462,11.5769009 C20.914321,11.5939015 20.9218036,11.6112044 20.9287745,11.628664 C20.9366843,11.6484208 20.9438775,11.6682023 20.9504533,11.6882636 C20.9552713,11.7031487 20.9599023,11.7185367 20.9641549,11.734007 C20.9701664,11.7555635 20.9753602,11.7772539 20.9798348,11.7992059 C20.9832978,11.8166247 20.9863719,11.834051 20.9889822,11.8515331 C20.9962388,11.8996379 21,11.9493797 21,12 L20.9962979,11.9137692 C20.9978436,11.9317345 20.9989053,11.9497336 20.9994829,11.9677454 L21,12 C21,12.0112225 20.9998151,12.0224019 20.9994483,12.0335352 C20.9988772,12.050591 20.997855,12.0679231 20.996384,12.0852242 C20.994564,12.1070574 20.9920941,12.1281144 20.9889807,12.1489612 C20.9863719,12.165949 20.9832978,12.1833753 20.9797599,12.2007258 C20.9753602,12.2227461 20.9701664,12.2444365 20.964279,12.2658396 C20.9599023,12.2814633 20.9552713,12.2968513 20.9502619,12.3121425 C20.9438775,12.3317977 20.9366843,12.3515792 20.928896,12.3710585 C20.9218036,12.3887956 20.914321,12.4060985 20.9063266,12.4232215 C20.8966234,12.4438914 20.8862061,12.4642939 20.8751242,12.484277 C20.8685012,12.4963944 20.8613931,12.5086131 20.8540045,12.5207088 C20.8382813,12.546275 20.8215099,12.5711307 20.8036865,12.5951593 C20.774687,12.6343256 20.7425008,12.6717127 20.7071068,12.7071068 L20.787214,12.6167501 C20.7849289,12.6196628 20.7826279,12.6225624 20.7803112,12.625449 L20.7071068,12.7071068 L14.7071068,18.7071068 C14.3165825,19.0976311 13.6834175,19.0976311 13.2928932,18.7071068 C12.9023689,18.3165825 12.9023689,17.6834175 13.2928932,17.2928932 L17.584,13 L4,13 C3.48716416,13 3.06449284,12.6139598 3.00672773,12.1166211 L3,12 C3,11.4477153 3.44771525,11 4,11 L17.586,11 L13.2928932,6.70710678 C12.9324093,6.34662282 12.9046797,5.77939176 13.2097046,5.38710056 Z" id="path-1"></path>
+    </defs>
+    <g id="arrow-right" stroke="none" fill="none">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Combined-Shape" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+        <g id="🎨Color" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd">
+            <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
+        </g>
+    </g>
+</svg>

package/src/icons/ArrowRight/index.tsx

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

package/src/icons/Search/Search.tsx

@@ -8,7 +8,6 @@ function Search({ ...props }) {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <title>iconfont/search</title>
       <defs>
         <polygon id="path-1" points="0 0 20 0 20 20 0 20"></polygon>
       </defs>

package/src/icons/Warning/Warning.tsx

@@ -0,0 +1,56 @@
+function Warning({ ...props }) {
+  return (
+    <svg
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <defs>
+        <polygon
+          id="path-1"
+          points="-1.11022302e-16 0 2.0005 0 2.0005 2.0002 -1.11022302e-16 2.0002"
+        ></polygon>
+        <polygon id="path-3" points="0 0 2 0 2 7.9998 0 7.9998"></polygon>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <circle cx="12" cy="12" fill="#E3000B" id="Oval" r="11"></circle>
+        <g id="Group-9" transform="translate(10.999750, 6.500000)">
+          <g id="Group-3" transform="translate(0.000000, 8.999800)">
+            <mask fill="white" id="mask-2">
+              <use xlinkHref="#path-1"></use>
+            </mask>
+            <g id="Clip-2"></g>
+            <path
+              d="M0.29325,0.293 C-0.09775,0.684 -0.09775,1.317 0.29325,1.707 C0.68425,2.098 1.31725,2.098 1.70725,1.707 C2.09825,1.317 2.09825,0.684 1.70725,0.293 C1.51225,0.098 1.25825,0.001 1.00225,0 L0.99925,0 C0.74325,0.001 0.48825,0.098 0.29325,0.293"
+              fill="#FFFFFF"
+              id="Fill-1"
+              mask="url(#mask-2)"
+            ></path>
+          </g>
+          <path
+            d="M0.99875,8.9998 L1.00275,8.9998 L0.99875,8.9998 Z"
+            fill="#FFFFFF"
+            id="Fill-4"
+          ></path>
+          <g id="Group-8" transform="translate(0.000350, 0.000000)">
+            <mask fill="white" id="mask-4">
+              <use xlinkHref="#path-3"></use>
+            </mask>
+            <g id="Clip-7"></g>
+            <path
+              d="M1,-0.0002 C0.448,-0.0002 0,0.4478 0,0.9998 L0,6.9998 C0,7.4008 0.24,7.7428 0.582,7.9018 C0.71,7.9618 0.849,7.9998 1,7.9998 C1.151,7.9998 1.29,7.9618 1.418,7.9018 C1.76,7.7428 2,7.4008 2,6.9998 L2,0.9998 C2,0.4478 1.552,-0.0002 1,-0.0002"
+              fill="#FFFFFF"
+              id="Fill-6"
+              mask="url(#mask-4)"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default Warning;

package/src/icons/Warning/index.tsx

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

package/src/icons/Warning/info-achtung-kreisrot-rot.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
+  <title>info/info-achtung-kreisrot</title>
+  <defs>
+    <polygon id="path-1" points="-1.11022302e-16 0 2.0005 0 2.0005 2.0002 -1.11022302e-16 2.0002"></polygon>
+    <polygon id="path-3" points="0 0 2 0 2 7.9998 0 7.9998"></polygon>
+  </defs>
+  <g id="info/info-achtung-kreisrot" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <circle id="Oval" fill="#E3000B" cx="12" cy="12" r="11"></circle>
+    <g id="Group-9" transform="translate(10.999750, 6.500000)">
+      <g id="Group-3" transform="translate(0.000000, 8.999800)">
+        <mask id="mask-2" fill="white">
+          <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Clip-2"></g>
+        <path d="M0.29325,0.293 C-0.09775,0.684 -0.09775,1.317 0.29325,1.707 C0.68425,2.098 1.31725,2.098 1.70725,1.707 C2.09825,1.317 2.09825,0.684 1.70725,0.293 C1.51225,0.098 1.25825,0.001 1.00225,0 L0.99925,0 C0.74325,0.001 0.48825,0.098 0.29325,0.293" id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)"></path>
+      </g>
+      <path d="M0.99875,8.9998 L1.00275,8.9998 L0.99875,8.9998 Z" id="Fill-4" fill="#FFFFFF"></path>
+      <g id="Group-8" transform="translate(0.000350, 0.000000)">
+        <mask id="mask-4" fill="white">
+          <use xlink:href="#path-3"></use>
+        </mask>
+        <g id="Clip-7"></g>
+        <path d="M1,-0.0002 C0.448,-0.0002 0,0.4478 0,0.9998 L0,6.9998 C0,7.4008 0.24,7.7428 0.582,7.9018 C0.71,7.9618 0.849,7.9998 1,7.9998 C1.151,7.9998 1.29,7.9618 1.418,7.9018 C1.76,7.7428 2,7.4008 2,6.9998 L2,0.9998 C2,0.4478 1.552,-0.0002 1,-0.0002" id="Fill-6" fill="#FFFFFF" mask="url(#mask-4)"></path>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/utils/constants.ts

@@ -72,6 +72,16 @@ export const DEFAULT_QUERYABLE_LAYERS = Object.keys(RVF_LAYERS_NAMES)
   })
   .toString();
 
+export const LAYERS_WITH_LINK = Object.keys(RVF_LAYERS_NAMES)
+  .filter((name) => {
+    return (
+      name !== RVF_LAYERS_NAMES.tarifzonen &&
+      name !== RVF_LAYERS_NAMES.pois &&
+      name !== RVF_LAYERS_NAMES.echtzeit
+    );
+  })
+  .toString();
+
 export const WFS_CARGO_BIKE_TYPE = "sharing_stations_cargo_bicycle";
 export const WFS_CAR_TYPE = "sharing_stations_car";
 export const WFS_BIKE_TYPE = "sharing_stations_bicycle";

package/src/utils/hooks/useLayerConfig.tsx

@@ -7,6 +7,7 @@ import useMapContext from "./useMapContext";
 export interface LayerConfig {
   link?: {
     href?: string;
+    show?: boolean;
     text?: string;
   };
   title?: string;