diff --git a/components/MapComponent.js b/components/MapComponent.js index 1c75a6c6a..16695c27c 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2285,8 +2285,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { console.log("lineData:", linesData); }, [lineStatusData, linesData]); //--------------------------------------------------------- - // Function to initialize markers and polylines - // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte useEffect(() => { if (!map) return; @@ -2306,6 +2304,7 @@ 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, @@ -2318,6 +2317,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { 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); @@ -2378,15 +2378,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), + this.bindContextMenu({ + contextmenuItems: [ + { + 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(); + this.unbindContextMenu(); }); lineMarkers.push(marker); @@ -2428,19 +2432,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } ); - /* polyline.on("mouseover", () => { - polyline.setStyle({ weight: 10 }); - polyline.bringToFront(); - console.log( - `polyline with idLD : ${lineData.idLD}, idModul: ${lineData.idModul}`, - "lineData : ", - lineData - ); - }); */ - /* polyline.on("mouseout", () => { - polyline.setStyle({ weight: 5 }); - }); */ - newPolylines.push(polyline); newMarkers.push(...lineMarkers); }); @@ -2450,7 +2441,60 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, [map, linePositions, lineColors, tooltipContents]); //--------------------------------------------------------- - //--------------------------------------------------------- + //-------------------------Funktionen-------------------------------- + + function addMarkerAt(e, lineData) { + const newCoord = [e.latlng.lat, e.latlng.lng]; + lineData.coordinates.push(newCoord); // neuen Punkt hinzufügen + drawPolyline(lineData); // Polylinie neu zeichnen + + const marker = L.marker(newCoord, { draggable: true }).addTo(map); + marker.on("drag", (event) => { + updateMarkerPosition(event.target.getLatLng(), lineData, marker); + }); + } + + function drawPolyline(lineData) { + if (lineData.polyline) map.removeLayer(lineData.polyline); + lineData.polyline = L.polyline(lineData.coordinates, { + color: "red", + }).addTo(map); + } + + 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 + saveLineData(lineData); // Speichern der neuen Linienkoordinaten + } + } + + function redrawPolyline(lineData) { + const polyline = L.polyline(lineData.coordinates, { + color: lineColors[lineData.idModul] || "#000000", + }).addTo(map); + + polyline.bindTooltip( + tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt", + { + permanent: false, + direction: "auto", + } + ); + + polyline.on("mouseover", () => { + polyline.setStyle({ weight: 10 }); + polyline.bringToFront(); + }); + polyline.on("mouseout", () => { + polyline.setStyle({ weight: 5 }); + }); + } + function saveLineData(lineData) { fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", { method: "POST", @@ -2477,31 +2521,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }); } - function addMarkerAt(e, lineData) { - const newCoord = [e.latlng.lat, e.latlng.lng]; - lineData.coordinates.push(newCoord); // neuen Punkt hinzufügen - drawPolyline(lineData); // Polylinie neu zeichnen + function insertNewMarker(closestPoints, newPoint, lineData, map) { + const newMarker = L.marker(newPoint, { draggable: true }).addTo(map); + lineData.coordinates.splice(closestPoints[2], 0, [ + newPoint.lat, + newPoint.lng, + ]); - const marker = L.marker(newCoord, { draggable: true }).addTo(map); - marker.on("drag", (event) => { - updateMarkerPosition(event.target.getLatLng(), lineData, marker); + // Hier direkt speichern nach Einfügen + saveLineData(lineData); + + redrawPolyline(lineData); + + // Event-Listener für das Verschieben des Markers hinzufügen + newMarker.on("dragend", () => { + updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker); + saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben }); } - function drawPolyline(lineData) { - if (lineData.polyline) map.removeLayer(lineData.polyline); - lineData.polyline = L.polyline(lineData.coordinates, { - color: "red", - }).addTo(map); - } - function updateMarkerPosition(newLatLng, lineData, marker) { const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()) ); if (index !== -1) { lineData.coordinates[index] = [newLatLng.lat, newLatLng.lng]; - redrawPolyline(lineData, map); + redrawPolyline(lineData); saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben } } @@ -2523,46 +2568,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return closestPair; } - function insertNewMarker(closestPair, newPoint, lineData, map) { - const newMarker = L.marker(newPoint, { draggable: true }).addTo(map); - lineData.coordinates.splice(closestPair[2], 0, [ - newPoint.lat, - newPoint.lng, - ]); - - // Hier direkt speichern nach Einfügen - saveLineData(lineData); - - redrawPolyline(lineData, map); - - // Event-Listener für das Verschieben des Markers hinzufügen - newMarker.on("dragend", () => { - updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker); - saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben - }); - } - function redrawPolyline(lineData, map) { - if (lineData.polyline) map.removeLayer(lineData.polyline); - lineData.polyline = L.polyline(lineData.coordinates, { - color: "red", // Oder eine andere logische Farbe - }).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 - } - } - //--------------------------------------------------------- //---------------------------------------------------------