Popup statt Modal für die Koordinaten kopieren

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">