Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: Start-marker and end-marker defferent color

Browse Source
This commit is contained in:
ISA
2024-06-26 10:56:52 +02:00
parent 09364290bc
commit b3eb6b8f12
1 changed files with 30 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/MapComponent.js
View File

@@ -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: "<div style='background-color:#298a00;border-radius:50%;width:10px;height:10px;'></div>",
iconSize: [25, 25],
iconAnchor: [5, 5],
});
const startIcon = L.divIcon({
className: "custom-start-icon",
html: "<div style='background-color:#000000;border-radius:50%;width:10px;height:10px;'></div>", // Rot für den Startpunkt
iconSize: [25, 25],
iconAnchor: [5, 5],
});
const endIcon = L.divIcon({
className: "custom-end-icon",
html: "<div style='background-color:#ffffff;border-radius:50%;width:10px;height:10px;'></div>", // 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);