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

components/MapComponent.js

@@ -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 = "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 = "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], {

pages/api/linesColorApi.js

@@ -0,0 +1,29 @@
+// /pages/api/linesColorApi.js
+// http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict
+
+export default function handler(req, res) {
+  const linesColor = {
+    Statis: [
+      {
+        IdModul: 1,
+        Na: "system",
+        Le: 4,
+        Co: "#00FFFF",
+        Me: "Eingang DE04 kommend",
+        Feld: 3,
+        Icon: 0,
+      },
+      {
+        IdModul: 3,
+        Na: "system",
+        Le: 4,
+        Co: "#FF00FF",
+        Me: "Eingang DE05 kommend",
+        Feld: 3,
+        Icon: 0,
+      },
+    ],
+  };
+
+  res.status(200).json({ linesColor });
+}