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

package/src/MobilityMap/MobilityMap.tsx

@@ -11,7 +11,7 @@ import {
 } from "mobility-toolbox-js/types";
 import { Map as OlMap } from "ol";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
@@ -84,6 +84,7 @@ function MobilityMap({
   tenant = null,
   zoom = "13",
 }: MobilityMapProps) {
+  const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
   const [isTracking, setIsTracking] = useState(false);
@@ -97,7 +98,7 @@ function MobilityMap({
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
-  const { x, y, z } = useUpdatePermalink(map, permalink === "true");
+  useUpdatePermalink(map, permalink === "true");
 
   const mapContextValue = useMemo(() => {
     return {
@@ -175,10 +176,10 @@ function MobilityMap({
   ]);
 
   useEffect(() => {
-    dispatchEvent(
+    eventNodeRef.current?.dispatchEvent(
       new MobilityEvent<MobilityMapProps>("mwc:attribute", {
         baselayer,
-        center: x && y ? `${x},${y}` : center,
+        center,
         extent,
         geolocation,
         mapsurl,
@@ -194,7 +195,7 @@ function MobilityMap({
         realtimeurl,
         search,
         tenant,
-        zoom: z || zoom,
+        zoom,
       }),
     );
   }, [
@@ -216,9 +217,6 @@ function MobilityMap({
     search,
     tenant,
     zoom,
-    x,
-    y,
-    z,
   ]);
 
   return (
@@ -226,7 +224,10 @@ function MobilityMap({
       <style>{tailwind}</style>
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
-        <div className="relative size-full border font-sans @container/main">
+        <div
+          className="relative size-full border font-sans @container/main"
+          ref={eventNodeRef}
+        >
           <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
             <Map className="relative flex-1 overflow-visible ">
               <BaseLayer />

package/src/MobilityMap/index.css

@@ -1,13 +0,0 @@
-::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: lightgray;
-  z-index: 5;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -16,7 +16,7 @@ import useMapContext from "../utils/hooks/useMapContext";
 
 const TRACKING_ZOOM = 16;
 
-export type RealtimeLayerProps = RealtimeLayerOptions;
+export type RealtimeLayerProps = RealtimeLayerOptions & Record<string, unknown>;
 
 function RealtimeLayer(props: RealtimeLayerProps) {
   const {

package/src/RvfButton/RvfButton.tsx

@@ -1,36 +1,43 @@
 import type { JSX, PreactDOMAttributes } from "preact";
 
-import { memo, SVGProps } from "preact/compat";
+import { memo, useMemo } from "preact/compat";
 
-export type RvfButtonProps = ButtonProps &
-  JSX.ButtonHTMLAttributes<HTMLButtonElement> &
+export type RvfButtonProps = {
+  selected?: boolean;
+  theme?: "primary" | "secondary";
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
-interface ButtonProps {
-  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
-  theme?: "primary" | "secondary";
-}
+const baseClasses =
+  "flex h-8 md:h-9 lg:h-10 px-5 py-1.75 max-h-button items-center justify-center rounded-full border";
+
+export const themes = {
+  primary: {
+    classes:
+      "border-red bg-red text-white disabled:bg-lightgrey disabled:border-lightgrey hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred",
+    selectedClasses: "bg-darkred border-darkred",
+  },
+  secondary: {
+    classes:
+      "border border-current bg-white text-grey hover:text-red disabled:text-lightgrey active:text-lightred",
+    selectedClasses: "text-red",
+  },
+};
 
 function RvfButton({
   children,
   className,
-  disabled,
-  Icon,
-  onClick,
-  theme,
+  selected = false,
+  theme = "secondary",
+  ...props
 }: RvfButtonProps) {
-  const baseClasses =
-    "flex h-8 w-8 md:h-9 md:w-9 lg:w-10 lg:h-10 p-1.75 max-w-button max-h-button items-center justify-center rounded-full border";
-  const themeClasses =
-    theme === "primary"
-      ? "border-red bg-red text-white"
-      : "border-grey bg-white text-grey";
-
-  const classes = `${baseClasses} ${themeClasses} ${className || ""}`;
+  const classes = useMemo(() => {
+    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+  }, [className, selected, theme]);
 
   return (
-    <button className={classes} disabled={disabled} onClick={onClick}>
-      {children || <Icon height={"100%"} width={"100%"} />}
+    <button className={classes} {...props}>
+      {children}
     </button>
   );
 }

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -0,0 +1,95 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, useId, useState } from "preact/compat";
+
+import Cancel from "../icons/Cancel";
+import RvfButton from "../RvfButton";
+import RvfIconButton from "../RvfIconButton";
+import exportPdf from "../utils/exportPdf";
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+const formats = ["A4", "A1", "A3", "A0"];
+
+function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
+  const { setIsExportMenuOpen } = useRvfContext();
+  const { map } = useMapContext();
+  const [useMaxExtent, setUseMaxExtent] = useState(false);
+  const [format, setFormat] = useState<string>(formats[0]);
+  const checkboxId = useId();
+  const selectId = useId();
+  const [isExporting, setIsExporting] = useState(false);
+  const [isExportingError, setIsExportingError] = useState(false);
+  return (
+    <div {...props}>
+      <div className={"flex h-full flex-col gap-2 p-2"}>
+        {/* <!-- Header --> */}
+        <div className={"flex flex-row items-center justify-between gap-2"}>
+          <h1>Export </h1>
+          <RvfIconButton
+            onClick={() => {
+              setIsExportMenuOpen(false);
+            }}
+          >
+            <Cancel />
+          </RvfIconButton>
+        </div>
+        {/* <!-- Content --> */}
+        <div className="flex flex-1 flex-col gap-2">
+          <div className={"flex gap-2"}>
+            <input
+              checked={useMaxExtent}
+              id={checkboxId}
+              onChange={() => {
+                setUseMaxExtent(!useMaxExtent);
+              }}
+              type="checkbox"
+            />
+            <label htmlFor={checkboxId}>Ganze Region exportieren</label>
+          </div>
+          <div className={"flex gap-2"}>
+            <label htmlFor={selectId}>Format:</label>
+            <select
+              className={"w-24"}
+              id={selectId}
+              onChange={(evt) => {
+                setFormat((evt.target as HTMLSelectElement).value);
+              }}
+              value={format}
+            >
+              {formats.map((format) => {
+                return <option key={format}>{format}</option>;
+              })}
+            </select>
+          </div>
+        </div>
+        {/* <!-- Footer --> */}
+        <div>
+          <RvfButton
+            disabled={isExporting}
+            onClick={async () => {
+              setIsExportingError(false);
+              setIsExporting(true);
+              const result = await exportPdf(map, { format }, { useMaxExtent });
+              setTimeout(() => {
+                setIsExporting(false);
+                setIsExportingError(!result);
+              }, 1000);
+            }}
+          >
+            {isExporting
+              ? "Exporting..."
+              : isExportingError
+                ? "Error"
+                : "Download"}
+          </RvfButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(RvfExportMenu);

package/src/RvfExportMenu/index.tsx

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

package/src/RvfExportMenuButton/RvfExportMenuButton.tsx

@@ -0,0 +1,27 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import Download from "../icons/Download";
+import RvfIconButton from "../RvfIconButton";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RvfExportMenuButton({ ...props }: RvfExportMenuButtonProps) {
+  const { isExportMenuOpen, setIsExportMenuOpen } = useRvfContext();
+
+  const onClick = useCallback(() => {
+    setIsExportMenuOpen(!isExportMenuOpen);
+  }, [isExportMenuOpen, setIsExportMenuOpen]);
+
+  return (
+    <RvfIconButton {...props} onClick={onClick} selected={isExportMenuOpen}>
+      <Download />
+    </RvfIconButton>
+  );
+}
+
+export default memo(RvfExportMenuButton);

package/src/RvfExportMenuButton/index.tsx

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

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -0,0 +1,29 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
+  const { selectedFeature } = useRvfContext();
+
+  return (
+    <div {...props}>
+      {Object.entries(selectedFeature.getProperties()).map(([key, value]) => {
+        return (
+          <div className="flex gap-2" key={key}>
+            <span>
+              <b>{key}:</b>
+            </span>
+            <div>{value}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default memo(RvfFeatureDetails);

package/src/RvfFeatureDetails/index.tsx

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

package/src/RvfIconButton/RvfIconButton.tsx

@@ -0,0 +1,35 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, SVGProps, useMemo } from "preact/compat";
+
+import { RvfButtonProps, themes } from "../RvfButton/RvfButton";
+
+export type RvfIconButtonProps = {
+  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes &
+  RvfButtonProps;
+
+const baseClasses =
+  "flex h-8 w-8 md:h-9 md:w-9 lg:w-10 lg:h-10 p-1.75 max-w-button max-h-button items-center justify-center rounded-full border";
+
+function RvfIconButton({
+  children,
+  className,
+  Icon,
+  selected = false,
+  theme = "secondary",
+  ...props
+}: RvfIconButtonProps) {
+  const classes = useMemo(() => {
+    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+  }, [className, selected, theme]);
+
+  return (
+    <button className={classes} {...props}>
+      {children || <Icon height={"100%"} width={"100%"} />}
+    </button>
+  );
+}
+
+export default memo(RvfIconButton);

package/src/RvfIconButton/index.tsx

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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -9,47 +9,57 @@ import {
   RealtimeStopSequence,
   RealtimeTrainId,
 } from "mobility-toolbox-js/types";
-import { Map as OlMap } from "ol";
-import { transformExtent } from "ol/proj";
+import { Feature, Map as OlMap } from "ol";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
 import GeolocationButton from "../GeolocationButton";
+import Cancel from "../icons/Cancel";
+import Menu from "../icons/Menu";
 import Map from "../Map";
 import { MobilityMapProps } from "../MobilityMap/MobilityMap";
 import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
 import RealtimeLayer from "../RealtimeLayer";
 import RouteSchedule from "../RouteSchedule";
-import RvfSharedMobilityLayer from "../RvfSharedMobilityLayer";
+import RvfExportMenu from "../RvfExportMenu";
+import RvfExportMenuButton from "../RvfExportMenuButton";
+import RvfFeatureDetails from "../RvfFeatureDetails";
+// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
+import RvfIconButton from "../RvfIconButton";
+import Modal from "../RvfModal";
+import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
 import RvfZoomButtons from "../RvfZoomButtons";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
-import SingleClickListener from "../SingleClickListener/SingleClickListener";
+import SingleClickListener from "../SingleClickListener";
 import Station from "../Station";
 import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
+import TopicMenu from "../TopicMenu";
+import { RVF_EXTENT_3857 } from "../utils/constants";
 import { I18nContext } from "../utils/hooks/useI18n";
 import { MapContext } from "../utils/hooks/useMapContext";
+import { RvfContext } from "../utils/hooks/useRvfContext";
 import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
 import i18n from "../utils/i18n";
 import MobilityEvent from "../utils/MobilityEvent";
 // @ts-expect-error bad type definition
 import style from "./index.css";
-// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
 
 export type RvfMobilityMapProps = {} & MobilityMapProps;
 
-const rvfExtent = [7.5, 47.7, 8.45, 48.4];
-const rvfExtentTransformed = transformExtent(
-  rvfExtent,
-  "EPSG:4326",
-  "EPSG:3857",
-);
-const bbox = rvfExtentTransformed.join(",");
+const bbox = RVF_EXTENT_3857.join(",");
+
+const baseLayerProps = {
+  mapLibreOptions: {
+    preserveDrawingBuffer: true,
+  },
+};
 
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
@@ -59,7 +69,7 @@ function RvfMobilityMap({
   geolocation = "true",
   mapsurl = "https://maps.geops.io",
   maxextent = bbox,
-  maxzoom = null,
+  maxzoom = "20",
   minzoom = null,
   mots = null,
   notification = "true",
@@ -74,6 +84,7 @@ function RvfMobilityMap({
   tenant = null,
   zoom = null,
 }: RvfMobilityMapProps) {
+  const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
   const [isTracking, setIsTracking] = useState(false);
@@ -84,10 +95,14 @@ function RvfMobilityMap({
   const [map, setMap] = useState<OlMap>();
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
+  const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
+  const [selectedFeature, setSelectedFeature] = useState<Feature>();
+  const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
+  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState(false);
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
-  const { x, y, z } = useUpdatePermalink(map, permalink === "true");
+  useUpdatePermalink(map, permalink === "true");
 
   const mapContextValue = useMemo(() => {
     return {
@@ -165,10 +180,10 @@ function RvfMobilityMap({
   ]);
 
   useEffect(() => {
-    dispatchEvent(
+    eventNodeRef.current?.dispatchEvent(
       new MobilityEvent<RvfMobilityMapProps>("mwc:attribute", {
         baselayer,
-        center: x && y ? `${x},${y}` : center,
+        center,
         extent,
         geolocation,
         mapsurl,
@@ -184,7 +199,7 @@ function RvfMobilityMap({
         realtimeurl,
         search,
         tenant,
-        zoom: z || zoom,
+        zoom,
       }),
     );
   }, [
@@ -204,85 +219,104 @@ function RvfMobilityMap({
     search,
     tenant,
     zoom,
-    x,
-    y,
-    z,
     extent,
     maxextent,
   ]);
 
+  const rvfContextValue = useMemo(() => {
+    return {
+      isExportMenuOpen,
+      selectedFeature,
+      selectedFeatures,
+      setIsExportMenuOpen,
+      setSelectedFeature,
+      setSelectedFeatures,
+    };
+  }, [isExportMenuOpen, selectedFeature, selectedFeatures]);
+
   return (
     <I18nContext.Provider value={i18n}>
       <style>{tailwind}</style>
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
-        <div className="relative size-full border font-sans @container/main">
-          <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
-            <Map className="relative flex-1 overflow-visible ">
-              <BaseLayer />
-              <SingleClickListener />
-              {realtime === "true" && <RealtimeLayer />}
-              {tenant && <StationsLayer />}
-              {notification === "true" && <NotificationLayer />}
-              <RvfSharedMobilityLayer
-                color="red"
-                name="MobiData-BW:sharing_stations_bicycle"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_bicycle/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="blue"
-                name="MobiData-BW:sharing_stations_cargo_bicycle"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_cargo_bicycle/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="green"
-                name="MobiData-BW:sharing_stations_car"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_car/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="orange"
-                name="MobiData-BW:sharing_stations_scooters_standing"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_scooters_standing/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="orange"
-                minZoom={14.999}
-                name="MobiData-BW:sharing_vehicles"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_vehicles/ows"
-              />
+        <RvfContext.Provider value={rvfContextValue}>
+          <div
+            className="relative size-full border font-sans @container/main"
+            ref={eventNodeRef}
+          >
+            <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
+              <Map className="relative flex-1 overflow-visible ">
+                <BaseLayer {...baseLayerProps} isNotInLayerTree />
+                <SingleClickListener />
+
+                {realtime === "true" && <RealtimeLayer title="Realtime data" />}
+                {tenant && <StationsLayer />}
+                {notification === "true" && <NotificationLayer />}
+                {/* <RvfLnpLayer />
+                <RvfVerkaufStellenLayer />
+                <RvfTarifZonenLayer /> */}
+                <RvfPoisLayer title="POIs" />
 
-              <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
-                <ScaleLine className="bg-slate-50/70" />
-                <Copyright className="bg-slate-50/70" />
-              </div>
-              <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
-                {geolocation === "true" && <GeolocationButton />}
-              </div>
-              {search === "true" && (
-                <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
-                  <Search />
+                <RvfSharedMobilityLayerGroup title="Shared Mobility" />
+
+                <div className="absolute left-2 top-2 z-10">
+                  <RvfIconButton
+                    onClick={() => {
+                      return setIsLayerTreeOpen(!isLayerTreeOpen);
+                    }}
+                    selected={isLayerTreeOpen}
+                  >
+                    {isLayerTreeOpen ? <Cancel /> : <Menu />}
+                  </RvfIconButton>
+                  {isLayerTreeOpen && <TopicMenu map={map} />}
                 </div>
-              )}
-              <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
-                <RvfZoomButtons />
-              </div>
-            </Map>
+                <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
+                  <ScaleLine className="bg-slate-50/70" />
+                  <Copyright className="bg-slate-50/70" />
+                </div>
+                <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
+                  {geolocation === "true" && <GeolocationButton />}
+                </div>
+                {search === "true" && (
+                  <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
+                    <Search />
+                  </div>
+                )}
+                <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
+                  <RvfExportMenuButton />
+                  <RvfZoomButtons />
+                </div>
+              </Map>
 
-            <Overlay
-              className={"z-50"}
-              ScrollableHandlerProps={{
-                style: { width: "calc(100% - 60px)" },
-              }}
-            >
-              {realtime === "true" && trainId && (
-                <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
-              )}
-              {tenant && stationId && (
-                <Station className="relative overflow-y-auto  overflow-x-hidden" />
+              <Overlay
+                className={"z-50"}
+                ScrollableHandlerProps={{
+                  style: { width: "calc(100% - 60px)" },
+                }}
+              >
+                {realtime === "true" && trainId && (
+                  <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+                )}
+                {tenant && stationId && (
+                  <Station className="relative overflow-y-auto  overflow-x-hidden" />
+                )}
+                {selectedFeature && (
+                  <RvfFeatureDetails className="relative overflow-y-auto  overflow-x-hidden" />
+                )}
+              </Overlay>
+
+              {isExportMenuOpen && (
+                <Modal
+                  onClose={() => {
+                    setIsExportMenuOpen(false);
+                  }}
+                >
+                  <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
+                </Modal>
               )}
-            </Overlay>
+            </div>
           </div>
-        </div>
+        </RvfContext.Provider>
       </MapContext.Provider>
     </I18nContext.Provider>
   );