poiLayerRef popup per mouseover und verschieben aber poi in MySQL-DB-Tabelle hinzufügen noch nicht

components/MapComponent.js

@@ -15,7 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
-  const dbLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
+  const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
   const [oms, setOms] = useState(null); // State für OMS-Instanz
@@ -552,7 +552,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map]);
   //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt
   // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
-  useEffect(() => {
+/*   useEffect(() => {
     // Remove old markers
     if (map) {
       // Entfernen der alten DBLayer und Erstellung einer neuen
@@ -590,31 +590,31 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.addTo(dbLayer);
       });
     }
-  }, [map, locations, onLocationUpdate]);
+  }, [map, locations, onLocationUpdate]); */
 
   //------------------------------------------
 
   useEffect(() => {
     // Initialisierung der dbLayer, wenn die Karte verfügbar ist
-    if (map && !dbLayerRef.current) {
-      dbLayerRef.current = new L.LayerGroup().addTo(map);
+    if (map && !poiLayerRef.current) {
+      poiLayerRef.current = new L.LayerGroup().addTo(map);
     }
 
     return () => {
-      if (map && dbLayerRef.current) {
+      if (map && poiLayerRef.current) {
         // Entfernen der dbLayer bei Unmount
-        map.removeLayer(dbLayerRef.current);
-        dbLayerRef.current = null;
+        map.removeLayer(poiLayerRef.current);
+        poiLayerRef.current = null;
       }
     };
   }, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert
   //------------------------------------------
   useEffect(() => {
-    if (map && dbLayerRef.current) {
+    if (map && poiLayerRef.current) {
       // Sicherstellen, dass die alte dbLayer entfernt wird
-      map.removeLayer(dbLayerRef.current);
-      dbLayerRef.current = new L.LayerGroup().addTo(map);
-
+      map.removeLayer(poiLayerRef.current);
+      poiLayerRef.current = new L.LayerGroup().addTo(map);
+  
       locations.forEach((location) => {
         const { latitude, longitude } = parsePoint(location.position);
         const marker = L.marker([latitude, longitude], {
@@ -627,7 +627,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           draggable: true,
           id: location.idPoi,
         });
-
+  
+        // Popup binden, aber nicht automatisch öffnen
+        marker.bindPopup(
+          `<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
+        );
+  
+        // Event-Handler für Mouseover und Mouseout hinzufügen
+        marker.on("mouseover", function() {
+          this.openPopup();
+        });
+        marker.on("mouseout", function() {
+          this.closePopup();
+        });
+  
         marker.on("dragend", function (e) {
           const newLat = e.target.getLatLng().lat;
           const newLng = e.target.getLatLng().lng;
@@ -636,11 +649,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             onLocationUpdate(markerId, newLat, newLng);
           });
         });
-
-        marker.addTo(dbLayerRef.current);
+  
+        marker.addTo(poiLayerRef.current);
       });
     }
   }, [map, locations, onLocationUpdate]); // Dieser Effekt läuft, wenn `map`, `locations` oder `onLocationUpdate` sich ändern
+  
 
   function parsePoint(position) {
     const [longitude, latitude] = position.slice(6, -1).split(" ");