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

package/package.json

@@ -2,14 +2,14 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "jspdf": "^2.5.2",
     "maplibre-gl": "^4.7.1",
-    "mobility-toolbox-js": "3.1.0-beta.2",
+    "mobility-toolbox-js": "3.1.0",
     "ol": "^10.3.1",
     "preact": "^10.25.1",
     "preact-custom-element": "^4.3.0",

package/scripts/build.mjs

@@ -3,13 +3,14 @@ import * as esbuild from "esbuild";
 import { sassPlugin } from "esbuild-sass-plugin";
 
 await esbuild.build({
-  entryPoints: ["./src/index.js"],
   bundle: true,
-  minify: true,
+  entryPoints: ["./src/index.js"],
   external: ["mapbox-gl"],
   loader: {
     ".png": "dataurl",
+    ".svg": "dataurl",
   },
+  minify: true,
   outfile: "index.js",
   plugins: [sassPlugin({ type: "css-text" })],
   sourcemap: false,

package/scripts/dev.mjs

@@ -8,6 +8,7 @@ const ctx = await esbuild.context({
   external: ["mapbox-gl"],
   loader: {
     ".png": "dataurl",
+    ".svg": "dataurl",
   },
   outfile: "index.js",
   plugins: [sassPlugin({ type: "css-text" })],

package/src/BaseLayer/BaseLayer.tsx

@@ -1,34 +1,42 @@
 import { MaplibreLayer } from "mobility-toolbox-js/ol";
 import { MaplibreLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreLayer";
-import { Layer } from "ol/layer";
 import { memo } from "preact/compat";
-import { useEffect } from "preact/hooks";
+import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
-function BaseLayer(props: MaplibreLayerOptions) {
+export type BaseLayerProps = MaplibreLayerOptions;
+
+function BaseLayer(props: BaseLayerProps) {
   const { apikey, baselayer, map, mapsurl, setBaseLayer } = useMapContext();
-  useEffect(() => {
-    if (!map || !baselayer || !apikey) {
+
+  const layer = useMemo(() => {
+    if (!baselayer || !apikey) {
       return;
     }
-    const layer = new MaplibreLayer({
+    return new MaplibreLayer({
       apiKey: apikey,
       style: baselayer,
       url: mapsurl,
+      zIndex: 0,
       ...(props || {}),
     });
-    const baseLayer = layer as unknown as Layer;
+  }, [baselayer, apikey, props, mapsurl]);
 
-    // TODO: find why the setZIndex is not found
-    baseLayer.setZIndex(0);
-    map.addLayer(baseLayer);
+  useEffect(() => {
     setBaseLayer(layer);
+  }, [layer, setBaseLayer]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+    map.addLayer(layer);
 
     return () => {
-      map?.removeLayer(baseLayer);
+      map.removeLayer(layer);
     };
-  }, [map, baselayer, apikey, setBaseLayer, props, mapsurl]);
+  }, [map, layer]);
 
   return null;
 }

package/src/FloatingMenu/FloatingMenu.tsx

@@ -0,0 +1,42 @@
+import { useState } from "preact/hooks";
+
+import ArrowDown from "../icons/ArrowDown";
+import ArrowUp from "../icons/ArrowUp";
+import Topics from "../RvfTopics";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function FloatingMenu() {
+  const { map } = useMapContext();
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  if (!map) {
+    return null;
+  }
+
+  return (
+    <div className="pointer-events-none absolute bottom-8 left-2 top-2 z-10 flex flex-col overflow-hidden rounded-lg">
+      <div
+        className="pointer-events-auto max-h-full rounded-lg border bg-white shadow-lg medium:w-largeMenu large:w-mediumMenu"
+
+        // className="flex-column absolute left-2 top-2 z-10 max-h-80 rounded-lg bg-white px-2 py-1.5 shadow-lg medium:w-largeMenu large:w-mediumMenu"
+      >
+        <button
+          className="flex w-full items-center justify-between px-2 py-1.5 "
+          onClick={() => {
+            return setIsCollapsed(!isCollapsed);
+          }}
+        >
+          <span>Kartendaten</span>
+          {isCollapsed ? <ArrowDown /> : <ArrowUp />}
+        </button>
+        {!isCollapsed && (
+          <div className="flex h-[calc(100%-39px)] w-full flex-1 overflow-y-auto">
+            <Topics />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FloatingMenu;

package/src/FloatingMenu/index.tsx

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

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -50,6 +50,7 @@ function RealtimeLayer(props: RealtimeLayerProps) {
         : undefined,
       tenant,
       url: realtimeurl,
+      zIndex: 1,
       ...props,
       styleOptions: {
         getDelayColor: getDelayColorForVehicle,
@@ -61,8 +62,6 @@ function RealtimeLayer(props: RealtimeLayerProps) {
       },
     });
 
-    layer.setZIndex(1);
-
     return layer;
   }, [apikey, mots, realtimeurl, tenant, props]);
 

package/src/RvfCheckbox/RvfCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { JSX } from "preact";
+
+import { memo } from "preact/compat";
+
+// @ts-expect-error - required for htm to resolve the JSX pragma
+import ok from "../icons/Ok/ok-grey.svg";
+
+export type RvfCheckboxProps = {} & JSX.InputHTMLAttributes<HTMLInputElement>;
+
+function RvfCheckbox({ className, ...props }: RvfCheckboxProps) {
+  return (
+    <input
+      className={`box-border size-[20px] cursor-pointer appearance-none rounded border-2 border-grey bg-white bg-contain bg-center text-grey disabled:cursor-default disabled:border-lightgrey ${className}`}
+      style={{
+        backgroundImage:
+          props.checked && !props.disabled ? `url('` + ok + `')` : "",
+      }}
+      {...props}
+      type="checkbox"
+    />
+  );
+}
+
+export default memo(RvfCheckbox);

package/src/RvfCheckbox/index.tsx

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

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -4,7 +4,9 @@ import { memo, useId, useState } from "preact/compat";
 
 import Cancel from "../icons/Cancel";
 import RvfButton from "../RvfButton";
+import RvfCheckbox from "../RvfCheckbox";
 import RvfIconButton from "../RvfIconButton";
+import RvfSelect from "../RvfSelect";
 import exportPdf from "../utils/exportPdf";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
@@ -39,31 +41,37 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
         </div>
         {/* <!-- Content --> */}
         <div className="flex flex-1 flex-col gap-2">
-          <div className={"flex gap-2"}>
-            <input
+          <div className={"flex items-center gap-2"}>
+            {/* <input
               checked={useMaxExtent}
               id={checkboxId}
               onChange={() => {
                 setUseMaxExtent(!useMaxExtent);
               }}
               type="checkbox"
+            /> */}
+            <RvfCheckbox
+              checked={useMaxExtent}
+              id={checkboxId}
+              onChange={() => {
+                return setUseMaxExtent(!useMaxExtent);
+              }}
             />
             <label htmlFor={checkboxId}>Ganze Region exportieren</label>
           </div>
-          <div className={"flex gap-2"}>
+          <div className={"flex items-center gap-2"}>
             <label htmlFor={selectId}>Format:</label>
-            <select
+            <RvfSelect
               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>
+            </RvfSelect>
           </div>
         </div>
         {/* <!-- Footer --> */}

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -0,0 +1,44 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import ArrowDown from "../icons/ArrowDown";
+import ArrowUp from "../icons/ArrowUp";
+import useMapContext from "../utils/hooks/useMapContext";
+
+export type RvfFloatingMenuProps = {
+  isOpen: boolean;
+  onClick: () => void;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfFloatingMenu({
+  children,
+  isOpen,
+  onClick,
+  title,
+}: RvfFloatingMenuProps) {
+  const { map } = useMapContext();
+
+  if (!map) {
+    return null;
+  }
+
+  return (
+    <div className="pointer-events-none absolute bottom-8 left-2 top-2 z-10 flex flex-col overflow-hidden rounded-lg">
+      <div className="pointer-events-auto max-h-full rounded-lg border bg-white shadow-lg medium:w-largeMenu large:w-mediumMenu">
+        <button
+          className="flex w-full items-center justify-between px-2 py-1.5 "
+          onClick={onClick}
+        >
+          {title} {isOpen ? <ArrowDown /> : <ArrowUp />}
+        </button>
+        {!isOpen && (
+          <div className="flex h-[calc(100%-39px)] w-full flex-1 overflow-y-auto">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RvfFloatingMenu;

package/src/RvfFloatingMenu/index.tsx

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

package/src/{LayerTree/LayerTree.tsx → RvfLayerTree/RvfLayerTree.tsx}

@@ -1,3 +1,5 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
 import { useEffect, useReducer } from "preact/hooks";
 
 import {
@@ -6,24 +8,23 @@ import {
 } from "./layersTreeContext";
 import layersTreeReducer from "./layersTreeReducer";
 import TreeItem, { TreeItemProps } from "./TreeItem/TreeItem";
-import TreeItemContainer from "./TreeItemContainer";
 
-export interface LayerTreeProps {
+export type RvfLayerTreeProps = {
   layers: TreeItemProps[];
-}
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
 
-function LayerTree({ layers }: LayerTreeProps) {
+function RvfLayerTree({ layers, ...props }: RvfLayerTreeProps) {
   const [tree, dispatch] = useReducer(layersTreeReducer, layers);
 
   useEffect(() => {
     dispatch({ payload: layers, type: "INIT" });
-    console.log("INIT", layers);
   }, [layers]);
 
   const renderedLayers = layers.map((item, idx) => {
     return (
-      <div className="border-b border-grey" key={idx}>
-        <TreeItem {...item} />
+      <div className="w-full" key={idx}>
+        <TreeItem className="w-full" {...item} />
       </div>
     );
   });
@@ -31,14 +32,10 @@ function LayerTree({ layers }: LayerTreeProps) {
   return (
     <LayersTreeContext.Provider value={tree}>
       <LayersTreeDispatchContext.Provider value={dispatch}>
-        <div className="flex flex-col">
-          <TreeItemContainer selectionType={tree[0]?.selectionType}>
-            {renderedLayers}
-          </TreeItemContainer>
-        </div>
+        <div {...props}>{renderedLayers}</div>
       </LayersTreeDispatchContext.Provider>
     </LayersTreeContext.Provider>
   );
 }
 
-export default LayerTree;
+export default memo(RvfLayerTree);

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -0,0 +1,120 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import BaseLayer from "ol/layer/Base";
+import {
+  SVGProps,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+} from "preact/compat";
+
+import ArrowDown from "../../icons/ArrowDown";
+import ArrowUp from "../../icons/ArrowUp";
+import RvfCheckbox from "../../RvfCheckbox";
+import RvfRadioButton from "../../RvfRadioButton";
+import { LayersTreeDispatchContext } from "../layersTreeContext";
+
+export enum SelectionType {
+  CHECKBOX = "checkbox",
+  RADIO = "radio",
+}
+
+export type TreeItemProps = {
+  childItems: TreeItemProps[];
+  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
+  id: string;
+  isCollapsedOnControlClick?: boolean;
+  isControlChecked?: boolean;
+  layer?: BaseLayer;
+  onIconClick?: () => void;
+  selectionType: SelectionType;
+  title: string;
+} & JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function TreeItem({
+  childItems,
+  isCollapsedOnControlClick,
+  isControlChecked,
+  layer,
+  selectionType,
+  title,
+}: TreeItemProps) {
+  const [isContainerVisible, setIsContainerVisible] = useState(true);
+  const dispatch = useContext(LayersTreeDispatchContext);
+  const inputId = useId();
+  const buttonId = useId();
+
+  useEffect(() => {
+    if (isCollapsedOnControlClick) {
+      setIsContainerVisible(isControlChecked);
+    }
+  }, [isControlChecked, isCollapsedOnControlClick, layer]);
+
+  const handleItemClick = () => {
+    setIsContainerVisible(!isContainerVisible);
+
+    if (isCollapsedOnControlClick && !isContainerVisible) {
+      dispatch({
+        payload: {
+          ...this["props"],
+          isControlChecked: true,
+        },
+        type: "SELECT_ITEM",
+      });
+    }
+  };
+
+  const handleSelectionChange = (event) => {
+    dispatch({
+      payload: {
+        ...this["props"],
+        isControlChecked: event.target.checked,
+      },
+      type: "SELECT_ITEM",
+    });
+  };
+
+  const renderedLayers = childItems.map((item, idx) => {
+    return <TreeItem key={idx} {...item} />;
+  });
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 border-b py-2">
+        {selectionType === SelectionType.RADIO ? (
+          <RvfRadioButton
+            checked={isControlChecked}
+            id={inputId}
+            onChange={handleSelectionChange}
+          />
+        ) : (
+          <RvfCheckbox
+            checked={isControlChecked}
+            id={inputId}
+            onChange={handleSelectionChange}
+          />
+        )}
+        <label
+          className={`cursor-pointer`}
+          htmlFor={childItems.length > 0 ? buttonId : inputId}
+        >
+          {title}
+        </label>
+        {childItems.length > 0 && (
+          <button
+            className={`flex cursor-pointer items-center gap-2 font-normal`}
+            id={buttonId}
+            onClick={handleItemClick}
+          >
+            {isContainerVisible ? <ArrowUp /> : <ArrowDown />}
+          </button>
+        )}
+      </div>
+      {isContainerVisible && <div className="pl-6">{renderedLayers}</div>}
+    </div>
+  );
+}
+
+export default TreeItem;

package/src/RvfLayerTree/index.tsx

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

package/src/{LayerTree → RvfLayerTree}/layersTreeReducer.ts

@@ -10,8 +10,6 @@ const initTree = (tree) => {
   initializedTree.childItems = tree;
   mapNode(initializedTree.childItems, initializedTree);
 
-  console.log("initializedTree", initializedTree);
-
   return initializedTree;
 };
 
@@ -146,8 +144,6 @@ function layersTreeReducer(state = ROOT, action) {
       return initTree(action.payload);
     case "SELECT_ITEM":
       return setNewControlCheckedStatus(state, action.payload);
-    case "SELECT_RADIO_ITEM":
-      return setNewControlCheckedStatus(state, action.payload);
     default:
       return state;
   }

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -0,0 +1,42 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      layersFilter: ({ metadata, source }) => {
+        return (
+          metadata?.["rvf.filter"] === "netowrk_plans" ||
+          source === "network_plans"
+        );
+      },
+      maplibreLayer: baseLayer,
+      minZoom: 10,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfLineNetworkPlanLayer);

package/src/RvfLineNetworkPlanLayer/index.tsx

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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -16,8 +16,6 @@ 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";
@@ -27,11 +25,15 @@ import RouteSchedule from "../RouteSchedule";
 import RvfExportMenu from "../RvfExportMenu";
 import RvfExportMenuButton from "../RvfExportMenuButton";
 import RvfFeatureDetails from "../RvfFeatureDetails";
+import RvfFloatingMenu from "../RvfFloatingMenu";
 // 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 RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
 import Modal from "../RvfModal";
 import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
 import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
+import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
+import Topics from "../RvfTopics";
 import RvfZoomButtons from "../RvfZoomButtons";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
@@ -40,7 +42,6 @@ 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";
@@ -57,6 +58,7 @@ const bbox = RVF_EXTENT_3857.join(",");
 
 const baseLayerProps = {
   mapLibreOptions: {
+    maxCanvasSize: [20000, 20000], // remove 4096 limitations
     preserveDrawingBuffer: true,
   },
 };
@@ -98,7 +100,7 @@ function RvfMobilityMap({
   const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
-  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState(false);
+  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
@@ -226,13 +228,15 @@ function RvfMobilityMap({
   const rvfContextValue = useMemo(() => {
     return {
       isExportMenuOpen,
+      isLayerTreeOpen,
       selectedFeature,
       selectedFeatures,
       setIsExportMenuOpen,
+      setIsLayerTreeOpen,
       setSelectedFeature,
       setSelectedFeatures,
     };
-  }, [isExportMenuOpen, selectedFeature, selectedFeatures]);
+  }, [isExportMenuOpen, selectedFeature, selectedFeatures, isLayerTreeOpen]);
 
   return (
     <I18nContext.Provider value={i18n}>
@@ -243,47 +247,48 @@ function RvfMobilityMap({
           <div
             className="relative size-full border font-sans @container/main"
             ref={eventNodeRef}
+            style={{ fontSize: 16 }}
           >
             <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
               <Map className="relative flex-1 overflow-visible ">
+                <RvfFloatingMenu
+                  isOpen={isLayerTreeOpen}
+                  onClick={() => {
+                    setIsLayerTreeOpen(!isLayerTreeOpen);
+                  }}
+                  title="Kartendaten"
+                >
+                  <Topics className={"w-full px-2"} />
+                </RvfFloatingMenu>
                 <BaseLayer {...baseLayerProps} isNotInLayerTree />
                 <SingleClickListener />
 
-                {realtime === "true" && <RealtimeLayer title="Realtime data" />}
+                {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
                 {tenant && <StationsLayer />}
                 {notification === "true" && <NotificationLayer />}
-                {/* <RvfLnpLayer />
-                <RvfVerkaufStellenLayer />
-                <RvfTarifZonenLayer /> */}
+                <RvfSellingPointsLayer title="Verkaufsstellen" />
+                <RvfLineNetworkPlanLayer title="Liniennetz" />
+                <RvfTarifZonenLayer title="Tarifzonen" />
                 <RvfPoisLayer title="POIs" />
-
                 <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 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 />}
+                  <RvfExportMenuButton />
                 </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>