feat: entfernen von Platzhalter-Icon und stattdessen CircleIcon hinzufügen in MapComponents bei insertNewMarker

components/MapComponent.js

@@ -2277,6 +2277,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     console.log("lineData:", linesData);
   }, [lineStatusData, linesData]);
   //---------------------------------------------------------
+  const [newPoint, setNewPoint] = useState(null);
+  const [newCoords, setNewCoords] = useState(null);
+  const [tempMarker, setTempMarker] = useState(null);
+
   useEffect(() => {
     if (!map) return;
 
@@ -2307,6 +2311,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
         marker.on("dragend", () => {
           const newCoords = marker.getLatLng();
+          setNewCoords(newCoords); // Aktualisieren Sie den Zustand
           const newCoordinates = [...lineData.coordinates];
           newCoordinates[index] = [newCoords.lat, newCoords.lng];
 
@@ -2403,12 +2408,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           {
             text: "Marker hier hinzufügen",
             callback: (e) => {
+              if (tempMarker) {
+                tempMarker.remove(); // Entfernen des Platzhalter-Icons
+              }
+              //------------
               const newPoint = e.latlng;
+              setNewPoint(newPoint); // Aktualisieren Sie den Zustand
               const closestPoints = findClosestPoints(
                 lineData.coordinates,
                 newPoint
               );
               insertNewMarker(closestPoints, newPoint, lineData, map);
+              redrawPolyline(lineData);
             },
           },
         ],
@@ -2438,7 +2449,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents]);
+  }, [
+    map,
+    linePositions,
+    lineColors,
+    tooltipContents,
+    newPoint,
+    newCoords,
+    tempMarker,
+  ]);
 
   //---------------------------------------------------------
   //-------------------------Funktionen--------------------------------
@@ -2522,7 +2541,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }
 
   function insertNewMarker(closestPoints, newPoint, lineData, map) {
-    const newMarker = L.marker(newPoint, { draggable: true }).addTo(map);
+    const newMarker = L.marker(newPoint, {
+      icon: circleIcon,
+      draggable: true,
+    }).addTo(map);
     lineData.coordinates.splice(closestPoints[2], 0, [
       newPoint.lat,
       newPoint.lng,

components/MapCoomonentGPT.js

@@ -0,0 +1,237 @@
+const [newPoint, setNewPoint] = useState(null);
+const [newCoords, setNewCoords] = useState(null);
+const [tempMarker, setTempMarker] = useState(null); // Hinzufügen eines Zustands für den temporären Marker
+
+useEffect(() => {
+  if (!map) return;
+
+  // Entfernen alter Marker und Polylines
+  markers.forEach((marker) => marker.remove());
+  polylines.forEach((polyline) => polyline.remove());
+
+  const newMarkers = [];
+  const newPolylines = [];
+
+  linePositions.forEach((lineData, lineIndex) => {
+    const lineMarkers = [];
+    lineData.coordinates.forEach((coord, index) => {
+      let icon = circleIcon; // Standard-Icon für mittlere Punkte
+      if (index === 0) {
+        icon = startIcon; // Start-Icon für den ersten Punkt
+      } else if (index === lineData.coordinates.length - 1) {
+        icon = endIcon; // End-Icon für den letzten Punkt
+      }
+
+      const marker = L.marker(coord, {
+        icon: icon,
+        draggable: true,
+        contextmenu: true,
+        contextmenuInheritItems: false,
+        contextmenuItems: [], // Starte mit einem leeren Menü
+      }).addTo(map);
+
+      marker.on("dragend", () => {
+        const newCoords = marker.getLatLng();
+        setNewCoords(newCoords); // Aktualisieren Sie den Zustand
+        const newCoordinates = [...lineData.coordinates];
+        newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
+        const updatedPolyline = L.polyline(newCoordinates, {
+          color: lineColors[lineData.idModul] || "#000000",
+        }).addTo(map);
+
+        updatedPolyline.bindTooltip(
+          tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
+          {
+            permanent: false,
+            direction: "auto",
+          }
+        );
+
+        updatedPolyline.on("mouseover", () => {
+          updatedPolyline.setStyle({ weight: 10 });
+          updatedPolyline.bringToFront();
+        });
+        updatedPolyline.on("mouseout", () => {
+          updatedPolyline.setStyle({ weight: 5 });
+        });
+
+        newPolylines[lineIndex].remove();
+        newPolylines[lineIndex] = updatedPolyline;
+        lineData.coordinates = newCoordinates;
+
+        const requestData = {
+          idModul: lineData.idModul,
+          idLD: lineData.idLD,
+          newCoordinates,
+        };
+
+        console.log("Sending to API:", requestData);
+        // API-Aufruf, um die neuen Koordinaten zu speichern
+        fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(requestData),
+        })
+          .then((response) => {
+            if (!response.ok) {
+              return response.json().then((data) => {
+                throw new Error(data.error || "Unbekannter Fehler");
+              });
+            }
+            return response.json();
+          })
+          .then((data) => {
+            console.log("Koordinaten erfolgreich aktualisiert:", data);
+          })
+          .catch((error) => {
+            console.error(
+              "Fehler beim Aktualisieren der Koordinaten:",
+              error.message
+            );
+          });
+      });
+
+      // Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist
+      marker.on("mouseover", function () {
+        this.bindContextMenu({
+          contextmenuItems: [
+            {
+              text: "Marker entfernen",
+              callback: () => {
+                const newCoords = marker.getLatLng();
+                const newCoordinates = [...lineData.coordinates];
+                newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
+                removeMarker(marker, lineData);
+                newPolylines[lineIndex].remove();
+                lineData.coordinates = newCoordinates;
+              },
+            },
+          ],
+        });
+      });
+
+      // Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt
+      marker.on("mouseout", function () {
+        this.unbindContextMenu();
+      });
+
+      lineMarkers.push(marker);
+    });
+
+    const polyline = L.polyline(lineData.coordinates, {
+      color: lineColors[lineData.idModul] || "#000000",
+      contextmenu: true,
+      contextmenuItems: [
+        {
+          text: "Marker hier hinzufügen",
+          callback: (e) => {
+            if (tempMarker) {
+              tempMarker.remove(); // Entfernen des Platzhalter-Icons
+            }
+            const newPoint = e.latlng;
+            setNewPoint(newPoint); // Aktualisieren Sie den Zustand
+            const closestPoints = findClosestPoints(
+              lineData.coordinates,
+              newPoint
+            );
+            insertNewMarker(closestPoints, newPoint, lineData, map);
+            redrawPolyline(lineData);
+          },
+        },
+      ],
+    }).addTo(map);
+
+    polyline.on("mouseover", (e) => {
+      // Optional: Visualisiere, dass die Linie interaktiv ist
+      polyline.setStyle({ color: "blue", weight: 10 });
+    });
+
+    polyline.on("mouseout", (e) => {
+      // Setze die ursprüngliche Farbe zurück
+      polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
+    });
+
+    polyline.bindTooltip(
+      tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
+      {
+        permanent: false,
+        direction: "auto",
+      }
+    );
+
+    newPolylines.push(polyline);
+    newMarkers.push(...lineMarkers);
+  });
+
+  setMarkers(newMarkers);
+  setPolylines(newPolylines);
+}, [
+  map,
+  linePositions,
+  lineColors,
+  tooltipContents,
+  newPoint,
+  newCoords,
+  tempMarker,
+]);
+
+function insertNewMarker(closestPoints, newPoint, lineData, map) {
+  const newMarker = L.marker(newPoint, {
+    icon: circleIcon,
+    draggable: true,
+  }).addTo(map);
+  lineData.coordinates.splice(closestPoints[2], 0, [
+    newPoint.lat,
+    newPoint.lng,
+  ]);
+
+  newMarker.on("dragend", () => {
+    const newCoords = newMarker.getLatLng();
+    setNewCoords(newCoords);
+    const newCoordinates = [...lineData.coordinates];
+    newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
+    lineData.coordinates = newCoordinates;
+    redrawPolyline(lineData);
+  });
+
+  setNewCoords(null); // Setzen Sie newCoords auf null, um den Platzhalter-Icon zu entfernen
+  setTempMarker(null); // Entfernen Sie den temporären Marker
+}
+
+function removeMarker(marker, lineData) {
+  const index = lineData.coordinates.findIndex((coord) =>
+    L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
+  );
+  if (index !== -1) {
+    lineData.coordinates.splice(index, 1); // Entferne die Koordinaten des Markers
+    redrawPolyline(lineData); // Neuzeichnen der Polylinie
+    marker.remove(); // Entferne den Marker von der Karte
+  }
+}
+
+function redrawPolyline(lineData) {
+  if (lineData.polyline) map.removeLayer(lineData.polyline);
+  lineData.polyline = L.polyline(lineData.coordinates, {
+    color: lineColors[lineData.idModul] || "#000000",
+  }).addTo(map);
+
+  lineData.polyline.bindTooltip(
+    tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
+    {
+      permanent: false,
+      direction: "auto",
+    }
+  );
+
+  lineData.polyline.on("mouseover", () => {
+    lineData.polyline.setStyle({ weight: 10 });
+    lineData.polyline.bringToFront();
+  });
+  lineData.polyline.on("mouseout", () => {
+    lineData.polyline.setStyle({ weight: 5 });
+  });
+}