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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -39,6 +39,7 @@ import RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
 import Modal from "../RvfModal";
 import RvfOverlayHeader from "../RvfOverlayHeader";
 import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
 import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
 import RvfShare from "../RvfShare";
 import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
@@ -53,8 +54,10 @@ import Station from "../Station";
 import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
-import { RVF_EXTENT_3857 } from "../utils/constants";
+import { RVF_EXTENT_3857, RVF_LAYERS_TITLES } from "../utils/constants";
+import getFeatureInformationTitle from "../utils/getFeatureInformationTitle";
 import { I18nContext } from "../utils/hooks/useI18n";
+import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
 import { MapContext } from "../utils/hooks/useMapContext";
 import { RvfContext } from "../utils/hooks/useRvfContext";
 import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
@@ -63,7 +66,13 @@ import MobilityEvent from "../utils/MobilityEvent";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
-export type RvfMobilityMapProps = { toolbar: string } & MobilityMapProps;
+export type RvfMobilityMapProps = {
+  layers: string; // list of visible layers on load
+  layertree: string;
+  print: string;
+  share: string;
+  toolbar: string;
+} & MobilityMapProps;
 
 const bbox = RVF_EXTENT_3857.join(",");
 
@@ -87,6 +96,8 @@ function RvfMobilityMap({
   center = null,
   extent = bbox,
   geolocation = "true",
+  layers = null,
+  layertree = "true",
   mapsurl = "https://maps.geops.io",
   maxextent = bbox,
   maxzoom = "20",
@@ -97,9 +108,11 @@ function RvfMobilityMap({
   notificationbeforelayerid = null,
   notificationurl = null,
   permalink = "false",
+  print = "true",
   realtime = "true",
   realtimeurl = "wss://api.geops.io/tracker-ws/v1/ws",
   search = "false",
+  share = "true",
   stopsurl = "https://api.geops.io/stops/v1/",
   tenant = null,
   toolbar = "true",
@@ -129,7 +142,42 @@ function RvfMobilityMap({
     useState<MaplibreStyleLayer>();
   const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
     useState<Group>();
-  const [hasToolbar] = useState<boolean>(toolbar === "true");
+
+  // Convert string boolean to boolean
+  const hasToolbar = useMemo(() => {
+    return toolbar === "true";
+  }, [toolbar]);
+
+  const hasLayerTree = useMemo(() => {
+    return layertree === "true";
+  }, [layertree]);
+
+  const hasRealtime = useMemo(() => {
+    return realtime === "true";
+  }, [realtime]);
+
+  const hasNotification = useMemo(() => {
+    return notification === "true";
+  }, [notification]);
+
+  const hasGeolocation = useMemo(() => {
+    return geolocation === "true";
+  }, [geolocation]);
+
+  const hasSearch = useMemo(() => {
+    return search === "true";
+  }, [search]);
+
+  const hasShare = useMemo(() => {
+    return share === "true";
+  }, [share]);
+
+  const hasPrint = useMemo(() => {
+    return print === "true";
+  }, [print]);
+
+  // Apply initial visibility of layers
+  useInitialLayersVisiblity(map, layers);
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
@@ -146,6 +194,7 @@ function RvfMobilityMap({
       geolocation,
       isFollowing,
       isTracking,
+      layers,
       map,
       mapsurl,
       maxextent,
@@ -190,6 +239,7 @@ function RvfMobilityMap({
     map,
     mapsurl,
     maxextent,
+    layers,
     maxzoom,
     minzoom,
     mots,
@@ -217,6 +267,8 @@ function RvfMobilityMap({
         center,
         extent,
         geolocation,
+        layers,
+        layertree,
         mapsurl,
         maxextent,
         maxzoom,
@@ -226,9 +278,11 @@ function RvfMobilityMap({
         notificationat,
         notificationbeforelayerid,
         notificationurl,
+        print,
         realtime,
         realtimeurl,
         search,
+        share,
         tenant,
         toolbar,
         zoom,
@@ -236,8 +290,10 @@ function RvfMobilityMap({
     );
   }, [
     baselayer,
+    layers,
     center,
     geolocation,
+    layertree,
     toolbar,
     mapsurl,
     maxzoom,
@@ -254,6 +310,8 @@ function RvfMobilityMap({
     zoom,
     extent,
     maxextent,
+    print,
+    share,
   ]);
 
   const rvfContextValue = useMemo(() => {
@@ -261,6 +319,7 @@ function RvfMobilityMap({
       isExportMenuOpen,
       isLayerTreeOpen,
       isShareMenuOpen,
+      layertree,
       lineNetworkPlanLayer,
       poisLayer,
       selectedFeature,
@@ -281,6 +340,7 @@ function RvfMobilityMap({
     };
   }, [
     isExportMenuOpen,
+    layertree,
     isLayerTreeOpen,
     isShareMenuOpen,
     lineNetworkPlanLayer,
@@ -399,25 +459,33 @@ function RvfMobilityMap({
               <Map className="relative flex-1 overflow-visible ">
                 <BaseLayer {...baseLayerProps} />
                 <SingleClickListener />
+                <RvfSelectedFeatureHighlightLayer />
 
-                {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
+                {hasRealtime && (
+                  <RealtimeLayer title={RVF_LAYERS_TITLES.echtzeit} />
+                )}
                 {
                   <StationsLayer
                     minZoom={10}
-                    title="Haltestellen"
+                    title={RVF_LAYERS_TITLES.haltestellen}
                     {...stationsLayerProps}
                   />
                 }
-                {notification === "true" && <NotificationLayer />}
-                <RvfSellingPointsLayer isQueryable title="Verkaufsstellen" />
+                {hasNotification && <NotificationLayer />}
+                <RvfTarifZonenLayer title={RVF_LAYERS_TITLES.tarifzonen} />
+                <RvfSellingPointsLayer
+                  isQueryable
+                  title={RVF_LAYERS_TITLES.verkaufsstellen}
+                />
                 <RvfLineNetworkPlanLayer
                   isQueryable
                   minZoom={10}
-                  title="Liniennetz"
+                  title={RVF_LAYERS_TITLES.liniennetz}
+                />
+                <RvfPoisLayer title={RVF_LAYERS_TITLES.pois} />
+                <RvfSharedMobilityLayerGroup
+                  title={RVF_LAYERS_TITLES.sharedMobility}
                 />
-                <RvfTarifZonenLayer isQueryable title="Tarifzonen" />
-                <RvfPoisLayer title="POIs" />
-                <RvfSharedMobilityLayerGroup title="Shared Mobility" />
 
                 <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" />
@@ -428,11 +496,11 @@ function RvfMobilityMap({
                 </div>
 
                 <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
-                  {geolocation === "true" && <GeolocationButton />}
-                  {!hasToolbar && <RvfExportMenuButton />}
+                  {hasGeolocation && <GeolocationButton />}
+                  {!hasToolbar && hasPrint && <RvfExportMenuButton />}
                 </div>
 
-                {search === "true" && (
+                {hasSearch && (
                   <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>
@@ -442,7 +510,7 @@ function RvfMobilityMap({
                   <RvfZoomButtons />
                 </div>
 
-                {!hasToolbar && (
+                {!hasToolbar && hasLayerTree && (
                   <RvfFloatingMenu
                     isOpen={isLayerTreeOpen}
                     onClick={onLayerTreeMenuClick}
@@ -453,16 +521,16 @@ function RvfMobilityMap({
                 )}
               </Map>
               <Overlay
-                className={"z-50"}
+                className={"z-50 bg-white"}
                 ScrollableHandlerProps={scrollableHandlerProps}
               >
-                {realtime === "true" && trainId && (
+                {hasRealtime && trainId && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
                         setTrainId(null);
                       }}
-                      title="Train"
+                      title={RVF_LAYERS_TITLES.echtzeit}
                     ></RvfOverlayHeader>
                     <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
                   </>
@@ -484,23 +552,23 @@ function RvfMobilityMap({
                       onClose={() => {
                         setSelectedFeature(null);
                       }}
-                      title="Informations"
+                      title={getFeatureInformationTitle(selectedFeature)}
                     ></RvfOverlayHeader>
-                    <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                    <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  px-2 pt-2" />
                   </>
                 )}
-                {hasToolbar && isExportMenuOpen && (
+                {hasToolbar && hasPrint && isExportMenuOpen && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
                         setIsExportMenuOpen(false);
                       }}
-                      title="Export"
+                      title="Drücken"
                     ></RvfOverlayHeader>
-                    <RvfExportMenu className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                    <RvfExportMenu className="relative flex flex-col gap-8 overflow-y-auto overflow-x-hidden px-4 py-6" />
                   </>
                 )}
-                {hasToolbar && isLayerTreeOpen && (
+                {hasToolbar && hasLayerTree && isLayerTreeOpen && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
@@ -508,33 +576,54 @@ function RvfMobilityMap({
                       }}
                       title="Layers"
                     ></RvfOverlayHeader>
-                    <Topics className="relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
+                    <Topics className=" relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
                   </>
                 )}
-                {hasToolbar && isShareMenuOpen && (
+                {hasToolbar && hasShare && isShareMenuOpen && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {
-                        setIsLayerTreeOpen(false);
+                        setIsShareMenuOpen(false);
                       }}
                       title="Share"
                     ></RvfOverlayHeader>
-                    <RvfShare className="relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
+                    <RvfShare className="relative flex h-full flex-col gap-8 overflow-y-auto overflow-x-hidden px-4 py-6" />
                   </>
                 )}
               </Overlay>
 
               {hasToolbar && (
-                <div className={"overflow-x-hidden border-r"}>
-                  <RvfLayerTreeButton className={"border-none"} />
-                  <RvfExportMenuButton className={"border-none"} />
-                  <RvfShareMenuButton className={"border-none"} />
+                <div
+                  className={
+                    "z-[100] flex justify-around overflow-x-hidden border-t bg-white p-1 @lg/main:block @lg/main:border-r @lg/main:p-0 "
+                  }
+                >
+                  {hasLayerTree && (
+                    <RvfLayerTreeButton
+                      className={"border-none"}
+                      title="Layers"
+                    />
+                  )}
+
+                  {hasPrint && (
+                    <RvfExportMenuButton
+                      className={"border-none"}
+                      title="Drücken"
+                    />
+                  )}
+
+                  {hasShare && (
+                    <RvfShareMenuButton
+                      className={"border-none"}
+                      title="Share"
+                    />
+                  )}
                 </div>
               )}
 
-              {!hasToolbar && isExportMenuOpen && (
+              {!hasToolbar && hasPrint && isExportMenuOpen && (
                 <Modal onClose={onExportMenuClose}>
-                  <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
+                  <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden p-2" />
                 </Modal>
               )}
             </div>

package/src/RvfOverlayHeader/RvfOverlayHeader.tsx

@@ -22,7 +22,7 @@ function RvfOverlayHeader({
   return (
     <div
       className={twMerge(
-        "flex flex-row items-center justify-between gap-2 p-2 border-b" +
+        "flex flex-row items-center justify-between gap-2 p-2 border-b pl-4" +
           (className || ""),
       )}
       {...props}

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,13 @@ 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,
+  RVF_LAYERS_TITLES,
+} 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,13 +42,22 @@ 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
+          {RVF_LAYERS_TITLES.fahrrad}
           <Bicycle />
         </div>
       ),
@@ -58,13 +71,22 @@ 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
+          {RVF_LAYERS_TITLES.auto}
           <Car />
         </div>
       ),
@@ -78,13 +100,22 @@ 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
+          {RVF_LAYERS_TITLES.cargobike}
           <CargoBike />
         </div>
       ),
@@ -100,12 +131,22 @@ 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
+          {RVF_LAYERS_TITLES.eroller}
           <Scooter />
         </div>
       ),
@@ -117,9 +158,10 @@ 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
+          {RVF_LAYERS_TITLES.mitfahrpunkte}
           <Ride />
         </div>
       ),
@@ -134,14 +176,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 +209,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]);