nodeMap/components/MapCoomonentGPT.js

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 });
  });
}