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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -10,8 +10,15 @@ import {
   RealtimeTrainId,
 } from "mobility-toolbox-js/types";
 import { Feature, Map as OlMap } from "ol";
+import { Group } from "ol/layer";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
@@ -26,12 +33,16 @@ import RvfExportMenu from "../RvfExportMenu";
 import RvfExportMenuButton from "../RvfExportMenuButton";
 import RvfFeatureDetails from "../RvfFeatureDetails";
 import RvfFloatingMenu from "../RvfFloatingMenu";
+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%2Fnotification%2F%3Fsso_config%3Dsob&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 RvfPoisLayer from "../RvfPoisLayer";
 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";
@@ -52,17 +63,24 @@ import MobilityEvent from "../utils/MobilityEvent";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
-export type RvfMobilityMapProps = {} & MobilityMapProps;
+export type RvfMobilityMapProps = { toolbar: string } & MobilityMapProps;
 
 const bbox = RVF_EXTENT_3857.join(",");
 
 const baseLayerProps = {
   mapLibreOptions: {
-    maxCanvasSize: [20000, 20000], // remove 4096 limitations
+    maxCanvasSize: [20000, 20000] as [number, number], // remove 4096 limitations
     preserveDrawingBuffer: true,
   },
 };
 
+const styleProps = {
+  //fontSize: 16
+};
+const scrollableHandlerProps = {
+  style: { width: "calc(100% - 60px)" },
+};
+
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   baselayer = "de.rvf",
@@ -84,6 +102,7 @@ function RvfMobilityMap({
   search = "false",
   stopsurl = "https://api.geops.io/stops/v1/",
   tenant = null,
+  toolbar = "true",
   zoom = null,
 }: RvfMobilityMapProps) {
   const eventNodeRef = useRef<HTMLDivElement>();
@@ -98,9 +117,19 @@ function RvfMobilityMap({
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
   const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
+  const [isShareMenuOpen, setIsShareMenuOpen] = useState<boolean>(false);
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
   const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
+  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 [hasToolbar] = useState<boolean>(toolbar === "true");
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
@@ -201,6 +230,7 @@ function RvfMobilityMap({
         realtimeurl,
         search,
         tenant,
+        toolbar,
         zoom,
       }),
     );
@@ -208,6 +238,7 @@ function RvfMobilityMap({
     baselayer,
     center,
     geolocation,
+    toolbar,
     mapsurl,
     maxzoom,
     minzoom,
@@ -229,14 +260,129 @@ function RvfMobilityMap({
     return {
       isExportMenuOpen,
       isLayerTreeOpen,
+      isShareMenuOpen,
+      lineNetworkPlanLayer,
+      poisLayer,
       selectedFeature,
       selectedFeatures,
+      sellingPointsLayer,
       setIsExportMenuOpen,
       setIsLayerTreeOpen,
+      setIsShareMenuOpen,
+      setLineNetworkPlanLayer,
+      setPoisLayer,
       setSelectedFeature,
       setSelectedFeatures,
+      setSellingPointsLayer,
+      setSharedMobilityLayerGroup,
+      setTarifZonenLayer,
+      sharedMobilityLayerGroup,
+      tarifZonenLayer,
+    };
+  }, [
+    isExportMenuOpen,
+    isLayerTreeOpen,
+    isShareMenuOpen,
+    lineNetworkPlanLayer,
+    poisLayer,
+    selectedFeature,
+    selectedFeatures,
+    sellingPointsLayer,
+    sharedMobilityLayerGroup,
+    tarifZonenLayer,
+  ]);
+
+  const onLayerTreeMenuClick = useCallback(() => {
+    setIsLayerTreeOpen(!isLayerTreeOpen);
+  }, [isLayerTreeOpen]);
+
+  const onExportMenuClose = useCallback(() => {
+    setIsExportMenuOpen(false);
+  }, []);
+
+  const copyrightOptions = useMemo(() => {
+    return {
+      format: (copyrights) => {
+        const newCopyrights = [];
+        copyrights.forEach((copyright) => {
+          if (!/(sbb|rvf)/i.test(copyright)) {
+            newCopyrights.push(copyright);
+          }
+        });
+        return newCopyrights.join("&nbsp;|&nbsp;");
+      },
+    };
+  }, []);
+
+  const stationsLayerProps = useMemo(() => {
+    return {
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "netzplan_stations";
+      },
     };
-  }, [isExportMenuOpen, selectedFeature, selectedFeatures, isLayerTreeOpen]);
+  }, []);
+
+  useEffect(() => {
+    if (hasToolbar && isLayerTreeOpen) {
+      setIsExportMenuOpen(false);
+      setIsLayerTreeOpen(isLayerTreeOpen);
+      setSelectedFeature(null);
+      setTrainId(null);
+      setStationId(null);
+      setIsShareMenuOpen(false);
+    }
+  }, [isLayerTreeOpen, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && isExportMenuOpen) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(isExportMenuOpen);
+      setSelectedFeature(null);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+      setStationId(null);
+    }
+  }, [isExportMenuOpen, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && selectedFeature) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+      setStationId(null);
+    }
+  }, [selectedFeature, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && stationId) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+      setSelectedFeature(null);
+    }
+  }, [stationId, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && trainId) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(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]);
 
   return (
     <I18nContext.Provider value={i18n}>
@@ -247,39 +393,43 @@ function RvfMobilityMap({
           <div
             className="relative size-full border font-sans @container/main"
             ref={eventNodeRef}
-            style={{ fontSize: 16 }}
+            style={styleProps}
           >
-            <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
+            <div className="relative flex size-full flex-col text-base @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 />
+                <BaseLayer {...baseLayerProps} />
                 <SingleClickListener />
 
                 {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
-                {tenant && <StationsLayer />}
+                {
+                  <StationsLayer
+                    minZoom={10}
+                    title="Haltestellen"
+                    {...stationsLayerProps}
+                  />
+                }
                 {notification === "true" && <NotificationLayer />}
-                <RvfSellingPointsLayer title="Verkaufsstellen" />
-                <RvfLineNetworkPlanLayer title="Liniennetz" />
-                <RvfTarifZonenLayer title="Tarifzonen" />
+                <RvfSellingPointsLayer isQueryable title="Verkaufsstellen" />
+                <RvfLineNetworkPlanLayer
+                  isQueryable
+                  minZoom={10}
+                  title="Liniennetz"
+                />
+                <RvfTarifZonenLayer isQueryable title="Tarifzonen" />
                 <RvfPoisLayer title="POIs" />
                 <RvfSharedMobilityLayerGroup title="Shared Mobility" />
 
                 <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" />
+                  <Copyright
+                    className="bg-slate-50/70"
+                    options={copyrightOptions}
+                  />
                 </div>
 
                 <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
                   {geolocation === "true" && <GeolocationButton />}
-                  <RvfExportMenuButton />
+                  {!hasToolbar && <RvfExportMenuButton />}
                 </div>
 
                 {search === "true" && (
@@ -291,31 +441,99 @@ function RvfMobilityMap({
                 <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
                   <RvfZoomButtons />
                 </div>
-              </Map>
 
+                {!hasToolbar && (
+                  <RvfFloatingMenu
+                    isOpen={isLayerTreeOpen}
+                    onClick={onLayerTreeMenuClick}
+                    title="Kartendaten"
+                  >
+                    <Topics className={"w-full px-2"} />
+                  </RvfFloatingMenu>
+                )}
+              </Map>
               <Overlay
                 className={"z-50"}
-                ScrollableHandlerProps={{
-                  style: { width: "calc(100% - 60px)" },
-                }}
+                ScrollableHandlerProps={scrollableHandlerProps}
               >
                 {realtime === "true" && trainId && (
-                  <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setTrainId(null);
+                      }}
+                      title="Train"
+                    ></RvfOverlayHeader>
+                    <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+                  </>
                 )}
                 {tenant && stationId && (
-                  <Station className="relative overflow-y-auto  overflow-x-hidden" />
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setStationId(null);
+                      }}
+                      title="Station"
+                    ></RvfOverlayHeader>
+                    <Station className="relative flex flex-col overflow-y-auto overflow-x-hidden  p-2" />
+                  </>
                 )}
                 {selectedFeature && (
-                  <RvfFeatureDetails className="relative overflow-y-auto  overflow-x-hidden" />
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setSelectedFeature(null);
+                      }}
+                      title="Informations"
+                    ></RvfOverlayHeader>
+                    <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                  </>
+                )}
+                {hasToolbar && isExportMenuOpen && (
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setIsExportMenuOpen(false);
+                      }}
+                      title="Export"
+                    ></RvfOverlayHeader>
+                    <RvfExportMenu className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                  </>
+                )}
+                {hasToolbar && 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 && isShareMenuOpen && (
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setIsLayerTreeOpen(false);
+                      }}
+                      title="Share"
+                    ></RvfOverlayHeader>
+                    <RvfShare className="relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
+                  </>
                 )}
               </Overlay>
 
-              {isExportMenuOpen && (
-                <Modal
-                  onClose={() => {
-                    setIsExportMenuOpen(false);
-                  }}
-                >
+              {hasToolbar && (
+                <div className={"overflow-x-hidden border-r"}>
+                  <RvfLayerTreeButton className={"border-none"} />
+                  <RvfExportMenuButton className={"border-none"} />
+                  <RvfShareMenuButton className={"border-none"} />
+                </div>
+              )}
+
+              {!hasToolbar && isExportMenuOpen && (
+                <Modal onClose={onExportMenuClose}>
                   <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
                 </Modal>
               )}

package/src/RvfOverlayHeader/RvfOverlayHeader.tsx

@@ -0,0 +1,40 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import Cancel from "../icons/Cancel";
+import RvfIconButton from "../RvfIconButton";
+
+export type RvfOverlayHeaderProps = {
+  onClose?: () => void;
+  title?: string;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfOverlayHeader({
+  children,
+  className,
+  onClose,
+  title,
+  ...props
+}: RvfOverlayHeaderProps) {
+  return (
+    <div
+      className={twMerge(
+        "flex flex-row items-center justify-between gap-2 p-2 border-b" +
+          (className || ""),
+      )}
+      {...props}
+    >
+      {children || <span className={"font-bold"}>{title}</span>}
+      {onClose && (
+        <RvfIconButton className={"!size-[32px] border-none"} onClick={onClose}>
+          <Cancel />
+        </RvfIconButton>
+      )}
+    </div>
+  );
+}
+
+export default memo(RvfOverlayHeader);

package/src/RvfOverlayHeader/index.tsx

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

package/src/RvfPermalink/RvfPermalink.tsx

@@ -0,0 +1,18 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import RvfInputCopy from "../RvfInputCopy";
+
+function RvfPermalink({
+  ...props
+}: JSX.HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
+  return (
+    <div {...props}>
+      <RvfInputCopy value={window?.location.href} />
+      <p className="py-2">
+        Sie können auch den Link aus der Adresszeile des Browsers kopieren.
+      </p>
+    </div>
+  );
+}
+
+export default RvfPermalink;

package/src/RvfPermalink/index.tsx

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

package/src/RvfPoisLayer/RvfPoisLayer.tsx

@@ -4,9 +4,11 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
+  const { setPoisLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
@@ -22,6 +24,10 @@ function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setPoisLayer(layer);
+  }, [layer, setPoisLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;

package/src/RvfRadioButton/RvfRadioButton.tsx

@@ -6,7 +6,7 @@ export type RvfRadioButtonProps =
 function RvfRadioButton(props: RvfRadioButtonProps) {
   return (
     <input
-      className="peer mr-2 h-inputControl w-inputControl rounded-full border-2 border-grey accent-red"
+      className="peer mr-2 size-[20px] rounded-full border-2 border-grey accent-red"
       {...props}
       type="radio"
     />

package/src/RvfSelect/RvfSelect.tsx

@@ -9,12 +9,12 @@ function RvfSelect({ children, className, onChange }: RvfSelectProps) {
   return (
     <div className="relative flex items-center text-grey">
       <select
-        className={`min-w-12 appearance-none rounded-xl border border-grey p-2 text-base focus:outline-none ${className}`}
+        className={`h-[32px] cursor-pointer appearance-none rounded-[12px] border border-current bg-white px-[13px] text-[16px]  leading-[22px]  disabled:cursor-default @sm/main:h-[36px] @md/main:h-[40px] ${className}`}
         onChange={onChange}
       >
         {children}
       </select>
-      <ArrowDown className="pointer-events-none absolute right-1" />
+      <ArrowDown className="pointer-events-none absolute right-[8px]" />
     </div>
   );
 }

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -3,26 +3,45 @@ import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import Automat from "../icons/Automat";
+import InPerson from "../icons/InPerson";
+import Video from "../icons/Video";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
+  const { title } = props;
   const { baseLayer, map } = useMapContext();
+  const { setSellingPointsLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
     return new MaplibreStyleLayer({
-      layersFilter: ({ metadata, source, "source-layer": sourceLayer }) => {
-        return (
-          metadata?.["rvf.filter"] === "selling_points" ||
-          (source === "rvf" && sourceLayer === "selling_points")
-        );
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["general.filter"] === "selling_points";
       },
       maplibreLayer: baseLayer,
       ...(props || {}),
+
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {title}
+          <span className="flex items-center">
+            <Automat />
+            <InPerson />
+            <Video />
+          </span>
+        </div>
+      ),
     });
-  }, [baseLayer, props]);
+  }, [baseLayer, props, title]);
+
+  useEffect(() => {
+    setSellingPointsLayer(layer);
+  }, [layer, setSellingPointsLayer]);
 
   useEffect(() => {
     if (!map || !layer) {

package/src/RvfShare/RvfPermalinkButton/RvfPermalinkButton.tsx

@@ -0,0 +1,61 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { useState } from "preact/hooks";
+
+import Cancel from "../../icons/Cancel";
+import Share from "../../icons/Share";
+import RvfIconButton from "../../RvfIconButton";
+import RvfInputCopy from "../../RvfInputCopy";
+
+function RvfPermalinkButton({
+  className,
+  ...props
+}: JSX.ButtonHTMLAttributes<HTMLButtonElement> & PreactDOMAttributes) {
+  const [showTooltip, setShowTooltip] = useState(null);
+  const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
+
+  const handleIconClick = (event) => {
+    setPositionTooltip(event.currentTarget.getBoundingClientRect());
+    setShowTooltip(!showTooltip);
+  };
+
+  return (
+    <>
+      <RvfIconButton
+        className={"border-none " + className}
+        onClick={handleIconClick}
+        selected={showTooltip}
+        {...props}
+      >
+        <Share />
+      </RvfIconButton>
+
+      {showTooltip && positionTooltip && (
+        <div
+          className="fixed rounded-lg border border-grey bg-white p-2 shadow-lg"
+          style={{
+            left: positionTooltip.left + 40,
+            top: positionTooltip.top - 10,
+          }}
+        >
+          <div className="pr-4">
+            <RvfIconButton
+              className="absolute right-[-5px] top-[-5px] border-none bg-transparent p-0"
+              onClick={handleIconClick}
+            >
+              <Cancel height="18px" width="18px" />
+            </RvfIconButton>
+            <RvfInputCopy />
+            <p className="py-2">
+              Sie können auch den Link aus der Adresszeile des Browsers
+              kopieren.
+            </p>
+          </div>
+          <div className="absolute -left-1.5 top-4 size-2.5 rotate-45 border border-r-0 border-t-0 border-grey bg-white"></div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default RvfPermalinkButton;

package/src/RvfShare/RvfPermalinkButton/index.tsx

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

package/src/RvfShare/RvfShare.tsx

@@ -0,0 +1,40 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import CanvasSaveButton from "react-spatial/components/CanvasSaveButton";
+import { twMerge } from "tailwind-merge";
+
+import Email from "../icons/Email";
+import Image from "../icons/Image";
+import RvfButton from "../RvfButton";
+import RvfPermalink from "../RvfPermalink";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfShare({
+  className,
+  ...props
+}: JSX.HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
+  const { map } = useMapContext();
+
+  return (
+    <div className={twMerge("flex flex-col gap-2 " + className)} {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={`mailto:?subject=Karte&body=${window?.location.href}`}
+      >
+        <RvfButton>
+          <Email />
+          <span>Email senden</span>
+        </RvfButton>
+      </a>
+      <CanvasSaveButton map={map}>
+        <RvfButton className={"w-fit"}>
+          <Image />
+          <span>Bild speichern</span>
+        </RvfButton>
+      </CanvasSaveButton>
+      <RvfPermalink />
+    </div>
+  );
+}
+
+export default RvfShare;

package/src/RvfShare/index.tsx

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