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

feat: Implement dynamic line coloring based on module IDs

Browse Source 
Enhanced the map visualization by implementing dynamic line coloring, assigning unique colors to polyline elements based on their corresponding module IDs. This update fetches color settings from the linesColorAPI and applies them to the line drawings on the map. The change aims to improve the visual distinction between different lines, facilitating easier identification and analysis for users.
This commit is contained in:
ISA
2024-06-13 14:01:14 +02:00
parent 06bde39617
commit 820b908873
1 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/MapComponent.js
View File

@@ -84,28 +84,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setSelectedPoi(poiData); // poiData should be the data of the selected POI
// Open the modal or any other logic
};
const [lineColor, setLineColor] = useState();
//-------------------------------------------linesColorAPI
useEffect(() => {
const fetchlinesColor = async () => {
try {
const response = await fetch("/api/linesColorApi");
const data = await response.json();
console.log("linesColorAPI:", data);
data.linesColor.Statis.forEach((item) => {
if (item.IdModul === 1) {
console.log("item color in if: ", item.Co);
setLineColor(item.Co);
}
//console.log("item color nicht in if: ", item);
});
} catch (error) {
console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
}
};
fetchlinesColor();
}, []);
//-------------------------------------------
useEffect(() => {
const params = new URL(window.location.href).searchParams;
@@ -1757,15 +1735,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
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);
const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
//console.log("talasMarkers", talasMarkers);
//console.log("talasMarkers.color", talasMarkers.color);
talasMarkers.forEach((marker) => map.removeLayer(marker));
/* const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
//Linien-Farbe /Farbe für die Strecke zwischen den Markern
TALAS
);
} else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
); */
}
/* else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
} */
};
// Apply visibility state to the TALAS layer
@@ -2097,11 +2077,36 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
]);
//LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
const [lineColors, setLineColors] = useState({});
// API-Aufruf, um Farben der Linien abzurufen
useEffect(() => {
const fetchLinesColor = async () => {
try {
const response = await fetch("/api/linesColorApi");
const data = await response.json();
const colorsByModule = {};
data.linesColor.Statis.forEach((item) => {
colorsByModule[item.IdModul] = item.Co;
});
setLineColors(colorsByModule);
} catch (error) {
console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
}
};
fetchLinesColor();
}, []);
// Überwachen des lineColors Zustandes
useEffect(() => {
console.log("Aktualisierte lineColors", lineColors);
}, [lineColors]);
const [linePositions, setLinePositions] = useState([]);
useEffect(() => {
const endpoint = "/api/readGisLines";
fetch(endpoint)
.then((response) => {
if (!response.ok) {
@@ -2110,21 +2115,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return response.json();
})
.then((data) => {
console.log("readGisLines API Response:", data);
if (!Array.isArray(data)) {
throw new Error("Data is not an array");
}
const newLinePositions = data.map((item) => {
if (item.points && Array.isArray(item.points)) {
return item.points.map((point) => [point.x, point.y]);
return {
coordinates: item.points.map((point) => [point.x, point.y]),
idModul: item.idModul,
};
} else {
throw new Error("Points missing or not an array");
}
});
console.log("Transformed Line Positions:", newLinePositions);
setLinePositions(newLinePositions);
})
.catch((error) => {
@@ -2132,16 +2132,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
});
}, []);
// Karte-Linien Zeichnen
useEffect(() => {
if (!map) return;
linePositions.forEach((line) => {
if (line.length > 0) {
// Create a polyline for each set of coordinates
const polyline = L.polyline(line, { color: lineColor }).addTo(map);
linePositions.forEach((lineData) => {
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);
// Add start circle marker
L.circleMarker(line[0], {
L.circleMarker(lineData.coordinates[0], {
radius: 5,
fillColor: "#0000FF",
color: "#0000FF",
@@ -2150,8 +2150,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
fillOpacity: 0.8,
}).addTo(map);
// Add end circle marker
L.circleMarker(line[line.length - 1], {
L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], {
radius: 5,
fillColor: "#0000FF",
color: "#0000FF",
@@ -2160,9 +2159,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
fillOpacity: 0.8,
}).addTo(map);
// Add yellow circle markers for intermediate points
for (let i = 1; i < line.length - 1; i++) {
L.circleMarker(line[i], {
for (let i = 1; i < lineData.coordinates.length - 1; i++) {
L.circleMarker(lineData.coordinates[i], {
radius: 3,
fillColor: "#FFFF00",
color: "#FFFF00",
@@ -2173,7 +2171,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
}
});
}, [map, linePositions]);
}, [map, linePositions, lineColors]);
//---------------------------------------------------------
return (