@geops/rvf-mobility-web-component 0.1.46 → 0.1.47

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -1,66 +1,42 @@
-import {
-  MaplibreLayer,
-  MaplibreStyleLayer,
-  RealtimeLayer as MbtRealtimeLayer,
-} from "mobility-toolbox-js/ol";
-import { MocoLayerOptions } from "mobility-toolbox-js/ol/layers/MocoLayer";
-import {
-  MocoNotification,
-  RealtimeStation,
-  RealtimeStationId,
-  RealtimeStopSequence,
-  RealtimeTrainId,
-} from "mobility-toolbox-js/types";
-import { Feature, Map as OlMap } from "ol";
-import { Group } from "ol/layer";
 import { memo } from "preact/compat";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { LiaMapSolid } from "react-icons/lia";
+import { twMerge } from "tailwind-merge";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
 import GeolocationButton from "../GeolocationButton";
 import Map from "../Map";
-import { MobilityMapProps } from "../MobilityMap/MobilityMap";
+import MapDispatchEvents from "../MapDispatchEvents";
+import MobilityMapAttributes from "../MobilityMap/MobilityMapAttributes";
 import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
 import RealtimeLayer from "../RealtimeLayer";
-import RouteSchedule from "../RouteSchedule";
 import RvfEmbedNavigation from "../RvfEmbedNavigation/RvfEmbedNavigation";
-import RvfExportMenu from "../RvfExportMenu";
 import RvfExportMenuButton from "../RvfExportMenuButton";
-import RvfFeatureDetails from "../RvfFeatureDetails";
-import RvfFloatingMenu from "../RvfFloatingMenu";
+// 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 Modal from "../RvfModal";
-import RvfOverlayHeader from "../RvfOverlayHeader";
+import RvfOverlayContent from "../RvfOverlayContent/RvfOverlayContent";
+// import Modal from "../RvfModal";
 import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSearchButton from "../RvfSearchButton";
 import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
 import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
-import RvfShare from "../RvfShare";
 import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
 import RvfShareMenuButton from "../RvfShareMenuButton";
 import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
-import Topics from "../RvfTopics";
 import RvfZoomButtons from "../RvfZoomButtons";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
 import SingleClickListener from "../SingleClickListener";
-import Station from "../Station";
 import StationsLayer from "../StationsLayer";
-// @ts-expect-error bad type definition
-import tailwind from "../style.css";
-import { RVF_EXTENT_3857, RVF_LAYERS_TITLES } from "../utils/constants";
+import IconButton from "../ui/IconButton";
+import { RVF_LAYERS_TITLES } from "../utils/constants";
 import fullTrajectoryStyle from "../utils/fullTrajectoryStyle";
 import getBgColor from "../utils/getBgColor";
-import getFeatureInformationTitle from "../utils/getFeatureInformationTitle";
 import { getRadius } from "../utils/getRadius";
 import getTextColor from "../utils/getTextColor";
 import { I18nContext } from "../utils/hooks/useI18n";
@@ -69,11 +45,31 @@ import { MapContext } from "../utils/hooks/useMapContext";
 import { RvfContext } from "../utils/hooks/useRvfContext";
 import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
 import i18n from "../utils/i18n";
-import MobilityEvent from "../utils/MobilityEvent";
 import realtimeRVFStyle from "../utils/realtimeRVFStyle";
+import WindowMessageListener from "../WindowMessageListener";
+
+// @ts-expect-error bad type definition
+import tailwind from "../style.css";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
+import type {
+  MaplibreLayer,
+  MaplibreStyleLayer,
+  RealtimeLayer as MbtRealtimeLayer,
+} from "mobility-toolbox-js/ol";
+import type {
+  RealtimeStation,
+  RealtimeStationId,
+  RealtimeStopSequence,
+  RealtimeTrainId,
+  SituationType,
+} from "mobility-toolbox-js/types";
+import type { Feature, Map as OlMap } from "ol";
+import type { Group } from "ol/layer";
+
+import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
+
 const PRIORITY_FROM_TYPE = {
   bus: 25,
   coach: 15,
@@ -87,14 +83,14 @@ export type RvfMobilityMapProps = {
   layers: string; // list of visible layers on load
   layertree: string;
   print: string;
+  queryablelayers: string;
   share: string;
   toolbar: string;
 } & MobilityMapProps;
 
-const bbox = RVF_EXTENT_3857.join(",");
-
 const baseLayerProps = {
   mapLibreOptions: {
+    // For printing purpose
     maxCanvasSize: [20000, 20000] as [number, number], // remove 4096 limitations
     preserveDrawingBuffer: true,
   },
@@ -103,16 +99,14 @@ const baseLayerProps = {
 const styleProps = {
   //fontSize: 16
 };
+
 const scrollableHandlerProps = {
   style: { width: "calc(100% - 60px)" },
 };
-const realtimeLayerProps = {
-  bboxParameters: {
-    line_tags: "RVF",
-  },
 
+const realtimeLayerProps = {
   fullTrajectoryStyle: fullTrajectoryStyle,
-  getMotsByZoom: (z) => {
+  getMotsByZoom: (z: number) => {
     if (z < 9) {
       return ["rail"];
     }
@@ -152,39 +146,7 @@ const realtimeLayerProps = {
   },
 };
 
-function RvfMobilityMap({
-  apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
-  // baselayer = "review-geops-tgma-085vyz.de.rvf",
-  baselayer = "de.rvf_moco",
-  center = null,
-  details = "true",
-  embed = "false",
-  extent = bbox,
-  geolocation = "true",
-  layers = null,
-  layertree = "true",
-  // mapsurl = "https://style-review.geops.io",
-  // mapsurl = "https://maps.style-dev.geops.io",
-  mapsurl = "https://maps.geops.io",
-  maxextent = bbox,
-  maxzoom = "20",
-  minzoom = null,
-  mots = null,
-  notification = "false",
-  notificationat = null, //"2025-09-10T00:00:00Z",
-  notificationbeforelayerid = null,
-  notificationurl = "https://moco.geops.io/api/v1/",
-  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",
-  zoom = null,
-}: RvfMobilityMapProps) {
+function RvfMobilityMap(props: RvfMobilityMapProps) {
   const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
@@ -201,6 +163,7 @@ function RvfMobilityMap({
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
   const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
+  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
   const [sellingPointsLayer, setSellingPointsLayer] =
     useState<MaplibreStyleLayer>();
   const [tarifZonenLayer, setTarifZonenLayer] = useState<MaplibreStyleLayer>();
@@ -210,8 +173,26 @@ function RvfMobilityMap({
   const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
     useState<Group>();
 
-  const [previewNotification, setPreviewNotification] =
-    useState<MocoNotification[]>();
+  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(() => {
@@ -227,8 +208,8 @@ function RvfMobilityMap({
   }, [realtime]);
 
   const hasNotification = useMemo(() => {
-    return notification === "true" || !!previewNotification;
-  }, [notification, previewNotification]);
+    return notification === "true" || !!previewNotifications;
+  }, [notification, previewNotifications]);
 
   const hasGeolocation = useMemo(() => {
     return geolocation === "true";
@@ -263,35 +244,21 @@ function RvfMobilityMap({
 
   const mapContextValue = useMemo(() => {
     return {
-      // MobilityMapProps && MapContextProps
-      apikey,
-      baselayer,
+      // MobilityMapProps
+      ...props,
+      // MapContextProps
       baseLayer,
-      center,
-      extent,
       geolocation,
       isFollowing,
       isTracking,
-      layers,
       map,
-      mapsurl,
-      maxextent,
-      maxzoom,
-      minzoom,
-      mots,
-      notification,
-      notificationat,
-      notificationbeforelayerid,
-      notificationurl,
-      permalink,
-      previewNotification,
+      previewNotifications,
       realtimeLayer,
-      realtimeurl,
       setBaseLayer,
       setIsFollowing,
       setIsTracking,
       setMap,
-      setPreviewNotification,
+      setPreviewNotifications,
       setRealtimeLayer,
       setStation,
       setStationId,
@@ -302,117 +269,40 @@ function RvfMobilityMap({
       stationId,
       stationsLayer,
       stopSequence,
-      stopsurl,
-      tenant,
       trainId,
-      zoom,
     };
   }, [
-    apikey,
-    baselayer,
+    props,
     baseLayer,
-    center,
-    extent,
     geolocation,
     isFollowing,
     isTracking,
-    layers,
     map,
-    mapsurl,
-    maxextent,
-    maxzoom,
-    minzoom,
-    mots,
-    notification,
-    notificationat,
-    notificationbeforelayerid,
-    notificationurl,
-    permalink,
-    previewNotification,
+    previewNotifications,
     realtimeLayer,
-    realtimeurl,
     station,
     stationId,
     stationsLayer,
     stopSequence,
-    stopsurl,
-    tenant,
     trainId,
-    zoom,
-  ]);
-
-  useEffect(() => {
-    eventNodeRef.current?.dispatchEvent(
-      new MobilityEvent<RvfMobilityMapProps>("mwc:attribute", {
-        baselayer,
-        center,
-        details,
-        embed,
-        extent,
-        geolocation,
-        layers,
-        layertree,
-        mapsurl,
-        maxextent,
-        maxzoom,
-        minzoom,
-        mots,
-        notification,
-        notificationat,
-        notificationbeforelayerid,
-        notificationurl,
-        print,
-        realtime,
-        realtimeurl,
-        search,
-        share,
-        tenant,
-        toolbar,
-        zoom,
-      }),
-    );
-  }, [
-    baselayer,
-    embed,
-    layers,
-    center,
-    geolocation,
-    layertree,
-    toolbar,
-    mapsurl,
-    maxzoom,
-    minzoom,
-    mots,
-    notification,
-    notificationat,
-    notificationurl,
-    notificationbeforelayerid,
-    realtime,
-    realtimeurl,
-    search,
-    tenant,
-    zoom,
-    extent,
-    maxextent,
-    print,
-    share,
-    details,
   ]);
 
   const rvfContextValue = useMemo(() => {
     return {
       isExportMenuOpen,
       isLayerTreeOpen,
+      isSearchOpen,
       isShareMenuOpen,
       layertree,
       lineNetworkPlanLayer,
       poisLayer,
-      previewNotification,
+      previewNotifications,
       selectedFeature,
       selectedFeatures,
       sellingPointsLayer,
       setIsExportMenuOpen,
       setIsLayerTreeOpen,
+      setIsSearchOpen,
       setIsShareMenuOpen,
       setLineNetworkPlanLayer,
       setPoisLayer,
@@ -427,11 +317,12 @@ function RvfMobilityMap({
   }, [
     isExportMenuOpen,
     isLayerTreeOpen,
+    isSearchOpen,
     isShareMenuOpen,
     layertree,
     lineNetworkPlanLayer,
     poisLayer,
-    previewNotification,
+    previewNotifications,
     selectedFeature,
     selectedFeatures,
     sellingPointsLayer,
@@ -439,13 +330,13 @@ function RvfMobilityMap({
     tarifZonenLayer,
   ]);
 
-  const onLayerTreeMenuClick = useCallback(() => {
-    setIsLayerTreeOpen(!isLayerTreeOpen);
-  }, [isLayerTreeOpen]);
+  // const onLayerTreeMenuClick = useCallback(() => {
+  //   setIsLayerTreeOpen(!isLayerTreeOpen);
+  // }, [isLayerTreeOpen]);
 
-  const onExportMenuClose = useCallback(() => {
-    setIsExportMenuOpen(false);
-  }, []);
+  // const onExportMenuClose = useCallback(() => {
+  //   setIsExportMenuOpen(false);
+  // }, []);
 
   const copyrightOptions = useMemo(() => {
     return {
@@ -478,89 +369,108 @@ function RvfMobilityMap({
     };
   }, []);
 
-  const notificationsLayerProps: MocoLayerOptions = useMemo(() => {
-    return {
-      // beforeId: notificationbeforelayerid,
-      apiKey: apikey,
-      date: notificationat ? new Date(notificationat) : undefined,
-      isQueryable: true,
-      notifications: previewNotification,
-      tenant: "rvf",
-      title: RVF_LAYERS_TITLES.meldungen,
-      url: notificationurl,
-    };
-  }, [apikey, notificationat, notificationurl, previewNotification]);
+  useEffect(() => {
+    if (isSearchOpen) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setIsShareMenuOpen(false);
+      setStationId(null);
+      setTrainId(null);
+      setSelectedFeature(null);
+    }
+  }, [isSearchOpen]);
 
   useEffect(() => {
-    if (hasToolbar && isLayerTreeOpen) {
+    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, hasToolbar]);
+  }, [isLayerTreeOpen]);
 
   useEffect(() => {
-    if (hasToolbar && isExportMenuOpen) {
+    if (isExportMenuOpen) {
       setIsLayerTreeOpen(false);
       setIsExportMenuOpen(isExportMenuOpen);
+      setIsSearchOpen(false);
       setSelectedFeature(null);
       setTrainId(null);
       setIsShareMenuOpen(false);
       setStationId(null);
     }
-  }, [isExportMenuOpen, hasToolbar]);
+  }, [isExportMenuOpen]);
 
   useEffect(() => {
-    if (hasToolbar && selectedFeature) {
+    if (selectedFeature) {
       setIsLayerTreeOpen(false);
+      setIsSearchOpen(false);
       setIsExportMenuOpen(false);
       setTrainId(null);
       setIsShareMenuOpen(false);
       setStationId(null);
     }
-  }, [selectedFeature, hasToolbar]);
+  }, [selectedFeature]);
 
   useEffect(() => {
-    if (hasToolbar && stationId) {
+    if (stationId) {
       setIsLayerTreeOpen(false);
       setIsExportMenuOpen(false);
+      setIsSearchOpen(false);
       setTrainId(null);
       setIsShareMenuOpen(false);
       setSelectedFeature(null);
     }
-  }, [stationId, hasToolbar]);
+  }, [stationId]);
 
   useEffect(() => {
-    if (hasToolbar && trainId) {
+    if (trainId) {
       setIsLayerTreeOpen(false);
       setIsExportMenuOpen(false);
+      setIsSearchOpen(false);
       setStationId(null);
       setIsShareMenuOpen(false);
       setSelectedFeature(null);
     }
-  }, [trainId, hasToolbar]);
-
-  useEffect(() => {
-    if (hasToolbar && isShareMenuOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setStationId(null);
-      setTrainId(null);
-      setSelectedFeature(null);
-    }
-  }, [isShareMenuOpen, hasToolbar]);
-
-  useEffect(() => {
-    window.addEventListener("message", (event) => {
-      console.log("Received message from parent:", event.data);
-      if (event.data.notification) {
-        setPreviewNotification([event.data.notification]);
-      }
-    });
-  }, []);
+  }, [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}>
@@ -568,19 +478,24 @@ function RvfMobilityMap({
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
         <RvfContext.Provider value={rvfContextValue}>
+          <MapDispatchEvents node={eventNodeRef.current} wcAttributes={props} />
+          <WindowMessageListener eventNode={eventNodeRef.current} />
           <div
-            className="relative size-full overflow-hidden font-sans  @container/main"
+            className="@container/main relative size-full overflow-hidden font-sans"
             ref={eventNodeRef}
             style={styleProps}
           >
             <div className="relative flex size-full flex-col text-base @lg/main:flex-row-reverse">
-              <Map className="relative flex-1 overflow-visible ">
+              <Map className="relative flex-1 overflow-visible">
                 <BaseLayer {...baseLayerProps} />
-                <SingleClickListener />
+                <SingleClickListener eventNode={eventNodeRef.current} />
                 {isEmbed && <RvfEmbedNavigation />}
 
                 {hasNotification && (
-                  <NotificationLayer {...notificationsLayerProps} />
+                  <NotificationLayer
+                    isQueryable={true}
+                    title={RVF_LAYERS_TITLES.meldungen}
+                  />
                 )}
 
                 <RvfSelectedFeatureHighlightLayer />
@@ -611,6 +526,19 @@ function RvfMobilityMap({
                   title={RVF_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>
+                )}
                 <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
@@ -619,22 +547,16 @@ function RvfMobilityMap({
                   />
                 </div>
 
-                <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
-                  {hasGeolocation && <GeolocationButton />}
-                  {!hasToolbar && hasPrint && <RvfExportMenuButton />}
+                <div className="absolute top-2 right-2 z-10 flex">
+                  {hasGeolocation && (
+                    <GeolocationButton title={"Geolokalisierung"} />
+                  )}
                 </div>
 
-                {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>
-                )}
-
-                <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
+                <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
                   <RvfZoomButtons />
-                </div>
 
-                {!hasToolbar && hasLayerTree && (
+                  {/* {!hasToolbar && hasLayerTree && (
                   <RvfFloatingMenu
                     isOpen={isLayerTreeOpen}
                     onClick={onLayerTreeMenuClick}
@@ -642,86 +564,108 @@ function RvfMobilityMap({
                   >
                     <Topics className={"w-full px-2"} />
                   </RvfFloatingMenu>
-                )}
+                )} */}
+                </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">
+                >
+                  <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",
+                      "*:size-[38px] *:rounded-none *:border-none *:@sm/main:size-[42px] *:@md/main:!size-[46px]",
+                      "*:first:!rounded-l-2xl",
+                      "*:last:!rounded-r-2xl",
+                      isSearchOpen
+                        ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
+                        : "",
+                    )}
+                  >
+                    {!hasToolbar && hasPrint && (
+                      <RvfExportMenuButton title={"Drucken"} />
+                    )}
+                    {!hasToolbar && hasShare && (
+                      <RvfShareMenuButton title={"Share"} />
+                    )}
+                    {!hasToolbar && hasLayerTree && (
+                      <RvfLayerTreeButton title={"Layers"} />
+                    )}
+                    {!hasToolbar && hasSearch && (
+                      <RvfSearchButton title={"Suche"} />
+                    )}
+                  </div>
+                </div>
+
+                <div
+                  className={twMerge(
+                    "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
+                    isOverlayDisplayed ? "@lg:min-w-60" : "p-0",
+                  )}
+                  style={{ containerType: "normal" }}
+                >
+                  <Overlay
+                    className={
+                      "border-grey @container/overlay pointer-events-auto relative hidden flex-col overflow-hidden rounded-2xl border bg-white text-base shadow-lg @lg:flex"
+                    }
+                    ScrollableHandlerProps={scrollableHandlerProps}
+                  >
+                    <RvfOverlayContent
+                      hasDetails={hasDetails}
+                      hasLayerTree={hasLayerTree}
+                      hasPrint={hasPrint}
+                      hasRealtime={hasRealtime}
+                      hasSearch={false}
+                      hasShare={hasShare}
+                    />
+                  </Overlay>
+                </div>
+              </div>
+
+              {/* Mobile */}
               <Overlay
-                className={"z-50 bg-white"}
+                className={
+                  isOverlayDisplayed
+                    ? "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}
               >
-                {hasRealtime && trainId && (
-                  <>
-                    <RvfOverlayHeader
-                      onClose={() => {
-                        setTrainId(null);
-                      }}
-                      title={RVF_LAYERS_TITLES.echtzeit}
-                    ></RvfOverlayHeader>
-                    <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
-                  </>
-                )}
-                {tenant && stationId && (
-                  <>
-                    <RvfOverlayHeader
-                      onClose={() => {
-                        setStationId(null);
-                      }}
-                      title="Station"
-                    ></RvfOverlayHeader>
-                    <Station className="relative flex flex-col overflow-y-auto overflow-x-hidden  p-2" />
-                  </>
-                )}
-                {hasDetails &&
-                  selectedFeature &&
-                  !selectedFeature.get("severity") && (
-                    <>
-                      <RvfOverlayHeader
-                        onClose={() => {
-                          setSelectedFeature(null);
-                        }}
-                        title={getFeatureInformationTitle(selectedFeature)}
-                      ></RvfOverlayHeader>
-                      <RvfFeatureDetails className="relative flex h-full flex-col gap-4 overflow-y-auto overflow-x-hidden p-4" />
-                    </>
-                  )}
-                {hasToolbar && hasPrint && isExportMenuOpen && (
-                  <>
-                    <RvfOverlayHeader
-                      onClose={() => {
-                        setIsExportMenuOpen(false);
-                      }}
-                      title="Drucken"
-                    ></RvfOverlayHeader>
-                    <RvfExportMenu className="relative flex flex-col gap-8 overflow-y-auto overflow-x-hidden px-4 py-6" />
-                  </>
-                )}
-                {hasToolbar && hasLayerTree && isLayerTreeOpen && (
-                  <>
-                    <RvfOverlayHeader
-                      onClose={() => {
-                        setIsLayerTreeOpen(false);
-                      }}
-                      title="Layers"
-                    ></RvfOverlayHeader>
-                    <Topics className=" relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
-                  </>
-                )}
-                {hasToolbar && hasShare && isShareMenuOpen && (
-                  <>
-                    <RvfOverlayHeader
-                      onClose={() => {
-                        setIsShareMenuOpen(false);
-                      }}
-                      title="Share"
-                    ></RvfOverlayHeader>
-                    <RvfShare className="relative flex h-full flex-col gap-8 overflow-y-auto overflow-x-hidden px-4 py-6" />
-                  </>
-                )}
+                <RvfOverlayContent
+                  hasDetails={hasDetails}
+                  hasLayerTree={hasLayerTree}
+                  hasPrint={hasPrint}
+                  hasRealtime={hasRealtime}
+                  hasSearch={false}
+                  hasShare={hasShare}
+                />
               </Overlay>
 
               {hasToolbar && (
                 <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:border-t-0 @lg/main:p-0 "
+                    "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 && (
@@ -747,7 +691,8 @@ function RvfMobilityMap({
                 </div>
               )}
 
-              {!hasToolbar && hasPrint && isExportMenuOpen && (
+              {/* Modal display */}
+              {/* {!hasToolbar && hasPrint && isExportMenuOpen && (
                 <Modal onClose={onExportMenuClose}>
                   <RvfOverlayHeader
                     onClose={() => {
@@ -755,9 +700,57 @@ function RvfMobilityMap({
                     }}
                     title="Drucken"
                   ></RvfOverlayHeader>
-                  <RvfExportMenu className="relative flex flex-col gap-4 overflow-y-auto overflow-x-hidden px-4 py-6" />
+                  <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>
@@ -766,4 +759,15 @@ function RvfMobilityMap({
   );
 }
 
-export default memo(RvfMobilityMap);
+// We creates a wrapper to inject the default props values from MobilityMapAttributes.
+const defaultProps = {};
+
+Object.entries(MobilityMapAttributes).forEach(([key]) => {
+  defaultProps[key] = MobilityMapAttributes[key].defaultValue || null;
+});
+
+function MobilityMapWithDefaultProps(props: MobilityMapProps) {
+  return <RvfMobilityMap {...defaultProps} {...props} />;
+}
+
+export default memo(MobilityMapWithDefaultProps);