diff --git a/components/MapComponent.js b/components/MapComponent.js index 665d3bc3d..38bbd96ee 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2215,13 +2215,27 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, [lineColors]); //--------------------------------------------------------- - // Custom circle icon for draggable markers + // Custom circle icon for draggable markers on polylines const circleIcon = L.divIcon({ className: "custom-div-icon", html: "
", iconSize: [25, 25], iconAnchor: [5, 5], }); + const startIcon = L.divIcon({ + className: "custom-start-icon", + html: "
", // Rot für den Startpunkt + iconSize: [25, 25], + iconAnchor: [5, 5], + }); + + const endIcon = L.divIcon({ + className: "custom-end-icon", + html: "
", // Blau für den Endpunkt + iconSize: [25, 25], + iconAnchor: [5, 5], + }); + //----------------------- Update lines---------------------------------- const [lineStatusData, setLineStatusData] = useState([]); const [linesData, setLinesData] = useState([]); @@ -2276,8 +2290,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { 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: circleIcon, + icon: icon, draggable: true, }).addTo(map); @@ -2297,50 +2318,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } ); - updatedPolyline.on("mouseover", () => { - updatedPolyline.setStyle({ weight: 10 }); - updatedPolyline.bringToFront(); - }); - updatedPolyline.on("mouseout", () => { - updatedPolyline.setStyle({ weight: 5 }); - }); + updatedPolyline.on("mouseover", () => + updatedPolyline.setStyle({ weight: 10 }).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ühren Sie Ihre API-Aufrufe hier durch, falls notwendig }); lineMarkers.push(marker);