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

feat: two lines with different colors, based on module id from API-Endpoint-function, next step, move lines by mouse drag

Browse Source
This commit is contained in:
ISA
2024-06-14 08:44:19 +02:00
parent 13c5cc26e9
commit fb116a5007
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/MapComponent.js
View File

@@ -1731,21 +1731,28 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useEffect(() => {
if (!map || !talasMarkers) return;
const someLineCoordinatesforTalas = [
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
];
const toggleLayer = (isVisible) => {
if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
//console.log("talasMarkers", talasMarkers);
//console.log("talasMarkers.color", talasMarkers.color);
talasMarkers.forEach((marker) => map.removeLayer(marker));
/* const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
//talasMarkers.forEach((marker) => map.removeLayer(marker));
console.log("talasMarkers linePositions ", linePositions);
const polyline = L.polyline(someLineCoordinatesforTalas, {
color: "green",
}).addTo(
//Linien-Farbe /Farbe für die Strecke zwischen den Markern
TALAS
); */
}
/* else {
);
} else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
} */
}
};
// Apply visibility state to the TALAS layer
@@ -2140,16 +2147,26 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
if (lineData.coordinates.length > 0) {
const color = lineColors[lineData.idModul] || "#000000"; // Standardfarbe schwarz, wenn keine Farbe gefunden
const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
L.circleMarker(lineData.coordinates[0], {
//---------------------------------------------------------
// Erstellt einen verschiebbaren Marker
const draggableMarker = L.circleMarker(lineData.coordinates[0], {
radius: 5,
fillColor: "#0000FF",
color: "#0000FF",
fillColor: "#00FFFF",
color: "#00FFFF",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
draggable: true, // Ermöglicht das Verschieben des Markers
}).addTo(map);
// Event Listener für 'dragend' um die neue Position zu erfassen
draggableMarker.on("dragend", function (e) {
const newLat = e.target.getLatLng().lat;
const newLng = e.target.getLatLng().lng;
// Hier können Sie nun die neuen Koordinaten verarbeiten, z.B. um sie zu speichern
console.log("Neue Position: ", newLat, newLng);
});
//---------------------------------------------------------
L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], {
radius: 5,
fillColor: "#0000FF",
@@ -2174,6 +2191,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, [map, linePositions, lineColors]);
//---------------------------------------------------------
//---------------------------------------------------------
return (
<>
<ToastContainer />