Füge: Kontextmenü-Option für "Station hinzufügen" mit Koordinaten-Popup hinzu

Füge: Kontextmenü-Option für "Station hinzufügen" mit Koordinaten-Popup hinzu

components/MapComponent.js

@@ -24,7 +24,7 @@ import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAto
 const MapComponent = ({ locations, onLocationUpdate }) => {
 
   const [showPopup, setShowPopup] = useState(false);
-
+  const [popupCoordinates, setPopupCoordinates] = useState({ lat: 52.52, lng: 13.4050 }); // Beispielkoordinaten
   const openPopup = () => setShowPopup(true);
   const closePopup = () => setShowPopup(false);
 
@@ -33,6 +33,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     console.log("Neue Station:", stationData);
     closePopup(); // Schließt das Popup nach dem Hinzufügen
   };
+  // Beispiel zum Öffnen des Popups mit bestimmten Koordinaten
+  const openAddStationPopupWithCoordinates = (lat, lng) => {
+    setPopupCoordinates({ lat, lng });
+    setShowPopup(true);
+  };
+
 
   const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
   const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden
@@ -271,7 +277,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         zoomControl: false,
         contextmenu: true,
         contextmenuItems: [
-          { text: "Station hinzufügen"},
+           { text: "Station hinzufügen", callback: addStationCallback },
           {
             text: "Station öffnen (Tab)",
             icon: "img/screen_new.png",
@@ -422,6 +428,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     map.removeLayer(GMA);
     loadData();
   };
+
+    // Kontextmenü Callback für "Station hinzufügen"
+    const addStationCallback = (event) => {
+      setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
+      setShowPopup(true); // Popup öffnen
+    };
   //-----Kontextmenu----ende------------
   // Ensure this function is only called when map is initialized and available
 /*   const showAddStationPopup = (e, map) => {
@@ -1516,18 +1528,33 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   return (
     <>
-        <div>
-      <button onClick={openPopup}>Neue Station hinzufügen</button>
-      
-      {/* Direkt als JSX verwenden */}
-      {showPopup && (
-        <ShowAddStationPopup
-          onClose={closePopup}
-          onSubmit={handleAddStation}
-          latlng={{ lat: 52.5200, lng: 13.4050 }} // Beispielkoordinaten
-        />
-      )}
-    </div>
+      <div>
+        {/* Popup als Modal anzeigen */}
+        {showPopup && (
+          <div style={{
+            position: "fixed",
+            top: 0, left: 0, right: 0, bottom: 0,
+            backgroundColor: "rgba(0,0,0,0.5)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 1000
+          }}>
+            <div style={{
+              backgroundColor: "white",
+              padding: "20px",
+              borderRadius: "10px",
+              boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
+            }}>
+              <ShowAddStationPopup
+                onClose={closePopup}
+                onSubmit={handleAddStation}
+                latlng={popupCoordinates}
+              />
+            </div>
+          </div>
+        )}
+      </div>
       <DataSheet className="z-50" />
 
       <div