DBLayer als layerGroup implementiert, fehlt noch die Marker das Popup Information, es soll oben idPoiTyp und unten das description sein

components/MapComponent.js

@@ -15,6 +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 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
@@ -508,7 +509,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }
 
   //useEffect zusammen von MySQL Daten bank und von APIs
-  useEffect(() => {
+  /*   useEffect(() => {
     const fetchData = async () => {
       try {
         const responses = await Promise.all([
@@ -540,16 +541,30 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     };
 
     fetchData();
-  }, []);
+  }, []); */
-  // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+  //------------------------------------------
+  let dbLayer = null;
   useEffect(() => {
+    if (map) {
+      // Schicht für Datenbank-Marker, sicherstellen, dass map nicht null ist
+      dbLayer = new L.LayerGroup().addTo(map);
+
+      // Fügen Sie Ihre Marker hier innerhalb dieser useEffect hinzu, da map nicht null ist
+
+      return () => {
+        // Bereinigung, entfernt dbLayer, wenn die Komponente unmountet
+        dbLayer.remove();
+      };
+    }
+  }, [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(() => {
     // Remove old markers
     if (map) {
-      /* map.eachLayer((layer) => {
+      // Entfernen der alten DBLayer und Erstellung einer neuen
-        if (layer instanceof L.Marker) {
+      map.removeLayer(dbLayer);
-          map.removeLayer(layer);
+      dbLayer = new L.LayerGroup().addTo(map);
-        }
-      }); */
       // Add new markers
       locations.forEach((location) => {
         const { latitude, longitude } = parsePoint(location.position);
@@ -579,13 +594,111 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             onLocationUpdate(markerId, newLat, newLng);
           });
         });
-        marker.addTo(map);
+        marker.addTo(dbLayer);
       });
     }
   }, [map, locations, onLocationUpdate]);
+ */
+  //------------------------------------------
+  // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+  /*   useEffect(() => {
+    // Remove old markers
+    if (map) {
+      map.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+          map.removeLayer(layer);
+        }
+      });
+
+      // Add new markers
+      locations.forEach((location) => {
+        const { latitude, longitude } = parsePoint(location.position);
+        const marker = L.marker([latitude, longitude], {
+          icon: L.icon({
+            iconUrl: "/location.svg",
+            iconSize: [34, 34],
+            iconAnchor: [17, 34],
+            popupAnchor: [0, -34],
+          }),
+          draggable: true,
+          id: location.idPoi,
+        });
+
+        marker.bindPopup(
+          `<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
+        );
+        marker.bindTooltip(
+          `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${location.description}</div>`,
+          { permanent: false, direction: "top" }
+        );
+
+        marker.on("dragend", function (e) {
+          const newLat = e.target.getLatLng().lat;
+          const newLng = e.target.getLatLng().lng;
+          const markerId = e.target.options.id;
+          updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+            onLocationUpdate(markerId, newLat, newLng);
+          });
+        });
+
+        marker.addTo(map);
+      });
+    }
+  }, [map, locations, onLocationUpdate]); */
 
   //------------------------------------------
+  useEffect(() => {
+    // Initialisierung der dbLayer, wenn die Karte verfügbar ist
+    if (map && !dbLayerRef.current) {
+      dbLayerRef.current = new L.LayerGroup().addTo(map);
+    }
 
+    return () => {
+      if (map && dbLayerRef.current) {
+        // Entfernen der dbLayer bei Unmount
+        map.removeLayer(dbLayerRef.current);
+        dbLayerRef.current = null;
+      }
+    };
+  }, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert
+
+  useEffect(() => {
+    if (map && dbLayerRef.current) {
+      // Sicherstellen, dass die alte dbLayer entfernt wird
+      map.removeLayer(dbLayerRef.current);
+      dbLayerRef.current = new L.LayerGroup().addTo(map);
+
+      locations.forEach((location) => {
+        const { latitude, longitude } = parsePoint(location.position);
+        const marker = L.marker([latitude, longitude], {
+          icon: L.icon({
+            iconUrl: "/location.svg",
+            iconSize: [34, 34],
+            iconAnchor: [17, 34],
+            popupAnchor: [0, -34],
+          }),
+          draggable: true,
+          id: location.idPoi,
+        });
+
+        marker.on("dragend", function (e) {
+          const newLat = e.target.getLatLng().lat;
+          const newLng = e.target.getLatLng().lng;
+          const markerId = e.target.options.id;
+          updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+            onLocationUpdate(markerId, newLat, newLng);
+          });
+        });
+
+        marker.addTo(dbLayerRef.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(" ");
+    return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
+  }
   //-----------------------------------------------------------------
   //         TALAS  Marker hinzufügen
   //-----------------------------------------------------------------