diff --git a/components/MapComponent.js b/components/MapComponent.js index ec6f6f8e7..1c75a6c6a 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2306,10 +2306,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } 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", () => { @@ -2374,6 +2376,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }); }); + // Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist + marker.on("mouseover", function () { + this.options.contextmenuItems.push({ + text: "Marker entfernen", + callback: () => removeMarker(marker, lineData), + }); + }); + + // Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt + marker.on("mouseout", function () { + this.options.contextmenuItems.pop(); + }); + lineMarkers.push(marker); }); @@ -2533,6 +2548,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }).addTo(map); } + //--------------------------------------------------------- + //----------------- delete markers and polylines ------------------- + + 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, map); // Neuzeichnen der Polylinie + marker.remove(); // Entferne den Marker von der Karte + saveLineData(lineData); // Speichern der neuen Linienkoordinaten + } + } + //--------------------------------------------------------- //---------------------------------------------------------