Wenn in der Tabelle location_device in der Spalte active = 0 steht wird die TALAS-Meldestation auf der Karte nicht mehr als CPL angezeigt.

utils/createAndSetDevices.js

@@ -5,8 +5,8 @@ import L from "leaflet";
 import "leaflet.smooth_marker_bouncing";
 import { toast } from "react-toastify";
 import * as config from "../config/config.js";
-import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
+import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
-import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand
+import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
 
 // Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
 const determinePriority = (iconPath, priorityConfig) => {
@@ -21,103 +21,103 @@ const determinePriority = (iconPath, priorityConfig) => {
 // Funktion zum Erstellen und Setzen von Markern
 export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
   try {
-    // Zähler für externe API-Aufrufe in localStorage speichern
+    // API-Aufrufe zählen
     let requestCount = localStorage.getItem("gisStationsStaticRequestCount-createDevice") || 0;
     requestCount++;
     localStorage.setItem("gisStationsStaticRequestCount-createDevice", requestCount);
-    //console.log(`config.mapGisStationsStaticDistrictUrl in  createAndSetDevice wurde ${requestCount} Mal aufgerufen.`);
 
     const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
     const jsonResponse = await response1.json();
     const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
     const statusResponse = await response2.json();
-    const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
-    const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
+    if (!jsonResponse.Points || !statusResponse.Statis) {
+      console.error("Fehlende Daten in API-Response!");
+      return;
+    }
 
-    if (jsonResponse.Points && statusResponse.Statis) {
+    console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
-      console.log("jsonResponse.Points: ", jsonResponse.Points);
-      console.log("statusResponse.Statis: ", statusResponse.Statis);
-      const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
-      let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
-        const statis = statisMap.get(station.IdLD);
-        const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
 
-        const priority = determinePriority(iconPath, priorityConfig);
+    // Filter: Nur Stationen mit `Active === 1`
-        const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
+    const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
 
-        const marker = L.marker([station.X, station.Y], {
+    console.log("🔍 Gefilterte aktive Stationen:", activeStations.length);
-          icon: L.icon({
-            iconUrl: iconPath,
-            iconSize: [25, 41],
-            iconAnchor: [12, 41],
-            popupAnchor: [1, -34],
-          }),
-          areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
-          link: station.Link,
-          zIndexOffset: zIndexOffset,
-        });
 
-        // Deaktiviere Polyline-Ereignisse beim Überfahren des Markers
+    const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
 
-        // Verwende das `contextmenu`-Ereignis für den Rechtsklick
+    let markersData = activeStations.map((station) => {
+      const statis = statisMap.get(station.IdLD);
+      const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
 
-        marker.on("contextmenu", function (event) {
+      const priority = determinePriority(iconPath, priorityConfig);
-          if (event && event.preventDefault) {
+      const zIndexOffset = 100 * (5 - priority);
-            event.preventDefault(); // Verhindert das Standard-Kontextmenü
-          }
-          //setPolylineEventsDisabled(true);
-          //disablePolylineEvents(window.polylines);
-          this.openPopup();
-        });
 
-        document.addEventListener("mouseout", function (event) {
+      const marker = L.marker([station.X, station.Y], {
-          if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
+        icon: L.icon({
-            //setPolylineEventsDisabled(false);
+          iconUrl: iconPath,
-            enablePolylineEvents(window.polylines, window.lineColors);
+          iconSize: [25, 41],
-          }
+          iconAnchor: [12, 41],
-        });
+          popupAnchor: [1, -34],
-        marker.on("mouseout", function () {
+        }),
-          this.closePopup();
+        title: station.LD_Name,
-        });
+        contextmenu: true,
-
+        data: { Active: station.Active }, // Speichere Active-Wert für spätere Verwendung
-        // Überprüfe, ob die bounce-Funktion verfügbar ist und verwende sie
+        zIndexOffset: zIndexOffset,
-        if (typeof marker.bounce === "function" && statis) {
-          marker.on("add", () => marker.bounce(3));
-        }
-
-        const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
-          .reverse()
-          .map(
-            (status) => `
-              <div class="flex items-center my-1">
-                <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
-                ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
-              </div>
-            `
-          )
-          .join("");
-
-        marker.bindPopup(`
-            <div class="bg-white rounded-lg">
-              <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
-              <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
-              <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
-              <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
-              <div class="mt-2">${statusInfo}</div>
-            </div>
-          `);
-
-
-        return marker;
       });
 
-      setMarkersFunction(markersData);
+      marker.on("mouseover", function () {
-    }
+        this.openPopup();
+      });
+
+      marker.on("contextmenu", function (event) {
+        if (event && event.preventDefault) event.preventDefault();
+        this.openPopup();
+      });
+
+      document.addEventListener("mouseout", function (event) {
+        if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
+          enablePolylineEvents(window.polylines, window.lineColors);
+        }
+      });
+
+      marker.on("mouseout", function () {
+        this.closePopup();
+      });
+
+      if (typeof marker.bounce === "function" && statis) {
+        marker.on("add", () => marker.bounce(3));
+      }
+
+      const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
+        .reverse()
+        .map(
+          (status) => `
+          <div class="flex items-center my-1">
+            <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
+            ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
+          </div>
+        `
+        )
+        .join("");
+
+      marker.bindPopup(`
+        <div class="bg-white rounded-lg">
+          <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
+          <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
+          <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
+          <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
+          <div class="mt-2">${statusInfo}</div>
+        </div>
+      `);
+
+      return marker;
+    });
+
+    console.log("📌 Marker erstellt:", markersData.length);
+
+    // Aktualisiere den Marker-Status im State
+    setMarkersFunction(markersData);
   } catch (error) {
-    console.error("Error fetching data: ", error);
+    console.error("❌ Fehler beim Abrufen der Daten: ", error);
   }
 };