@geops/rvf-mobility-web-component 0.1.11 → 0.1.13

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -0,0 +1,49 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+  const { setLineNetworkPlanLayer } = useRvfContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata, source }) => {
+        return (
+          metadata?.["rvf.filter"] === "netowrk_plans" ||
+          source === "network_plans"
+        );
+      },
+      maplibreLayer: baseLayer,
+      minZoom: 10,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    setLineNetworkPlanLayer(layer);
+  }, [layer, setLineNetworkPlanLayer]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfLineNetworkPlanLayer);

package/src/RvfLineNetworkPlanLayer/index.tsx

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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -10,14 +10,19 @@ import {
   RealtimeTrainId,
 } from "mobility-toolbox-js/types";
 import { Feature, Map as OlMap } from "ol";
+import { Group } from "ol/layer";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
 import GeolocationButton from "../GeolocationButton";
-import Cancel from "../icons/Cancel";
-import Menu from "../icons/Menu";
 import Map from "../Map";
 import { MobilityMapProps } from "../MobilityMap/MobilityMap";
 import NotificationLayer from "../NotificationLayer";
@@ -27,11 +32,15 @@ import RouteSchedule from "../RouteSchedule";
 import RvfExportMenu from "../RvfExportMenu";
 import RvfExportMenuButton from "../RvfExportMenuButton";
 import RvfFeatureDetails from "../RvfFeatureDetails";
+import RvfFloatingMenu from "../RvfFloatingMenu";
 // Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
-import RvfIconButton from "../RvfIconButton";
+import RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
 import Modal from "../RvfModal";
 import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
 import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
+import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
+import Topics from "../RvfTopics";
 import RvfZoomButtons from "../RvfZoomButtons";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
@@ -40,7 +49,6 @@ import Station from "../Station";
 import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
-import TopicMenu from "../TopicMenu";
 import { RVF_EXTENT_3857 } from "../utils/constants";
 import { I18nContext } from "../utils/hooks/useI18n";
 import { MapContext } from "../utils/hooks/useMapContext";
@@ -57,10 +65,18 @@ const bbox = RVF_EXTENT_3857.join(",");
 
 const baseLayerProps = {
   mapLibreOptions: {
+    maxCanvasSize: [20000, 20000] as [number, number], // remove 4096 limitations
     preserveDrawingBuffer: true,
   },
 };
 
+const styleProps = {
+  //fontSize: 16
+};
+const scrollableHandlerProps = {
+  style: { width: "calc(100% - 60px)" },
+};
+
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   baselayer = "de.rvf",
@@ -98,7 +114,15 @@ function RvfMobilityMap({
   const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
-  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState(false);
+  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
+  const [sellingPointsLayer, setSellingPointsLayer] =
+    useState<MaplibreStyleLayer>();
+  const [tarifZonenLayer, setTarifZonenLayer] = useState<MaplibreStyleLayer>();
+  const [poisLayer, setPoisLayer] = useState<MaplibreStyleLayer>();
+  const [lineNetworkPlanLayer, setLineNetworkPlanLayer] =
+    useState<MaplibreStyleLayer>();
+  const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
+    useState<Group>();
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
@@ -226,13 +250,57 @@ function RvfMobilityMap({
   const rvfContextValue = useMemo(() => {
     return {
       isExportMenuOpen,
+      isLayerTreeOpen,
+      lineNetworkPlanLayer,
+      poisLayer,
       selectedFeature,
       selectedFeatures,
+      sellingPointsLayer,
       setIsExportMenuOpen,
+      setIsLayerTreeOpen,
+      setLineNetworkPlanLayer,
+      setPoisLayer,
       setSelectedFeature,
       setSelectedFeatures,
+      setSellingPointsLayer,
+      setSharedMobilityLayerGroup,
+      setTarifZonenLayer,
+      sharedMobilityLayerGroup,
+      tarifZonenLayer,
+    };
+  }, [
+    isExportMenuOpen,
+    isLayerTreeOpen,
+    lineNetworkPlanLayer,
+    poisLayer,
+    selectedFeature,
+    selectedFeatures,
+    sellingPointsLayer,
+    sharedMobilityLayerGroup,
+    tarifZonenLayer,
+  ]);
+
+  const onLayerTreeMenuClick = useCallback(() => {
+    setIsLayerTreeOpen(!isLayerTreeOpen);
+  }, [isLayerTreeOpen]);
+
+  const onExportMenuClose = useCallback(() => {
+    setIsExportMenuOpen(false);
+  }, []);
+
+  const copyrightOptions = useMemo(() => {
+    return {
+      format: (copyrights) => {
+        const newCopyrights = [];
+        copyrights.forEach((copyright) => {
+          if (!/(sbb|rvf)/i.test(copyright)) {
+            newCopyrights.push(copyright);
+          }
+        });
+        return newCopyrights.join("&nbsp;|&nbsp;");
+      },
     };
-  }, [isExportMenuOpen, selectedFeature, selectedFeatures]);
+  }, []);
 
   return (
     <I18nContext.Provider value={i18n}>
@@ -243,56 +311,57 @@ function RvfMobilityMap({
           <div
             className="relative size-full border font-sans @container/main"
             ref={eventNodeRef}
+            style={styleProps}
           >
-            <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
+            <div className="relative flex size-full flex-col text-base @lg/main:flex-row-reverse">
               <Map className="relative flex-1 overflow-visible ">
-                <BaseLayer {...baseLayerProps} isNotInLayerTree />
+                <BaseLayer {...baseLayerProps} />
                 <SingleClickListener />
 
-                {realtime === "true" && <RealtimeLayer title="Realtime data" />}
+                {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
                 {tenant && <StationsLayer />}
                 {notification === "true" && <NotificationLayer />}
-                {/* <RvfLnpLayer />
-                <RvfVerkaufStellenLayer />
-                <RvfTarifZonenLayer /> */}
+                <RvfSellingPointsLayer title="Verkaufsstellen" />
+                <RvfLineNetworkPlanLayer title="Liniennetz" />
+                <RvfTarifZonenLayer title="Tarifzonen" />
                 <RvfPoisLayer title="POIs" />
-
                 <RvfSharedMobilityLayerGroup title="Shared Mobility" />
 
-                <div className="absolute left-2 top-2 z-10">
-                  <RvfIconButton
-                    onClick={() => {
-                      return setIsLayerTreeOpen(!isLayerTreeOpen);
-                    }}
-                    selected={isLayerTreeOpen}
-                  >
-                    {isLayerTreeOpen ? <Cancel /> : <Menu />}
-                  </RvfIconButton>
-                  {isLayerTreeOpen && <TopicMenu map={map} />}
-                </div>
                 <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
                   <ScaleLine className="bg-slate-50/70" />
-                  <Copyright className="bg-slate-50/70" />
+                  <Copyright
+                    className="bg-slate-50/70"
+                    options={copyrightOptions}
+                  />
                 </div>
+
                 <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
                   {geolocation === "true" && <GeolocationButton />}
+                  <RvfExportMenuButton />
                 </div>
+
                 {search === "true" && (
                   <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
                     <Search />
                   </div>
                 )}
+
                 <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
-                  <RvfExportMenuButton />
                   <RvfZoomButtons />
                 </div>
+
+                <RvfFloatingMenu
+                  isOpen={isLayerTreeOpen}
+                  onClick={onLayerTreeMenuClick}
+                  title="Kartendaten"
+                >
+                  <Topics className={"w-full px-2"} />
+                </RvfFloatingMenu>
               </Map>
 
               <Overlay
                 className={"z-50"}
-                ScrollableHandlerProps={{
-                  style: { width: "calc(100% - 60px)" },
-                }}
+                ScrollableHandlerProps={scrollableHandlerProps}
               >
                 {realtime === "true" && trainId && (
                   <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
@@ -306,11 +375,7 @@ function RvfMobilityMap({
               </Overlay>
 
               {isExportMenuOpen && (
-                <Modal
-                  onClose={() => {
-                    setIsExportMenuOpen(false);
-                  }}
-                >
+                <Modal onClose={onExportMenuClose}>
                   <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
                 </Modal>
               )}

package/src/RvfPoisLayer/RvfPoisLayer.tsx

@@ -4,9 +4,11 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
+  const { setPoisLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
@@ -22,6 +24,10 @@ function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setPoisLayer(layer);
+  }, [layer, setPoisLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;

package/src/RvfRadioButton/RvfRadioButton.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from "preact";
+
+export type RvfRadioButtonProps =
+  {} & JSX.InputHTMLAttributes<HTMLInputElement>;
+
+function RvfRadioButton(props: RvfRadioButtonProps) {
+  return (
+    <input
+      className="peer mr-2 size-[20px] rounded-full border-2 border-grey accent-red"
+      {...props}
+      type="radio"
+    />
+  );
+}
+
+export default RvfRadioButton;

package/src/RvfRadioButton/index.tsx

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

package/src/RvfSelect/RvfSelect.tsx

@@ -0,0 +1,22 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import ArrowDown from "../icons/ArrowDown";
+
+export type RvfSelectProps = {} & JSX.HTMLAttributes<HTMLSelectElement> &
+  PreactDOMAttributes;
+
+function RvfSelect({ children, className, onChange }: RvfSelectProps) {
+  return (
+    <div className="relative flex items-center text-grey">
+      <select
+        className={`min-w-12 appearance-none rounded-xl border border-grey p-2 text-base focus:outline-none ${className}`}
+        onChange={onChange}
+      >
+        {children}
+      </select>
+      <ArrowDown className="pointer-events-none absolute right-1" />
+    </div>
+  );
+}
+
+export default RvfSelect;

package/src/RvfSelect/index.tsx

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

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -0,0 +1,45 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+  const { setSellingPointsLayer } = useRvfContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["general.filter"] === "selling_points";
+      },
+      maplibreLayer: baseLayer,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    setSellingPointsLayer(layer);
+  }, [layer, setSellingPointsLayer]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfSellingPointsLayer);

package/src/RvfSellingPointsLayer/index.tsx

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

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -1,66 +1,111 @@
 import type { Options } from "ol/layer/Group";
 
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { Feature } from "ol";
+import { Point } from "ol/geom";
 import { Group, Vector } from "ol/layer";
+import { Cluster } from "ol/source";
+import VectorSource from "ol/source/Vector";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
+import createFreeFloatMobilityLayer from "../utils/createSharedMobilityLayer";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
-function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
-  const { map } = useMapContext();
+export type GroupOptions = Options & Record<string, unknown>;
+
+function RvfSharedMobilityLayerGroup(props: GroupOptions) {
+  const { baseLayer, map } = useMapContext();
+  const { setSharedMobilityLayerGroup } = useRvfContext();
 
   const group = useMemo(() => {
-    const sharingStationsBicycle = createMobiDataBwWfsLayer(
-      "sharing_stations_bicycle",
-      "red",
-    );
-    sharingStationsBicycle.set("title", "Stations Bicycle");
-
-    const sharingStationsCar = createMobiDataBwWfsLayer(
-      "sharing_stations_car",
-      "blue",
-    );
-    sharingStationsCar.set("title", "Stations Car");
-
-    const sharingStationsCargoBicycle = createMobiDataBwWfsLayer(
-      "sharing_stations_cargo_bicycle",
-      "green",
-    );
-    sharingStationsCargoBicycle.set("title", "Stations Cargo Bicycle");
-
-    const sharingStationsScooterStanding = createMobiDataBwWfsLayer(
-      "sharing_stations_scooters_standing",
-      "purple",
-    );
-    sharingStationsScooterStanding.set("title", "Stations Scooter");
-
-    const sharingVehicles = createMobiDataBwWfsLayer(
-      "sharing_vehicles",
-      "orange",
-    );
-    sharingVehicles.set("title", "Free Floating");
-    console.log("ici");
-    return new Group({
+    if (!baseLayer) {
+      return null;
+    }
+
+    const sharingBicycle = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "bike";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_bicycle", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "bike"),
+      ],
+      title: "Fahrrad",
+    } as GroupOptions);
+
+    const sharingCar = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "car";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_car", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "car"),
+      ],
+      title: "Auto",
+    } as GroupOptions);
+
+    const sharingCargoBicycle = new Group({
       layers: [
-        sharingStationsBicycle,
-        sharingStationsCar,
-        sharingStationsCargoBicycle,
-        sharingStationsScooterStanding,
-        sharingVehicles,
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "cargo_bike";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_cargo_bicycle", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "cargo_bike"),
       ],
+      title: "Cargobike",
+    } as GroupOptions);
+
+    const sharingScooter = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "hitchhiking";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_scooters_standing", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "scooter"),
+      ],
+      title: "E-Roller",
+    } as GroupOptions);
+
+    return new Group({
+      layers: [sharingBicycle, sharingCar, sharingCargoBicycle, sharingScooter],
       ...props,
     });
-  }, [props]);
+  }, [baseLayer, props]);
 
   // Reload features every minute
   useEffect(() => {
     const interval = window.setInterval(() => {
-      group.getLayers().forEach((layer: Vector) => {
-        // @ts-expect-error - private property
-        layer.getSource().loadedExtentsRtree_.clear();
-        layer.getSource().clear(true);
-        layer.getSource().changed();
+      group.getLayers().forEach((layer: Group) => {
+        layer.getLayers().forEach((layer: MaplibreStyleLayer | Vector) => {
+          const source = layer.getSource();
+          source?.refresh();
+
+          // For cluster source
+          (
+            (source as Cluster<Feature<Point>>)?.getSource?.() as VectorSource<
+              Feature<Point>
+            >
+          )?.refresh();
+        });
       });
     }, 60000);
     return () => {
@@ -68,6 +113,10 @@ function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
     };
   }, [group]);
 
+  useEffect(() => {
+    setSharedMobilityLayerGroup(group);
+  }, [group, setSharedMobilityLayerGroup]);
+
   useEffect(() => {
     if (!map || !group) {
       return;

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -42,8 +42,17 @@ function SingleClickListener() {
         return feat.get("tralis_network")?.includes(tenant);
       });
 
+      // Send all the features under the cursor
+      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l.get("isQueryable");
+        },
+      }) as Feature[];
+
       evt.map.getTargetElement().style.cursor =
-        realtimeFeature || stationFeature ? "pointer" : "default";
+        realtimeFeature || stationFeature || features?.length
+          ? "pointer"
+          : "default";
     },
     [realtimeLayer, stationsLayer, tenant],
   );
@@ -101,8 +110,16 @@ function SingleClickListener() {
         setSelectedFeature(null);
         setSelectedFeatures([]);
       } else {
-        setSelectedFeatures(features);
-        setSelectedFeature(features[0]);
+        const feats = [];
+        features.forEach((feature) => {
+          if (feature.get("features")) {
+            feats.push(...feature.get("features"));
+          } else {
+            feats.push(feature);
+          }
+        });
+        setSelectedFeatures(feats);
+        setSelectedFeature(feats[0]);
       }
     },
     [

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

@@ -0,0 +1,48 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+function RvfTarifZonenLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+  const { setTarifZonenLayer } = useRvfContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      isQueryable: false,
+      layersFilter: ({ metadata, source, "source-layer": sourceLayer }) => {
+        return (
+          metadata?.["rvf.filter"] === "tarifzonen" ||
+          (source === "rvf" && sourceLayer === "tarifzonen")
+        );
+      },
+      maplibreLayer: baseLayer,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    setTarifZonenLayer(layer);
+  }, [layer, setTarifZonenLayer]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfTarifZonenLayer);

package/src/RvfTarifZonenLayer/index.tsx

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