@geops/rvf-mobility-web-component 0.1.56 → 0.1.57

package/src/RvfOverlayContent/RvfOverlayContent.tsx

@@ -10,7 +10,7 @@ import RvfShare from "../RvfShare";
 import RvfTopics from "../RvfTopics";
 import Search from "../Search";
 import Station from "../Station";
-import { RVF_LAYERS_TITLES } from "../utils/constants";
+import { LAYERS_TITLES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -52,7 +52,7 @@ function RvfOverlayContent({
             onClose={() => {
               setTrainId(null);
             }}
-            title={RVF_LAYERS_TITLES.echtzeit}
+            title={LAYERS_TITLES.echtzeit}
           ></RvfOverlayHeader>
           <RouteSchedule className={contentClassName} />
         </>

package/src/RvfPoisLayer/RvfPoisLayer.tsx

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

package/src/RvfSearch/RvfSearch.tsx

@@ -8,7 +8,7 @@ import useMapContext from "../utils/hooks/useMapContext";
 
 import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
 
-function RvfSearch(props: StopsSearchProps) {
+function RvfSearch(props: Partial<StopsSearchProps>) {
   const { apikey, map, stopsurl } = useMapContext();
 
   const onSelect = useCallback(

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -5,7 +5,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 { LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -26,7 +26,7 @@ function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
         return metadata?.["general.filter"] === "selling_points";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.verkaufsstellen,
+      name: LAYERS_NAMES.verkaufsstellen,
       ...(props || {}),
 
       title: (

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -15,8 +15,8 @@ import {
   CAR_FORM_FACTOR,
   CARGOBIKE_FORM_FACTOR,
   LAYER_PROP_IS_EXPORTING,
+  LAYERS_NAMES,
   RVF_EXTENT_4326,
-  RVF_LAYERS_NAMES,
   SCOOTER_FORM_FACTOR,
   SOURCE_FREE_FLOAT_BIKE,
   SOURCE_FREE_FLOAT_CAR,
@@ -180,7 +180,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   }, [map, updateData, mbMap]);
 
   useEffect(() => {
-    if (!mbMap || !stationsData) {
+    if (!mbMap?.style || !stationsData) {
       return;
     }
     const source = mbMap.getSource(SOURCE_SHARING_STATIONS);
@@ -188,7 +188,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   }, [stationsData, mbMap]);
 
   useEffect(() => {
-    if (!mbMap || !bikeFreeFloatData) {
+    if (!mbMap?.style || !bikeFreeFloatData) {
       return;
     }
     const source = mbMap.getSource(SOURCE_FREE_FLOAT_BIKE);
@@ -196,7 +196,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   }, [mbMap, bikeFreeFloatData]);
 
   useEffect(() => {
-    if (!mbMap || !cargoBikeFreeFloatData) {
+    if (!mbMap?.style || !cargoBikeFreeFloatData) {
       return;
     }
     const source = mbMap.getSource(SOURCE_FREE_FLOAT_CARGO_BIKE);
@@ -204,7 +204,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   }, [mbMap, cargoBikeFreeFloatData]);
 
   useEffect(() => {
-    if (!mbMap || !carFreeFloatData) {
+    if (!mbMap?.style || !carFreeFloatData) {
       return;
     }
     const source = mbMap.getSource(SOURCE_FREE_FLOAT_CAR);
@@ -212,7 +212,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   }, [mbMap, carFreeFloatData]);
 
   useEffect(() => {
-    if (!mbMap || !scooterFreeFloatData) {
+    if (!mbMap?.style || !scooterFreeFloatData) {
       return;
     }
     const source = mbMap.getSource(SOURCE_FREE_FLOAT_SCOOTER);
@@ -235,7 +235,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
 
     const bikeFrelo = new MaplibreStyleLayer({
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.bikeFrelo,
+      name: LAYERS_NAMES.bikeFrelo,
       styleLayersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "bike.frelo";
       },
@@ -251,13 +251,13 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
 
     const bikeOthers = new MaplibreStyleLayer({
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.bikeOthers,
+      name: LAYERS_NAMES.bikeOthers,
       styleLayersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "bike.other";
       },
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.bikeOthers]?.title}
+          {layersConfig[LAYERS_NAMES.bikeOthers]?.title}
           <Bicycle />
         </div>
       ),
@@ -269,10 +269,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "cargo_bike.frelo";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.cargobikeFrelo,
+      name: LAYERS_NAMES.cargobikeFrelo,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.cargobikeFrelo]?.title}
+          {layersConfig[LAYERS_NAMES.cargobikeFrelo]?.title}
           <CargoBike />
         </div>
       ),
@@ -284,10 +284,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "cargo_bike.other";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.cargobikeOthers,
+      name: LAYERS_NAMES.cargobikeOthers,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.cargobikeOthers]?.title}
+          {layersConfig[LAYERS_NAMES.cargobikeOthers]?.title}
           <CargoBike />
         </div>
       ),
@@ -299,10 +299,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "car.grueneflotte";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.carGrf,
+      name: LAYERS_NAMES.carGrf,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.carGrf]?.title}
+          {layersConfig[LAYERS_NAMES.carGrf]?.title}
           <Car />
         </div>
       ),
@@ -314,10 +314,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "car.naturenergy";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.carNatur,
+      name: LAYERS_NAMES.carNatur,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.carNatur]?.title}
+          {layersConfig[LAYERS_NAMES.carNatur]?.title}
           <Car />
         </div>
       ),
@@ -329,10 +329,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "car.other";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.carOthers,
+      name: LAYERS_NAMES.carOthers,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.carOthers]?.title}
+          {layersConfig[LAYERS_NAMES.carOthers]?.title}
           <Car />
         </div>
       ),
@@ -344,10 +344,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "scooter";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.eroller,
+      name: LAYERS_NAMES.eroller,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.eroller]?.title}
+          {layersConfig[LAYERS_NAMES.eroller]?.title}
           <Scooter />
         </div>
       ),
@@ -359,10 +359,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "hitchhiking";
       },
       maplibreLayer: baseLayer,
-      name: RVF_LAYERS_NAMES.mitfahrpunkte,
+      name: LAYERS_NAMES.mitfahrpunkte,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {layersConfig[RVF_LAYERS_NAMES.mitfahrpunkte]?.title}
+          {layersConfig[LAYERS_NAMES.mitfahrpunkte]?.title}
           <Ride />
         </div>
       ),

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

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

package/src/Search/Search.tsx

@@ -5,7 +5,9 @@ import StopsSearch from "../StopsSearch";
 import centerOnStation from "../utils/centerOnStation";
 import useMapContext from "../utils/hooks/useMapContext";
 
-function Search() {
+import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
+
+function Search(props: StopsSearchProps) {
   const { apikey, map, stopsurl } = useMapContext();
 
   const onSelect = useCallback(
@@ -15,6 +17,13 @@ function Search() {
     [map],
   );
 
-  return <StopsSearch apikey={apikey} onselect={onSelect} url={stopsurl} />;
+  return (
+    <StopsSearch
+      apikey={apikey}
+      onselect={onSelect}
+      url={stopsurl}
+      {...props}
+    />
+  );
 }
 export default memo(Search);

package/src/{RvfSearchButton/RvfSearchButton.tsx → SearchButton/SearchButton.tsx}

@@ -3,15 +3,15 @@ import { useCallback } from "preact/hooks";
 
 import Search from "../icons/Search";
 import IconButton from "../ui/IconButton";
-import useRvfContext from "../utils/hooks/useRvfContext";
+import useMapContext from "../utils/hooks/useMapContext";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RvfLayerTreeButtonProps = HTMLAttributes<HTMLButtonElement> &
+export type SearchButtonProps = HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
-function RvfSearchButton({ ...props }: RvfLayerTreeButtonProps) {
-  const { isSearchOpen, setIsSearchOpen } = useRvfContext();
+function SearchButton({ ...props }: SearchButtonProps) {
+  const { isSearchOpen, setIsSearchOpen } = useMapContext();
 
   const onClick = useCallback(() => {
     setIsSearchOpen(!isSearchOpen);
@@ -24,4 +24,4 @@ function RvfSearchButton({ ...props }: RvfLayerTreeButtonProps) {
   );
 }
 
-export default memo(RvfSearchButton);
+export default memo(SearchButton);

package/src/SearchButton/index.tsx

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

package/src/ShadowOverflow/ShadowOverflow.tsx

@@ -0,0 +1,20 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import type { PreactDOMAttributes } from "preact";
+
+function ShadowOverflow({
+  children,
+  className,
+  ...props
+}: { className?: string } & PreactDOMAttributes) {
+  return (
+    <div {...props} className={twMerge("relative overflow-y-auto", className)}>
+      <div className="pointer-events-none sticky top-0 right-0 left-0 h-4 bg-gradient-to-t from-transparent to-white"></div>
+      {children}
+      <div className="pointer-events-none sticky right-0 bottom-[-1px] left-0 h-4 bg-gradient-to-b from-transparent to-white"></div>
+    </div>
+  );
+}
+
+export default memo(ShadowOverflow);

package/src/ShadowOverflow/index.tsx

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

package/src/{RvfShare/RvfPermalinkButton/RvfPermalinkButton.tsx → ShareMenu/PermalinkButton/PermalinkButton.tsx}

@@ -1,13 +1,13 @@
 import { useState } from "preact/hooks";
 
 import Cancel from "../../icons/Cancel";
-import Share from "../../icons/Share";
+import ShareMenu from "../../icons/ShareMenu";
 import RvfInputCopy from "../../RvfInputCopy";
 import IconButton from "../../ui/IconButton";
 
 import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
 
-function RvfPermalinkButton({
+function PermalinkButton({
   className,
   ...props
 }: { className?: string } & ButtonHTMLAttributes<HTMLButtonElement> &
@@ -28,7 +28,7 @@ function RvfPermalinkButton({
         selected={showTooltip}
         {...props}
       >
-        <Share />
+        <ShareMenu />
       </IconButton>
 
       {showTooltip && positionTooltip && (
@@ -59,4 +59,4 @@ function RvfPermalinkButton({
   );
 }
 
-export default RvfPermalinkButton;
+export default PermalinkButton;

package/src/ShareMenu/PermalinkButton/index.tsx

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

package/src/{RvfShare/RvfShare.tsx → ShareMenu/ShareMenu.tsx}

@@ -3,13 +3,13 @@ import { twMerge } from "tailwind-merge";
 
 import Email from "../icons/Email";
 import Image from "../icons/Image";
-import RvfPermalink from "../RvfPermalink";
+import PermalinkInput from "../PermalinkInput";
 import Button from "../ui/Button";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-function RvfShare({
+function ShareMenu({
   className = "",
   ...props
 }: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
@@ -18,24 +18,22 @@ function RvfShare({
   return (
     // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
     <div className={twMerge(`flex flex-col gap-4 ${className}`)} {...props}>
-      <a
-        className="flex items-center gap-2"
+      <Button
+        className="w-fit"
         href={`mailto:?subject=Karte&body=${window?.location.href}`}
       >
-        <Button>
-          <Email />
-          <span>Email senden</span>
-        </Button>
-      </a>
+        <Email />
+        <span>Email senden</span>
+      </Button>
       <CanvasSaveButton map={map}>
         <Button className={"w-fit"}>
           <Image />
           <span>Bild speichern</span>
         </Button>
       </CanvasSaveButton>
-      <RvfPermalink />
+      <PermalinkInput />
     </div>
   );
 }
 
-export default RvfShare;
+export default ShareMenu;

package/src/ShareMenu/index.tsx

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

package/src/{RvfShareMenuButton/RvfShareMenuButton.tsx → ShareMenuButton/ShareMenuButton.tsx}

@@ -3,15 +3,15 @@ import { useCallback } from "preact/hooks";
 
 import Share from "../icons/Share";
 import IconButton from "../ui/IconButton";
-import useRvfContext from "../utils/hooks/useRvfContext";
+import useMapContext from "../utils/hooks/useMapContext";
 
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RvfShareMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+export type RvfShareMenuButtonProps = HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
-function RvfShareMenuButton({ ...props }: RvfShareMenuButtonProps) {
-  const { isShareMenuOpen, setIsShareMenuOpen } = useRvfContext();
+function ShareMenuButton({ ...props }: RvfShareMenuButtonProps) {
+  const { isShareMenuOpen, setIsShareMenuOpen } = useMapContext();
 
   const onClick = useCallback(() => {
     setIsShareMenuOpen(!isShareMenuOpen);
@@ -24,4 +24,4 @@ function RvfShareMenuButton({ ...props }: RvfShareMenuButtonProps) {
   );
 }
 
-export default memo(RvfShareMenuButton);
+export default memo(ShareMenuButton);

package/src/ShareMenuButton/index.tsx

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

package/src/SingleClickListener/SingleClickListener.tsx

@@ -1,130 +1,65 @@
+import debounce from "lodash.debounce";
+import { getFeatureInfoAtCoordinate } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
 import { useCallback, useEffect } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { Feature, MapBrowserEvent } from "ol";
+import type { DebounceSettings } from "lodash";
+import type { MapBrowserEvent } from "ol";
+import type { EventsKey } from "ol/events";
 
-function SingleClickListener() {
-  const {
-    map,
-    // queryablelayers,
-    realtimeLayer,
-    setSelectedFeature,
-    setSelectedFeatures,
-    setStationId,
-    setTrainId,
-    stationId,
-    stationsLayer,
-    tenant,
-    trainId,
-  } = useMapContext();
-
-  const onPointerMove = useCallback(
-    (evt: MapBrowserEvent<PointerEvent>) => {
-      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
-        hitTolerance: 5,
-        layerFilter: (l) => {
-          return l === realtimeLayer;
-        },
-      });
-      realtimeLayer?.highlight(realtimeFeature as Feature);
+export interface SingleClickListenerProps {
+  debounceOptions?: DebounceSettings;
+  debounceTimeout?: number;
+  hover?: boolean;
+}
 
-      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l === stationsLayer;
-        },
+function SingleClickListener({
+  debounceOptions,
+  debounceTimeout = 0,
+  hover = true,
+}: SingleClickListenerProps) {
+  const { map, queryablelayers, setFeaturesInfos, setFeaturesInfosHovered } =
+    useMapContext();
+
+  const getFeaturesInfosAtEvt = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const queryableLayers = evt.map.getAllLayers().filter((l) => {
+        return queryablelayers.split(",").includes(l.get("name"));
       });
+      const featuresInfos = await getFeatureInfoAtCoordinate(
+        evt.coordinate,
+        queryableLayers,
+        5,
+        true,
+      );
+      return featuresInfos;
+    },
+    [queryablelayers],
+  );
 
-      const [stationFeature] = stationsFeatures.filter((feat) => {
-        return feat.get("tralis_network")?.includes(tenant);
+  const onPointerMove = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const featureInfos = await getFeaturesInfosAtEvt(evt);
+      setFeaturesInfosHovered(featureInfos);
+      const features = featureInfos.flatMap((featureInfo) => {
+        return featureInfo.features;
       });
 
-      // 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 || features?.length
-          ? "pointer"
-          : "default";
+      evt.map.getTargetElement().style.cursor = features?.length
+        ? "pointer"
+        : "default";
     },
-    [realtimeLayer, stationsLayer, tenant],
+    [getFeaturesInfosAtEvt, setFeaturesInfosHovered],
   );
 
   const onSingleClick = useCallback(
-    (evt: MapBrowserEvent<PointerEvent>) => {
-      // const qeryableLayers = queryablelayers?.split(",");
-      // const featuress = evt.map.getFeaturesAtPixel(evt.pixel, {
-      //   layerFilter: (l) => {
-      //     return qeryableLayers
-      //       ? queryablelayers.includes(l.get("name"))
-      //       : true;
-      //   },
-      // });
-      // console.log("featursss", featuress);
-
-      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
-        hitTolerance: 5,
-        layerFilter: (l) => {
-          return l === realtimeLayer;
-        },
-      });
-
-      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l === stationsLayer;
-        },
-      });
-      const [stationFeature] = stationsFeatures.filter((feat) => {
-        return feat.get("tralis_network")?.includes(tenant);
-      });
-
-      const newStationId = stationFeature?.get("uid");
-
-      const newTrainId = realtimeFeature?.get("train_id");
-
-      if (newStationId && stationId !== newStationId) {
-        setStationId(newStationId);
-        setTrainId(null);
-      } else if (newTrainId && newTrainId !== trainId) {
-        setTrainId(realtimeFeature.get("train_id"));
-        setStationId(null);
-      } else {
-        setTrainId(null);
-        setStationId(null);
-      }
-
-      // Send all the features under the cursor
-      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l.get("isQueryable");
-        },
-      }) as Feature[];
-
-      if (newStationId || newTrainId || !features.length) {
-        setSelectedFeature(null);
-        setSelectedFeatures([]);
-      } else {
-        setSelectedFeatures(features);
-        setSelectedFeature(features[0]);
-      }
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const featuresInfos = await getFeaturesInfosAtEvt(evt);
+      setFeaturesInfos(featuresInfos);
     },
-    [
-      // queryablelayers,
-      stationId,
-      trainId,
-      realtimeLayer,
-      stationsLayer,
-      tenant,
-      setStationId,
-      setTrainId,
-      setSelectedFeature,
-      setSelectedFeatures,
-    ],
+    [getFeaturesInfosAtEvt, setFeaturesInfos],
   );
 
   useEffect(() => {
@@ -135,11 +70,18 @@ function SingleClickListener() {
   }, [map, onSingleClick]);
 
   useEffect(() => {
-    const key = map?.on("pointermove", onPointerMove);
+    let key: EventsKey;
+    if (hover) {
+      let debounced = onPointerMove;
+      if (debounceTimeout) {
+        debounced = debounce(onPointerMove, debounceTimeout, debounceOptions);
+      }
+      key = map?.on("pointermove", debounced);
+    }
     return () => {
       unByKey(key);
     };
-  }, [map, onPointerMove]);
+  }, [debounceOptions, debounceTimeout, hover, map, onPointerMove]);
 
   return null;
 }

package/src/SingleClickListener/index.tsx

@@ -1 +1 @@
-export { default } from "../RvfSingleClickListener";
+export { default } from "./SingleClickListener";