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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -1,40 +1,37 @@
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { LiaMapSolid } from "react-icons/lia";
+import { useMemo, useRef, useState } from "preact/hooks";
 import { twMerge } from "tailwind-merge";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
+import EmbedNavigation from "../EmbedNavigation";
+import ExportMenuButton from "../ExportMenuButton";
+import FeaturesInfosListener from "../FeaturesInfosListener";
 import GeolocationButton from "../GeolocationButton";
+import LayerTreeButton from "../LayerTreeButton";
+import LayoutState from "../LayoutState";
+import LinesNetworkPlanLayer from "../LinesNetworkPlanLayer";
 import Map from "../Map";
 import MapDispatchEvents from "../MapDispatchEvents";
 import MobilityMapAttributes from "../MobilityMap/MobilityMapAttributes";
-import NotificationLayer from "../NotificationLayer";
+import NotificationsLayer from "../NotificationsLayer";
 import Overlay from "../Overlay";
+import OverlayContent from "../OverlayContent";
+import Permalink from "../Permalink";
 import RealtimeLayer from "../RealtimeLayer";
-import RvfEmbedNavigation from "../RvfEmbedNavigation/RvfEmbedNavigation";
-import RvfExportMenuButton from "../RvfExportMenuButton";
-// import RvfFloatingMenu from "../RvfFloatingMenu";
-// import RvfLayerTree from "../RvfLayerTree";
-import RvfLayerTreeButton from "../RvfLayerTreeButton";
-// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fpublication%2F%3Fsso_config%3Drvf&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
-import RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
-import RvfOverlayContent from "../RvfOverlayContent/RvfOverlayContent";
-// import Modal from "../RvfModal";
+import RvfMainLinkButton from "../RvfMainLinkButton";
 import RvfPoisLayer from "../RvfPoisLayer";
-import RvfSearchButton from "../RvfSearchButton";
 import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
 import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
 import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
-import RvfShareMenuButton from "../RvfShareMenuButton";
 import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
-import RvfZoomButtons from "../RvfZoomButtons";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
+import SearchButton from "../SearchButton";
+import ShareMenuButton from "../ShareMenuButton";
 import SingleClickListener from "../SingleClickListener";
 import StationsLayer from "../StationsLayer";
-import IconButton from "../ui/IconButton";
-import { RVF_LAYERS_TITLES } from "../utils/constants";
+import { LAYERS_TITLES } from "../utils/constants";
 import fullTrajectoryStyle from "../utils/fullTrajectoryStyle";
 import getBgColor from "../utils/getBgColor";
 import { getRadius } from "../utils/getRadius";
@@ -43,10 +40,10 @@ 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";
 import i18n from "../utils/i18n";
 import realtimeRVFStyle from "../utils/realtimeRVFStyle";
 import WindowMessageListener from "../WindowMessageListener";
+import ZoomButtons from "../ZoomButtons";
 
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
@@ -57,8 +54,10 @@ import type {
   MaplibreLayer,
   MaplibreStyleLayer,
   RealtimeLayer as MbtRealtimeLayer,
+  MocoLayer,
 } from "mobility-toolbox-js/ol";
 import type {
+  LayerGetFeatureInfoResponse,
   RealtimeStation,
   RealtimeStationId,
   RealtimeStopSequence,
@@ -149,117 +148,129 @@ const realtimeLayerProps = {
 function RvfMobilityMap(props: RvfMobilityMapProps) {
   const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
-  const [isFollowing, setIsFollowing] = useState(false);
-  const [isTracking, setIsTracking] = useState(false);
+  const [isFollowing, setIsFollowing] = useState<boolean>(false);
+  const [isTracking, setIsTracking] = useState<boolean>(false);
+  const [isEmbed, setIsEmbed] = useState<boolean>(false);
+  const [hasGeolocation, setHasGeolocation] = useState<boolean>(false);
+  const [hasLnp, setHasLnp] = useState<boolean>(false);
+  const [hasDetails, setHasDetails] = useState<boolean>(false);
+  const [hasNotification, setHasNotification] = useState<boolean>(false);
+  const [hasPermalink, setHasPermalink] = useState<boolean>(false);
+  const [hasPrint, setHasPrint] = useState<boolean>(false);
+  const [hasRealtime, setHasRealtime] = useState<boolean>(false);
+  const [hasSearch, setHasSearch] = useState<boolean>(false);
+  const [hasStations, setHasStations] = useState<boolean>(false);
+  const [hasToolbar, setHasToolbar] = useState<boolean>(false);
+  const [hasShare, setHasShare] = useState<boolean>(false);
+  const [hasLayerTree, setHasLayerTree] = useState<boolean>(false);
+  const [isOverlayOpen, setIsOverlayOpen] = useState<boolean>(false);
+  const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
+  const [isShareMenuOpen, setIsShareMenuOpen] = useState<boolean>(false);
+  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
+  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
   const [stopSequence, setStopSequence] = useState<RealtimeStopSequence>();
   const [stationsLayer, setStationsLayer] = useState<MaplibreStyleLayer>();
   const [station, setStation] = useState<RealtimeStation>();
   const [realtimeLayer, setRealtimeLayer] = useState<MbtRealtimeLayer>();
+  const [notificationsLayer, setNotificationsLayer] = useState<MocoLayer>();
+  const [linesNetworkPlanLayer, setLinesNetworkPlanLayer] =
+    useState<MaplibreStyleLayer>();
   const [map, setMap] = useState<OlMap>();
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
-  const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
-  const [isShareMenuOpen, setIsShareMenuOpen] = useState<boolean>(false);
+  const [featuresInfos, setFeaturesInfos] = useState<
+    LayerGetFeatureInfoResponse[]
+  >([]);
+  const [featuresInfosHovered, setFeaturesInfosHovered] = useState<
+    LayerGetFeatureInfoResponse[]
+  >([]);
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
-  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
-  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
+
+  const [permalinkUrlSearchParams, setPermalinkUrlSearchParams] =
+    useState<URLSearchParams>();
   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>();
 
   const [previewNotifications, setPreviewNotifications] =
     useState<SituationType[]>();
 
-  const {
-    details,
-    embed,
-    geolocation,
-    layers,
-    layertree,
-    mainlink,
-    mainlinktitle,
-    notification,
-    permalink,
-    print,
-    realtime,
-    search,
-    share,
-    tenant,
-    toolbar,
-  } = props;
-
-  // 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" || !!previewNotifications;
-  }, [notification, previewNotifications]);
-
-  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]);
-
-  const hasDetails = useMemo(() => {
-    return details === "true";
-  }, [details]);
-
-  const isEmbed = useMemo(() => {
-    return embed === "true";
-  }, [embed]);
+  const { layers, mainlink } = props;
 
   // 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
-  useUpdatePermalink(map, permalink === "true", eventNodeRef);
-
   const mapContextValue = useMemo(() => {
     return {
       // MobilityMapProps
       ...props,
       // MapContextProps
       baseLayer,
-      geolocation,
+      featuresInfos,
+      featuresInfosHovered,
+      hasDetails,
+      hasGeolocation,
+      hasLayerTree,
+      hasLnp,
+      hasNotification,
+      hasPermalink,
+      hasPrint,
+      hasRealtime,
+      hasSearch,
+      hasShare,
+      hasStations,
+      hasToolbar,
+      isEmbed,
+      isExportMenuOpen,
       isFollowing,
+      isLayerTreeOpen,
+      isOverlayOpen,
+      isSearchOpen,
+      isShareMenuOpen,
       isTracking,
+      linesNetworkPlanLayer,
       map,
+      notificationsLayer,
+      permalinkUrlSearchParams,
       previewNotifications,
       realtimeLayer,
+      selectedFeature,
+      selectedFeatures,
       setBaseLayer,
+      setFeaturesInfos,
+      setFeaturesInfosHovered,
+      setHasDetails,
+      setHasGeolocation,
+      setHasLayerTree,
+      setHasLnp,
+      setHasNotification,
+      setHasPermalink,
+      setHasPrint,
+      setHasRealtime,
+      setHasSearch,
+      setHasShare,
+      setHasStations,
+      setHasToolbar,
+      setIsEmbed,
+      setIsExportMenuOpen,
       setIsFollowing,
+      setIsLayerTreeOpen,
+      setIsOverlayOpen,
+      setIsSearchOpen,
+      setIsShareMenuOpen,
       setIsTracking,
+      setLinesNetworkPlanLayer,
       setMap,
+      setNotificationsLayer,
+      setPermalinkUrlSearchParams,
       setPreviewNotifications,
       setRealtimeLayer,
+      setSelectedFeature,
+      setSelectedFeatures,
       setStation,
       setStationId,
       setStationsLayer,
@@ -274,12 +285,36 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
   }, [
     props,
     baseLayer,
-    geolocation,
+    featuresInfos,
+    featuresInfosHovered,
+    hasDetails,
+    hasGeolocation,
+    hasLayerTree,
+    hasLnp,
+    hasNotification,
+    hasPermalink,
+    hasPrint,
+    hasRealtime,
+    hasSearch,
+    hasShare,
+    hasStations,
+    hasToolbar,
+    isEmbed,
+    isExportMenuOpen,
     isFollowing,
+    isLayerTreeOpen,
+    isOverlayOpen,
+    isSearchOpen,
+    isShareMenuOpen,
     isTracking,
+    linesNetworkPlanLayer,
     map,
+    notificationsLayer,
+    permalinkUrlSearchParams,
     previewNotifications,
     realtimeLayer,
+    selectedFeature,
+    selectedFeatures,
     station,
     stationId,
     stationsLayer,
@@ -289,25 +324,9 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
 
   const rvfContextValue = useMemo(() => {
     return {
-      isExportMenuOpen,
-      isLayerTreeOpen,
-      isSearchOpen,
-      isShareMenuOpen,
-      layertree,
-      lineNetworkPlanLayer,
       poisLayer,
-      previewNotifications,
-      selectedFeature,
-      selectedFeatures,
       sellingPointsLayer,
-      setIsExportMenuOpen,
-      setIsLayerTreeOpen,
-      setIsSearchOpen,
-      setIsShareMenuOpen,
-      setLineNetworkPlanLayer,
       setPoisLayer,
-      setSelectedFeature,
-      setSelectedFeatures,
       setSellingPointsLayer,
       setSharedMobilityLayerGroup,
       setTarifZonenLayer,
@@ -315,29 +334,12 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
       tarifZonenLayer,
     };
   }, [
-    isExportMenuOpen,
-    isLayerTreeOpen,
-    isSearchOpen,
-    isShareMenuOpen,
-    layertree,
-    lineNetworkPlanLayer,
     poisLayer,
-    previewNotifications,
-    selectedFeature,
-    selectedFeatures,
     sellingPointsLayer,
     sharedMobilityLayerGroup,
     tarifZonenLayer,
   ]);
 
-  // const onLayerTreeMenuClick = useCallback(() => {
-  //   setIsLayerTreeOpen(!isLayerTreeOpen);
-  // }, [isLayerTreeOpen]);
-
-  // const onExportMenuClose = useCallback(() => {
-  //   setIsExportMenuOpen(false);
-  // }, []);
-
   const copyrightOptions = useMemo(() => {
     return {
       format: (copyrights) => {
@@ -369,109 +371,6 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
     };
   }, []);
 
-  useEffect(() => {
-    if (isSearchOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsShareMenuOpen(false);
-      setStationId(null);
-      setTrainId(null);
-      setSelectedFeature(null);
-    }
-  }, [isSearchOpen]);
-
-  useEffect(() => {
-    if (isShareMenuOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsSearchOpen(false);
-      setStationId(null);
-      setTrainId(null);
-      setSelectedFeature(null);
-    }
-  }, [isShareMenuOpen]);
-
-  useEffect(() => {
-    if (isLayerTreeOpen) {
-      setIsExportMenuOpen(false);
-      setIsLayerTreeOpen(isLayerTreeOpen);
-      setIsSearchOpen(false);
-      setSelectedFeature(null);
-      setTrainId(null);
-      setStationId(null);
-      setIsShareMenuOpen(false);
-    }
-  }, [isLayerTreeOpen]);
-
-  useEffect(() => {
-    if (isExportMenuOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(isExportMenuOpen);
-      setIsSearchOpen(false);
-      setSelectedFeature(null);
-      setTrainId(null);
-      setIsShareMenuOpen(false);
-      setStationId(null);
-    }
-  }, [isExportMenuOpen]);
-
-  useEffect(() => {
-    if (selectedFeature) {
-      setIsLayerTreeOpen(false);
-      setIsSearchOpen(false);
-      setIsExportMenuOpen(false);
-      setTrainId(null);
-      setIsShareMenuOpen(false);
-      setStationId(null);
-    }
-  }, [selectedFeature]);
-
-  useEffect(() => {
-    if (stationId) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsSearchOpen(false);
-      setTrainId(null);
-      setIsShareMenuOpen(false);
-      setSelectedFeature(null);
-    }
-  }, [stationId]);
-
-  useEffect(() => {
-    if (trainId) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsSearchOpen(false);
-      setStationId(null);
-      setIsShareMenuOpen(false);
-      setSelectedFeature(null);
-    }
-  }, [trainId]);
-
-  const isOverlayDisplayed = useMemo(() => {
-    return (
-      (hasDetails && !!selectedFeature) ||
-      (hasPrint && isExportMenuOpen) ||
-      (hasLayerTree && isLayerTreeOpen) ||
-      (hasShare && isShareMenuOpen) ||
-      (hasRealtime && !!trainId) ||
-      (tenant && !!stationId)
-    );
-  }, [
-    hasDetails,
-    selectedFeature,
-    hasPrint,
-    isExportMenuOpen,
-    hasLayerTree,
-    isLayerTreeOpen,
-    hasShare,
-    isShareMenuOpen,
-    hasRealtime,
-    trainId,
-    tenant,
-    stationId,
-  ]);
-
   return (
     <I18nContext.Provider value={i18n}>
       {/* There is a bug in tailwindcss@4 , variables are not imported in the shadow dom
@@ -530,8 +429,13 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
         <RvfContext.Provider value={rvfContextValue}>
+          <LayoutState />
+          <Permalink replaceState={hasPermalink} />
           <MapDispatchEvents node={eventNodeRef.current} wcAttributes={props} />
           <WindowMessageListener eventNode={eventNodeRef.current} />
+          <SingleClickListener />
+          <FeaturesInfosListener />
+
           <div
             className="@container/main relative size-full overflow-hidden font-sans"
             ref={eventNodeRef}
@@ -540,57 +444,40 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
             <div className="relative flex size-full flex-col text-base @lg/main:flex-row-reverse">
               <Map className="relative flex-1 overflow-visible">
                 <BaseLayer {...baseLayerProps} />
-                <SingleClickListener eventNode={eventNodeRef.current} />
-                {isEmbed && <RvfEmbedNavigation />}
-
+                {isEmbed && <EmbedNavigation />}
                 {hasNotification && (
-                  <NotificationLayer
+                  <NotificationsLayer
                     isQueryable={true}
-                    title={RVF_LAYERS_TITLES.meldungen}
+                    title={LAYERS_TITLES.notifications}
                   />
                 )}
-
                 <RvfSelectedFeatureHighlightLayer />
-
                 {hasRealtime && (
                   <RealtimeLayer
-                    title={RVF_LAYERS_TITLES.echtzeit}
+                    title={LAYERS_TITLES.realtime}
                     {...realtimeLayerProps}
                   />
                 )}
-
                 <StationsLayer
                   minZoom={10}
-                  title={RVF_LAYERS_TITLES.haltestellen}
                   {...stationsLayerProps}
+                  title={LAYERS_TITLES.stations}
                 />
-                <RvfTarifZonenLayer title={RVF_LAYERS_TITLES.tarifzonen} />
-                <RvfSellingPointsLayer
-                  isQueryable={true}
-                  title={RVF_LAYERS_TITLES.verkaufsstellen}
-                />
-                <RvfLineNetworkPlanLayer
-                  isQueryable={true}
-                  title={RVF_LAYERS_TITLES.liniennetz}
-                />
-                <RvfPoisLayer title={RVF_LAYERS_TITLES.pois} />
+                <RvfTarifZonenLayer title={LAYERS_TITLES.tarifzonen} />
+                <RvfSellingPointsLayer title={LAYERS_TITLES.verkaufsstellen} />
+                {hasLnp && (
+                  <LinesNetworkPlanLayer
+                    title={LAYERS_TITLES.linesnetworkplan}
+                  />
+                )}
+                <RvfPoisLayer title={LAYERS_TITLES.pois} />
                 <RvfSharedMobilityLayerGroup
-                  title={RVF_LAYERS_TITLES.sharedMobility}
+                  title={LAYERS_TITLES.sharedMobility}
                 />
-
                 {mainlink && (
-                  <IconButton
-                    className={
-                      "absolute inset-x-2 bottom-8 z-10 rounded-xl border-3 border-white"
-                    }
-                    href={mainlink}
-                    target="_blank"
-                    theme="primary"
-                    title={mainlinktitle}
-                  >
-                    <LiaMapSolid />
-                  </IconButton>
+                  <RvfMainLinkButton className="absolute inset-x-2 bottom-8 z-10" />
                 )}
+
                 <div className="pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
                   <ScaleLine className="bg-slate-50/70" />
                   <Copyright
@@ -598,53 +485,44 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                     options={copyrightOptions}
                   />
                 </div>
-
                 <div className="absolute top-2 right-2 z-10 flex">
                   {hasGeolocation && (
                     <GeolocationButton title={"Geolokalisierung"} />
                   )}
                 </div>
-
                 <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
-                  <RvfZoomButtons />
-
-                  {/* {!hasToolbar && hasLayerTree && (
-                  <RvfFloatingMenu
-                    isOpen={isLayerTreeOpen}
-                    onClick={onLayerTreeMenuClick}
-                    title="Kartendaten"
-                  >
-                    <Topics className={"w-full px-2"} />
-                  </RvfFloatingMenu>
-                )} */}
+                  <ZoomButtons />
                 </div>
               </Map>
 
               <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2 *:pointer-events-auto">
-                <div
-                  className={
-                    "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
-                  }
-                  //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
-                >
+                {hasToolbar && (
                   <div
-                    className={twMerge(
-                      "absolute top-12 left-0 h-[40px] w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-43px)] @md:left-[calc(100%-47px)]",
-                      isSearchOpen ? "w-64 opacity-100" : "",
-                    )}
+                    className={
+                      "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
+                    }
+                    //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
                   >
-                    <Search
-                      className={
-                        "border-grey @container m-0 h-[40px] rounded-2xl border p-2 px-4 text-base @sm/main:h-[44px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl @md/main:h-[48px]"
-                      }
-                      inputClassName="h-6 text-base"
-                      inputContainerClassName="border-none"
-                      resultClassName="text-base  **:hover:cursor-pointer hover:text-red-500 p-2"
-                      resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-grey border-t-0 "
-                      withResultsClassName="text-base !rounded-b-none"
-                    />
-                  </div>
-                  {hasToolbar && (
+                    {hasSearch && (
+                      <div
+                        className={twMerge(
+                          "absolute top-12 left-0 h-[40px] w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-43px)] @md:left-[calc(100%-47px)]",
+                          isSearchOpen ? "w-64 opacity-100" : "",
+                        )}
+                      >
+                        <Search
+                          className={
+                            "border-grey @container m-0 h-[40px] rounded-2xl border p-2 px-4 text-base @sm/main:h-[44px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl @md/main:h-[48px]"
+                          }
+                          inputClassName="h-6 text-base"
+                          inputContainerClassName="border-none"
+                          resultClassName="text-base  **:hover:cursor-pointer hover:text-red-500 p-2"
+                          resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-grey border-t-0 "
+                          withResultsClassName="text-base !rounded-b-none"
+                        />
+                      </div>
+                    )}
+
                     <div
                       className={twMerge(
                         "border-grey relative flex gap-[1px] overflow-hidden rounded-2xl border",
@@ -656,18 +534,18 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                           : "",
                       )}
                     >
-                      {hasPrint && <RvfExportMenuButton title={"Drucken"} />}
-                      {hasShare && <RvfShareMenuButton title={"Share"} />}
-                      {hasLayerTree && <RvfLayerTreeButton title={"Layers"} />}
-                      {hasSearch && <RvfSearchButton title={"Suche"} />}
+                      {hasPrint && <ExportMenuButton title={"Drucken"} />}
+                      {hasShare && <ShareMenuButton title={"Share"} />}
+                      {hasLayerTree && <LayerTreeButton title={"Layers"} />}
+                      {hasSearch && <SearchButton title={"Suche"} />}
                     </div>
-                  )}
-                </div>
+                  </div>
+                )}
 
                 <div
                   className={twMerge(
                     "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
-                    isOverlayDisplayed ? "@lg:min-w-60" : "p-0",
+                    isOverlayOpen ? "@lg:min-w-60" : "p-0",
                   )}
                   style={{ containerType: "normal" }}
                 >
@@ -677,7 +555,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                     }
                     ScrollableHandlerProps={scrollableHandlerProps}
                   >
-                    <RvfOverlayContent
+                    <OverlayContent
                       hasDetails={hasDetails}
                       hasLayerTree={hasLayerTree}
                       hasPrint={hasPrint}
@@ -692,111 +570,21 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
               {/* Mobile */}
               <Overlay
                 className={
-                  isOverlayDisplayed
+                  isOverlayOpen
                     ? "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
                     : "@lg:hidden"
                 }
                 ScrollableHandlerProps={scrollableHandlerProps}
               >
-                <RvfOverlayContent
+                <OverlayContent
                   hasDetails={hasDetails}
                   hasLayerTree={hasLayerTree}
                   hasPrint={hasPrint}
                   hasRealtime={hasRealtime}
-                  hasSearch={false}
+                  hasSearch={false} // The search could be in the overlay but we decide to put it in the toolbar for better UX
                   hasShare={hasShare}
                 />
               </Overlay>
-
-              {/* {hasToolbar && (
-                <div
-                  className={
-                    "z-[100] flex justify-around overflow-x-hidden border-t bg-white p-1 *:border-none @lg/main:block @lg/main:border-t-0 @lg/main:border-r @lg/main:p-0"
-                  }
-                >
-                  {hasLayerTree && (
-                    <RvfLayerTreeButton
-                      className={"border-none"}
-                      title="Layers"
-                    />
-                  )}
-
-                  {hasPrint && (
-                    <RvfExportMenuButton
-                      className={"border-none"}
-                      title="Drucken"
-                    />
-                  )}
-
-                  {hasShare && (
-                    <RvfShareMenuButton
-                      className={"border-none"}
-                      title="Share"
-                    />
-                  )}
-                </div>
-              )} */}
-
-              {/* Modal display */}
-              {/* {!hasToolbar && hasPrint && isExportMenuOpen && (
-                <Modal onClose={onExportMenuClose}>
-                  <RvfOverlayHeader
-                    onClose={() => {
-                      setIsExportMenuOpen(false);
-                    }}
-                    title="Drucken"
-                  ></RvfOverlayHeader>
-                  <RvfExportMenu className="relative flex flex-col gap-4 overflow-x-hidden overflow-y-auto px-4 py-4" />
-                </Modal>
-              )}
-
-              {!hasToolbar && hasShare && isShareMenuOpen && (
-                <Modal
-                  onClose={() => {
-                    setIsShareMenuOpen(false);
-                  }}
-                >
-                  <RvfOverlayHeader
-                    onClose={() => {
-                      setIsShareMenuOpen(false);
-                    }}
-                    title="Share"
-                  ></RvfOverlayHeader>
-                  <RvfShare className="relative flex flex-col gap-4 overflow-x-hidden overflow-y-auto px-4 py-4" />
-                </Modal>
-              )}
-
-              {!hasToolbar && hasLayerTree && isLayerTreeOpen && (
-                <Modal
-                  onClose={() => {
-                    setIsLayerTreeOpen(false);
-                  }}
-                >
-                  <RvfOverlayHeader
-                    onClose={() => {
-                      setIsLayerTreeOpen(false);
-                    }}
-                    title="Layers"
-                  ></RvfOverlayHeader>
-                  <Topics className="overflow-x-hidden overflow-y-auto px-4" />
-                </Modal>
-              )}
-
-              {!hasToolbar && hasSearch && isSearchOpen && (
-                <Modal
-                  onClose={() => {
-                    setIsSearchOpen(false);
-                  }}
-                >
-                  <RvfOverlayHeader
-                    onClose={() => {
-                      setIsSearchOpen(false);
-                    }}
-                    title="Search"
-                  ></RvfOverlayHeader>
-                  <Search />
-                </Modal>
-              )} */}
             </div>
           </div>
         </RvfContext.Provider>