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

add: http://localhost:3000/api/linesColorApi für Farbe der Linien

Browse Source
This commit is contained in:
ISA
2024-06-11 07:34:07 +02:00
parent c6fab5e84d
commit 06bde39617
2 changed files with 86 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/MapComponent.js
View File

@@ -48,6 +48,19 @@ const plusRoundIcon = L.icon({
});
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
/*
path.includes("critical") || // Priorität 1
path.includes("major") || // Priorität 2
path.includes("minor") || // Priorität 3
path.includes("system") // Priorität 4
*/
const priorityColors = {
1: "#ba0000", // High priority, red, critical
2: "#ed7b00", // Medium priority orange major
3: "#d1ca00", // priority minor senfgelb
4: "#8602ab", // priority system Violett
// 5: "#298a00", // normal priority green
};
const [menuItemAdded, setMenuItemAdded] = useState(false);
const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
@@ -71,6 +84,28 @@ 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;
@@ -134,8 +169,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const zoomTrigger = useRecoilValue(zoomTriggerState);
const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
//const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
// Create map layers
const TALAS = new L.layerGroup();
const ECI = new L.layerGroup();
@@ -540,9 +575,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//--------------------------------------------------------------------------------
function determinePriority(iconPath) {
if (iconPath.includes("critical")) return 1; // Highest priority
if (iconPath.includes("critical")) {
console.log(
"iconPath.includes('critical'):",
iconPath.includes("critical")
);
}
if (iconPath.includes("major")) return 2;
if (iconPath.includes("minor")) {
console.log("iconPath.includes('minor'):", iconPath.includes("minor"));
}
if (iconPath.includes("minor")) return 3;
if (iconPath.includes("system")) {
console.log("iconPath.includes('system'):", iconPath.includes("system"));
}
if (iconPath.includes("system")) return 4;
if (iconPath.includes("system")) {
console.log("iconPath.includes('system'):", iconPath.includes("system"));
}
return 5; // Default priority (lowest)
}
// Daten von einer externen Quelle laden
@@ -1706,7 +1757,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const toggleLayer = (isVisible) => {
if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
const polyline = L.polyline(linePositions, { color: "red" }).addTo(
console.log("talasMarkers", talasMarkers);
console.log("talasMarkers.color", talasMarkers.color);
const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
//Linien-Farbe /Farbe für die Strecke zwischen den Markern
TALAS
);
@@ -2085,7 +2138,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
linePositions.forEach((line) => {
if (line.length > 0) {
// Create a polyline for each set of coordinates
const polyline = L.polyline(line, { color: "red" }).addTo(map);
const polyline = L.polyline(line, { color: lineColor }).addTo(map);
// Add start circle marker
L.circleMarker(line[0], {