Fix: Sicherstellen, dass Marker erst nach dem Laden der GisSystemStatic-Daten erstellt werden

- Hinzufügen einer Statusvariable 'gisSystemStaticLoaded', um den Ladezustand der GisSystemStatic-Daten zu verfolgen.
- Aktualisierte useEffect, um 'gisSystemStaticLoaded' auf true zu setzen, sobald die GisSystemStatic-Daten erfolgreich abgerufen wurden.
- Die Logik zur Erstellung von Markern wurde geändert, sodass diese nur ausgeführt wird, wenn 'gisSystemStaticLoaded' auf true gesetzt ist.
- Diese Änderung stellt sicher, dass 'getIdSystemAndAllowValueMap' korrekt gefüllt ist, bevor es verwendet wird.
- Zudem wurde ein Problem behoben, bei dem die Karte und die Marker nach einer Browser-Aktualisierung nicht richtig synchronisiert waren.

components/MapComponent.js

@@ -207,6 +207,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
   //------------------------------------------
 
+  const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
+
   //GisSystemStatic Daten laden
   useEffect(() => {
     const fetchData = async () => {
@@ -214,10 +216,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         const response = await fetch(mapGisSystemStaticUrl);
         const jsonResponse = await response.json();
 
-        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
         if (jsonResponse && jsonResponse.Systems) {
-          setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
+          setGisSystemStatic(jsonResponse.Systems);
-          // console.log("GisSystemStatic:", jsonResponse.Systems);
+          setGisSystemStaticLoaded(true); // Setze den Zustand auf geladen
         } else {
           console.error(
             'Erwartete Daten im "Systems"-Array nicht gefunden',
@@ -232,7 +233,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     };
 
     fetchData();
-  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  }, []);
   //------------------------------------------
 
   const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
@@ -591,7 +592,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen
         console.log("poiTypMap:", map);
         const poiTypName = poiTypMap.get(0) || "Unbekannt";
-        console.log("poiTypName:", poiTypName);
+        //console.log("poiTypName:", poiTypName);
       } catch (error) {
         console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
       }
@@ -763,25 +764,25 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
       const statusResponse = await response2.json();
 
+      const getIdSystemAndAllowValueMap = new Map(
+        GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
+      );
+      console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
+
       if (jsonResponse.Points && statusResponse.Statis) {
         const statisMap = new Map(
           statusResponse.Statis.map((s) => [s.IdLD, s])
         );
         let markersData = jsonResponse.Points.filter(
-          (station) => station.System === systemId
+          (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);
-          const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
-
-          /* console.log(
-            `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
-          ); */
-
           const marker = L.marker([station.X, station.Y], {
             icon: L.icon({
               iconUrl: iconPath,
@@ -789,37 +790,17 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
               iconAnchor: [12, 41],
               popupAnchor: [1, -34],
             }),
-            areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
+            areaName: station.Area_Name,
             link: station.Link,
-            zIndexOffset: zIndexOffset,
             bounceOnAdd: !!statis,
           });
 
-          if (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 ">
+            <div class="bg-white rounded-lg">
               <h3 class="text-lg font-semibold text-gray-900">${station.LD_Name}</h3>
               <p class="text-gray-800"><strong>Gerät:</strong> ${station.Device}</p>
               <p class="text-gray-800"><strong>Zone:</strong> ${station.Area_Short} (${station.Area_Name})</p>
               <p class="text-gray-800"><strong>Standort:</strong> ${station.Location_Short} (${station.Location_Name})</p>
-              <div class="mt-2">${statusInfo}</div>
             </div>
           `);
           return marker;
@@ -831,24 +812,26 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       console.error("Error fetching data: ", error);
     }
   };
+
   useEffect(() => {
-    if (!map) return;
+    if (gisSystemStaticLoaded && map) {
-    createAndSetMarkers(1, setTalasMarkers); // TALAS-System
+      createAndSetMarkers(1, setTalasMarkers); // TALAS-System
-    createAndSetMarkers(2, setEciMarkers); // ECI-System
+      createAndSetMarkers(2, setEciMarkers); // ECI-System
-    createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
+      createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
-    createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
+      createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
-    createAndSetMarkers(7, setWagoMarkers); // WAGO-System
+      createAndSetMarkers(7, setWagoMarkers); // WAGO-System
-    createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
+      createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
-    createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
+      createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
-    createAndSetMarkers(10, setWdmMarkers); // WDM-System
+      createAndSetMarkers(10, setWdmMarkers); // WDM-System
-    createAndSetMarkers(11, setGmaMarkers); // GMA-System
+      createAndSetMarkers(11, setGmaMarkers); // GMA-System
-    createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
+      createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
-    createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
+      createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
-    createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
+      createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
-    createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
+      createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
-    createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
+      createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
-    createAndSetMarkers(0, setUlafMarkers); // ULAF-System
+      createAndSetMarkers(0, setUlafMarkers); // ULAF-System
-  }, [map]);
+    }
+  }, [gisSystemStaticLoaded, map]);
   //--------------------------------------------------------------------------------
   useEffect(() => {
     if (map && talasMarkers.length) {