Koordinaten anzeigen

components/useMapContextMenu.js

@@ -1,6 +1,5 @@
-// /components/useMapContextMenu.js
 import { toast } from "react-toastify";
-import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Assuming these are imported correctly
+import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Utility-Funktionen
 
 const zoomInCallback = (e, map) => {
   zoomIn(e, map);
@@ -13,10 +12,71 @@ const zoomOutCallback = (map) => {
 const centerHereCallback = (e, map) => {
   centerHere(e, map);
 };
-// Funktion zum Anzeigen der Koordinaten
+
+// Funktion zum Anzeigen und Kopieren der Koordinaten
 const showCoordinates = (e) => {
-  alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
+  const coordinates = `Breitengrad: ${e.latlng.lat.toFixed(5)}, Längengrad: ${e.latlng.lng.toFixed(5)}`;
+
+  // Überprüfen, ob das Clipboard-API unterstützt wird
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard
+      .writeText(coordinates)
+      .then(() => {
+        toast.success("Koordinaten wurden kopiert: " + coordinates, {
+          position: "top-center",
+          autoClose: 3000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+        });
+      })
+      .catch((err) => {
+        toast.error("Fehler beim Kopieren der Koordinaten!", {
+          position: "top-center",
+          autoClose: 3000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+        });
+        console.error("Fehler beim Kopieren: ", err);
+      });
+  } else {
+    // Fallback für ältere Browser
+    const textArea = document.createElement("textarea");
+    textArea.value = coordinates;
+    document.body.appendChild(textArea);
+    textArea.select();
+    try {
+      document.execCommand("copy");
+      toast.success("Koordinaten wurden kopiert: " + coordinates, {
+        position: "top-center",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    } catch (err) {
+      toast.error("Fehler beim Kopieren der Koordinaten!", {
+        position: "top-center",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+      console.error("Fehler beim Kopieren: ", err);
+    }
+    document.body.removeChild(textArea);
+  }
 };
+
 // Kontextmenü Callback für "POI hinzufügen"
 const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => {
   const editMode = localStorage.getItem("editMode") === "true";
@@ -43,42 +103,53 @@ export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, h
   hasRights = editMode ? hasRights : undefined;
 
   if (!menuItemAdded && map && map.contextmenu) {
-    map.contextmenu.addItem({
+    // Event-Listener für Rechtsklick
-      text: "Koordinaten anzeigen",
+    map.on("contextmenu", (e) => {
-      icon: "img/not_listed_location.png",
+      // Entferne alle vorherigen dynamischen Einträge
-      callback: showCoordinates,
+      map.contextmenu.removeAllItems();
-    });
 
-    map.contextmenu.addItem({ separator: true });
+      // Koordinaten dynamisch anzeigen
-
+      const coordinates = `Lat: ${e.latlng.lat.toFixed(5)}, Lng: ${e.latlng.lng.toFixed(5)}`;
-    map.contextmenu.addItem({
-      text: "Reinzoomen",
-      icon: "img/zoom_in.png",
-      callback: (e) => zoomInCallback(e, map),
-    });
-
-    map.contextmenu.addItem({
-      text: "Rauszoomen",
-      icon: "img/zoom_out.png",
-      callback: () => zoomOutCallback(map),
-    });
-
-    map.contextmenu.addItem({
-      text: "Hier zentrieren",
-      icon: "img/center_focus.png",
-      callback: (e) => centerHereCallback(e, map),
-    });
-
-    // wenn localStorage Variable editMode true ist, dann wird der Button "POI hinzufügen" angezeigt
-    if (editMode) {
-      map.contextmenu.addItem({ separator: true });
       map.contextmenu.addItem({
-        text: "POI hinzufügen",
+        text: coordinates,
-        icon: "img/add_station.png",
+        icon: "img/not_listed_location.png",
-        className: "background-red",
+        callback: () => showCoordinates(e),
-        callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates),
       });
-    }
+
+      map.contextmenu.addItem({ separator: true });
+
+      // Zoom-In
+      map.contextmenu.addItem({
+        text: "Reinzoomen",
+        icon: "img/zoom_in.png",
+        callback: (e) => zoomInCallback(e, map),
+      });
+
+      // Zoom-Out
+      map.contextmenu.addItem({
+        text: "Rauszoomen",
+        icon: "img/zoom_out.png",
+        callback: () => zoomOutCallback(map),
+      });
+
+      // Hier zentrieren
+      map.contextmenu.addItem({
+        text: "Hier zentrieren",
+        icon: "img/center_focus.png",
+        callback: (e) => centerHereCallback(e, map),
+      });
+
+      // POI hinzufügen (wenn Bearbeitungsmodus aktiviert ist)
+      if (editMode) {
+        map.contextmenu.addItem({ separator: true });
+        map.contextmenu.addItem({
+          text: "POI hinzufügen",
+          icon: "img/add_station.png",
+          className: "background-red",
+          callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates),
+        });
+      }
+    });
 
     setMenuItemAdded(true);
   }