Popup statt Modal für die Koordinaten kopieren

components/CoordinatePopup.js

@@ -0,0 +1,34 @@
+// components/CoordinatePopup.js
+import React from "react";
+
+const CoordinatePopup = ({ isOpen, coordinates, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="absolute z-50 bg-white p-4 rounded-lg shadow-lg"
+      style={{
+        top: "10%", // Zentriert oben, ca. 10% von oben
+        left: "50%",
+        transform: "translateX(-50%)", // Horizontale Zentrierung
+      }}
+    >
+      <h2 className="text-lg font-bold mb-2">Koordinaten</h2>
+      <p className="mb-4">{coordinates}</p>
+      <button
+        onClick={() => {
+          navigator.clipboard.writeText(coordinates);
+          alert("Koordinaten kopiert!");
+        }}
+        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+      >
+        Kopieren
+      </button>
+      <button onClick={onClose} className="mt-2 bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">
+        Schließen
+      </button>
+    </div>
+  );
+};
+
+export default CoordinatePopup;

components/MapComponent.js

@@ -64,6 +64,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
 import CoordinateInput from "./CoordinateInput";
 import CoordinateModal from "./CoordinateModal";
+import CoordinatePopup from "./CoordinatePopup";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -84,6 +85,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     setCurrentCoordinates(coordinates);
     setIsModalOpen(true);
   };
+
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  const openPopupWithCoordinates = (e) => {
+    const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`;
+    setCurrentCoordinates(coordinates);
+    setIsPopupOpen(true);
+  };
+
+  const closePopup = () => setIsPopupOpen(false);
   const [currentCoordinates, setCurrentCoordinates] = useState("");
   const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
   const [isRightsLoaded, setIsRightsLoaded] = useState(false);
@@ -147,7 +158,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
   const [polylines, setPolylines] = useState([]);
   const [markers, setMarkers] = useState([]);
-  const closePopup = () => setShowPopup(false);
+
   const [newPoint, setNewPoint] = useState(null);
   const [newCoords, setNewCoords] = useState(null);
   const [tempMarker, setTempMarker] = useState(null);
@@ -921,11 +932,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   };
   //--------------------------------------------
-  useEffect(() => {
+  /*   useEffect(() => {
     if (map && !menuItemAdded) {
       addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, openModalWithCoordinates, hasRights, setShowPopup, setPopupCoordinates);
     }
-  }, [map, menuItemAdded, hasRights]);
+  }, [map, menuItemAdded, hasRights]); */
+  //--------------------------------------------
+
+  useEffect(() => {
+    if (map && !menuItemAdded) {
+      addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, openPopupWithCoordinates);
+    }
+  }, [map, menuItemAdded]);
   //--------------------------------------------
 
   return (
@@ -952,7 +970,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
       <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
-      <CoordinateModal isOpen={isModalOpen} onClose={closeModal} coordinates={currentCoordinates} />
+      <CoordinatePopup isOpen={isPopupOpen} coordinates={currentCoordinates} onClose={closePopup} />
 
       <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
         <div className="flex justify-between items-center">

components/useMapContextMenu.js

@@ -2,12 +2,13 @@
 import { toast } from "react-toastify";
 import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils";
 
-const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openModalWithCoordinates, hasRights, setShowPopup, setPopupCoordinates) => {
+// components/useMapContextMenu.js
+const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopupWithCoordinates) => {
   if (!menuItemAdded && map && map.contextmenu) {
     map.contextmenu.addItem({
       text: "Koordinaten anzeigen",
       icon: "img/not_listed_location.png",
-      callback: openModalWithCoordinates,
+      callback: openPopupWithCoordinates, // Aufruf des Popup-Callbacks
     });
 
     map.contextmenu.addItem({ separator: true });
@@ -15,38 +16,26 @@ const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openModa
     map.contextmenu.addItem({
       text: "Reinzoomen",
       icon: "img/zoom_in.png",
-      callback: (e) => zoomIn(e, map),
+      callback: (e) => {
+        map.setZoom(map.getZoom() + 1);
+      },
     });
 
     map.contextmenu.addItem({
       text: "Rauszoomen",
       icon: "img/zoom_out.png",
-      callback: () => zoomOut(map),
+      callback: () => {
+        map.setZoom(map.getZoom() - 1);
+      },
     });
 
     map.contextmenu.addItem({
       text: "Hier zentrieren",
       icon: "img/center_focus.png",
-      callback: (e) => centerHere(e, map),
-    });
-
-    if (localStorage.getItem("editMode") === "true") {
-      map.contextmenu.addItem({ separator: true });
-      map.contextmenu.addItem({
-        text: "POI hinzufügen",
-        icon: "img/add_station.png",
-        className: "background-red",
-        callback: (event) => {
-          const editMode = localStorage.getItem("editMode") === "true";
-          if (editMode && hasRights) {
-            setPopupCoordinates(event.latlng);
-            setShowPopup(true);
-          } else {
-            toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
-          }
+      callback: (e) => {
+        map.panTo(e.latlng);
       },
     });
-    }
 
     setMenuItemAdded(true);
   }