edit: Linien und Markers dazwischen aktualisieren beim Position verändern

components/MapComponent.js

@@ -2099,80 +2099,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   ]);
   //---------------------------------------------------------
   //LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
-  const [lineColors, setLineColors] = useState({});
-
-  // API-Aufruf, um Farben der Linien abzurufen
-  /*   useEffect(() => {
-    const fetchLinesColor = async () => {
-      try {
-        const response = await fetch(webserviceGisLinesStatusUrl); //in config.js definiert
-        const data = await response.json();
-        //console.log("data.Statis: ", data);
-        const colorsByModule = {};
-        data.Statis.forEach((item) => {
-          colorsByModule[item.Modul] = item.PrioColor;
-          console.log(
-            "item.Modul",
-            item.Modul,
-            "item.PrioColor",
-            item.PrioColor,
-            "item.IdLD",
-            item.IdLD
-          );
-        });
-        setLineColors(colorsByModule);
-        console.log("colorsByModule", colorsByModule);
-      } catch (error) {
-        console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
-      }
-    };
-    fetchLinesColor();
-  }, []); */
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response1 = await fetch(webserviceGisLinesStatusUrl);
-        const data1 = await response1.json();
-        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
-        const data2 = await response2.json();
-
-        const colorsByModule = {};
-        data1.Statis.forEach((stat) => {
-          const matchingLine = data2.find(
-            (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
-          );
-          if (matchingLine) {
-            colorsByModule[matchingLine.idModul] = stat.PrioColor;
-            console.log("Übereinstimmung gefunden für", stat);
-            console.log(
-              "stat color",
-              stat.PrioColor,
-              "matchingLine",
-              matchingLine.idModul
-            );
-            setLineColors(colorsByModule);
-            console.log("colorsByModule: ", colorsByModule);
-            console.log("lineColors: ", lineColors);
-          } else {
-            //console.log("Keine Übereinstimmung gefunden für", stat);
-          }
-        });
-      } catch (error) {
-        console.error("Error fetching data:", error);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  // Überwachen des lineColors Zustandes
-  useEffect(() => {
-    //console.log("Aktualisierte lineColors", lineColors);
-  }, [lineColors]);
-
   const [linePositions, setLinePositions] = useState([]);
-
+  // ------------Linien zeichnen----------------
   useEffect(() => {
     const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
     fetch(endpoint)
@@ -2199,6 +2127,52 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         console.error("Error fetching data:", error.message);
       });
   }, []);
+  //--------------------------- Linien färben ------------------------------
+  const [lineColors, setLineColors] = useState({});
+
+  // API-Aufruf, um Farben der Linien abzurufen
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
+        const data2 = await response2.json();
+
+        const colorsByModule = {};
+        data1.Statis.forEach((stat) => {
+          const matchingLine = data2.find(
+            (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
+          );
+          if (matchingLine) {
+            colorsByModule[matchingLine.idModul] = stat.PrioColor;
+            //console.log("Übereinstimmung gefunden für", stat);
+            /*   console.log(
+              "stat color",
+              stat.PrioColor,
+              "matchingLine",
+              matchingLine.idModul
+            ); */
+            setLineColors(colorsByModule);
+            //console.log("colorsByModule: ", colorsByModule);
+            //console.log("lineColors: ", lineColors);
+          } else {
+            //console.log("Keine Übereinstimmung gefunden für", stat);
+          }
+        });
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // Überwachen des lineColors Zustandes
+  useEffect(() => {
+    //console.log("Aktualisierte lineColors", lineColors);
+  }, [lineColors]);
 
   //---------------------------------------------------------
   // Custom circle icon for draggable markers
@@ -2208,77 +2182,61 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     iconSize: [25, 25],
     iconAnchor: [5, 5],
   });
-  //---------------------------------------------------------
+  //----------------------- Update lines----------------------------------
   // Function to initialize markers and polylines
+  // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
+  const [polylines, setPolylines] = useState([]);
+  const [markers, setMarkers] = useState([]);
+
   useEffect(() => {
     if (!map) return;
 
-    linePositions.forEach((lineData) => {
+    // Entfernen alter Marker und Polylines
-      const markers = [];
+    markers.forEach((marker) => marker.remove());
-      const color = lineColors[lineData.idModul] || "#000000"; // Default black if no color found
+    polylines.forEach((polyline) => polyline.remove());
 
-      // Create a marker for each coordinate
+    const newMarkers = [];
-      const polylinePoints = lineData.coordinates.map((coord) => {
+    const newPolylines = [];
+
+    linePositions.forEach((lineData, lineIndex) => {
+      const lineMarkers = [];
+      const polylinePoints = lineData.coordinates.map((coord, index) => {
         const marker = L.marker(coord, {
           icon: circleIcon,
           draggable: true,
         }).addTo(map);
-        markers.push(marker);
+
+        marker.on("dragend", () => {
+          const newCoords = marker.getLatLng();
+          const newCoordinates = [...lineData.coordinates];
+          newCoordinates[index] = [newCoords.lat, newCoords.lng];
+          const updatedPolyline = L.polyline(newCoordinates, {
+            color: lineColors[lineData.idModul] || "#000000",
+          }).addTo(map);
+
+          // Ersetzen der alten Polyline durch die neue
+          newPolylines[lineIndex].remove();
+          newPolylines[lineIndex] = updatedPolyline;
+          lineData.coordinates = newCoordinates; // Aktualisieren der Koordinaten im Zustand
+
+          // Optional: Koordinaten auf dem Server aktualisieren
+          // ...
+        });
+
+        lineMarkers.push(marker);
         return marker;
       });
 
-      // Draw polyline
+      const polyline = L.polyline(lineData.coordinates, {
-      const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
+        color: lineColors[lineData.idModul] || "#000000",
-
+      }).addTo(map);
-      // Add mouseover and mouseout events to change the polyline width
+      newPolylines.push(polyline);
-      polyline.on("mouseover", () => {
+      newMarkers.push(...lineMarkers);
-        polyline.setStyle({ weight: 8 }); // Increase width on hover
-        polyline.bringToFront(); // Bring polyline to the front on hover
-      });
-
-      polyline.on("mouseout", () => {
-        polyline.setStyle({ weight: 5 }); // Reset width when not hovered (default width can be adjusted)
-      });
-      //---------------------------
-      // Function to update the polyline when markers are dragged
-      markers.forEach((marker, index) => {
-        marker.on("dragend", () => {
-          const newCoords = marker.getLatLng();
-          lineData.coordinates[index] = [newCoords.lat, newCoords.lng];
-          polyline.setLatLngs(lineData.coordinates);
-
-          // Senden der aktualisierten Koordinaten an den Server
-          fetch("/api/talas_v5_DB/gisLines/updateGisLines", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              idModul: lineData.idModul,
-              newCoordinates: lineData.coordinates,
-            }),
-          })
-            .then((response) => {
-              if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-              }
-              return response.json();
-            })
-            .then((data) => {
-              console.log("Update erfolgreich:", data);
-            })
-            .catch((error) => {
-              console.error("Error updating data:", error.message);
-            });
-        });
-      });
-      //---------------------------
-
-      // Fit map to show all markers and polylines
-      const group = new L.featureGroup([...markers, polyline]);
-      // map.fitBounds(group.getBounds().pad(0.5));
     });
-  }, [map, linePositions, lineColors]); // Run this effect when `map` is ready
+
+    setMarkers(newMarkers);
+    setPolylines(newPolylines);
+  }, [map, linePositions, lineColors]); // Achten Sie darauf, dass dieser Effekt läuft, wenn sich `map`, `linePositions` oder `lineColors` ändern
 
   //---------------------------------------------------------
   //---------------------------------------------------------