useEffect von Marker MySQL Datenbank und APIs in einzige useEffect

components/MapComponent.js

@@ -279,14 +279,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [mapRef, map]); // Abhängigkeiten prüfen
 
   // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
-    useEffect(() => {
+/*     useEffect(() => {
     // Remove old markers
     if (map) {
-     /*  map.eachLayer((layer) => {
+      map.eachLayer((layer) => {
         if (layer instanceof L.Marker) {
           map.removeLayer(layer);
         }
-      }); */
+      });
 
       // Add new markers
       locations.forEach((location) => {
@@ -302,10 +302,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           id: location.idPoi,
         });
 
-        /* marker.bindPopup(
+        marker.bindPopup(
           `<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
           { permanent: false, closeButton: true }
-        ); */
+        );
         marker.bindTooltip(
           `<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
           { permanent: false, direction: "top", offset: [0, -30] }
@@ -323,7 +323,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.addTo(map);
       });
     }
-  }, [map, locations, onLocationUpdate]); 
+  }, [map, locations, onLocationUpdate]);  */
 
   //------------------------------------------
   function parsePoint(pointString) {
@@ -549,7 +549,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   // minor-marker-icon-23.png
 
   // Marker hinzufügen für GisStationsStaticDistrict
-  useEffect(() => {
+ /*  useEffect(() => {
     // Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind
     if (!map || !oms) {
       console.error("Map or OMS is not initialized");
@@ -668,22 +668,202 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         ${statusInfo}<br>
       `);
       let LocID = station.IdLocation;
-      /* marker
+
-        .bindTooltip(
-          `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${LocID}</div>`,
-          {
-            permanent: true,
-            direction: "right",
-            opacity: 0,
-            offset: L.point({ x: 10, y: 0 }),
-          }
-        )
-        .addTo(GMA); */
     });
  
   }, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
 
-  //------------------------------------------
+  //------------------------------------------ */
+  //------------------------------------------ */
+  //useEffect zusammen von MySQL Daten bank und von APIs
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const responses = await Promise.all([
+          fetch(mapGisStationsStaticDistrictUrl),
+          fetch(mapGisStationsStatusDistrictUrl),
+          // Andere relevante API-Anfragen
+        ]);
+        const data = await Promise.all(responses.map(res => res.json()));
+  
+        if (data[0] && data[0].Points) {
+          setGisStationsStaticDistrict(data[0].Points);
+        } else {
+          console.error('Daten für GisStationsStaticDistrict nicht gefunden');
+          setGisStationsStaticDistrict([]);
+        }
+  
+        if (data[1] && data[1].Statis) {
+          setGisStationsStatusDistrict(data[1].Statis);
+        } else {
+          console.error('Daten für GisStationsStatusDistrict nicht gefunden');
+          setGisStationsStatusDistrict([]);
+        }
+  
+        // Weitere Datenverarbeitung...
+  
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten: ", error);
+        // Setzen Sie Zustände auf leere Arrays oder Fehlerzustände
+      }
+    };
+  
+    fetchData();
+  }, []);
+  
+  useEffect(() => {
+    if (!map) return;
+    map.eachLayer((layer) => {
+      if (layer instanceof L.Marker) {
+        map.removeLayer(layer);
+      }
+    });
+  
+    // Marker für lokale MySQL-Daten
+    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(
+        `<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+        { permanent: false, closeButton: true }
+      );
+      marker.bindTooltip(
+        `<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+        { permanent: false, direction: "top", offset: [0, -30] }
+      );
+
+      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);
+    });
+  
+    // Marker für GisStationsStaticDistrict
+    GisStationsStaticDistrict.forEach((station) => {
+      // Filter für Statusobjekte dieser spezifischen Station
+      const matchingStatuses = GisStationsStatusDistrict.filter(
+        (status) => status.IdLD === station.IdLD
+      );
+
+      const marker = L.marker([station.X, station.Y], {
+        icon: L.icon({
+          iconUrl: "default-icon.png", // Default, wird geändert
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          shadowSize: [41, 41],
+        }),
+      }).addTo(map);
+
+      // Popup beim Überfahren mit der Maus öffnen
+      marker.on("mouseover", function (e) {
+        this.openPopup();
+      });
+
+      // Popup schließen, wenn die Maus den Marker verlässt
+      marker.on("mouseout", function (e) {
+        this.closePopup();
+      });
+
+      // String-Zusammenstellung für das Popup-Infofenster
+      let statusInfo = matchingStatuses
+        .reverse()
+        .map(
+          (status) => `
+        <div class="flex items-center my-1">
+          <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
+          ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
+        </div>
+      `
+        )
+        .join("");
+
+      // Bestimmen des Icons basierend auf dem Status
+      let iconPath = getIconPath(
+        matchingStatuses[0]?.Na || "",
+        station.Icon,
+        marker
+      );
+
+      marker.setIcon(
+        L.icon({
+          iconUrl: iconPath,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          shadowSize: [41, 41],
+        })
+      );
+      // Check if the icon path includes 'critical' and initiate bouncing
+      if (
+        iconPath.includes("critical") ||
+        iconPath.includes("major") ||
+        iconPath.includes("minor") ||
+        iconPath.includes("system")
+      ) {
+        marker.setBouncingOptions({
+          bounceHeight: 15,
+          contractHeight: 12,
+          bounceSpeed: 52,
+          contractSpeed: 52,
+          shadowAngle: null,
+        });
+        marker.bounce(3);
+      }
+           // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
+           if (station.LD_Name === "GMA Littwin (TEST)") {
+            marker.bindTooltip(
+              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
+              {
+                permanent: true,
+                direction: "right",
+                opacity: 1, // Tooltip immer sichtbar
+                offset: L.point({ x: 10, y: 0 }),
+              }
+            ).addTo(GMA);
+          } else {
+            marker.bindTooltip(
+              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
+              {
+                permanent: false,
+                direction: "right",
+                opacity: 0,
+                offset: L.point({ x: 10, y: 0 }),
+              }
+            ).addTo(GMA);
+          }
+      // Marker zu OMS und der Karte hinzufügen
+      oms.addMarker(marker);
+      marker.addTo(map).bindPopup(`
+        <b>${station.LD_Name}</b><br>
+        ${station.Device}<br>
+        ${station.Area_Short} (${station.Area_Name})<br>
+        ${station.Location_Short} (${station.Location_Name})<br>
+        ${statusInfo}<br>
+      `);
+      let LocID = station.IdLocation;
+
+    });
+  }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
+  
+
+  //------------------------------------------ */
   let uniqueIdLDsData = [];
   let Tooltip = [];