fix: Layer-Visibility-Konflikt bei SMS Modem behoben

- Ursache des Problems: Inkonsistenz bei der Benennung des Layers in `useLayerVisibility` ("SMSFunkmodem" vs. "SMSModem").
- Anpassung des Layer-Namens in `useLayerVisibility`, um mit der `GisSystemStatic`-Datenstruktur und `mapLayersVisibility` übereinzustimmen.
- Konflikt führte dazu, dass der SMS Modem-Layer nicht korrekt sichtbar/unsichtbar geschaltet wurde.
- Debugging und Anpassungen führten zur erfolgreichen Behebung des Fehlers.

Dieser Fix stellt sicher, dass die Sichtbarkeit der Marker-Layer konsistent und wie erwartet funktioniert.

components/MapComponent.js

@@ -249,6 +249,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter
   );
 
+  useSmsfunkmodemMarkersLayer(
+    map,
+    oms,
+    GisSystemStatic,
+    priorityConfig,
+    mapLayersVisibility.SMSFunkmodem // Sichtbarkeitsstatus aus dem State
+  );
+
   useEffect(() => {
     const fetchWebServiceMap = async () => {
       try {
@@ -436,7 +444,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
   useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms);
   useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms);
   useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms);
-  useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem", oms);
+  useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSModem", oms);
   useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms);
   useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms);
 

components/imports.js

@@ -1,4 +1,4 @@
-// imports.js
+/* // imports.js
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import L, { marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -160,3 +160,4 @@ export {
   useLayerVisibility,
   useLineData,
 };
+ */

config/settings.js

@@ -1,5 +1,5 @@
 // /config/settings.js
 // Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
-export const MAP_VERSION = "1.0.4";
+export const MAP_VERSION = "1.0.5";
 //export const STANDARD_SIDE_MENU = true;
 //export const FULL_SIDE_MENU = false;

hooks/layers/useLteModemMarkersLayer.js

@@ -1,4 +1,4 @@
-// hooks/useLteModemMarkersLayer.js
+/* // hooks/useLteModemMarkersLayer.js das ist GSM Modem
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
@@ -47,3 +47,4 @@ const useLteModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
 };
 
 export default useLteModemMarkersLayer;
+ */

hooks/layers/useSmsfunkmodemMarkersLayer.js

@@ -4,49 +4,60 @@ import L from "leaflet";
 import "leaflet-contextmenu";
 import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 
-const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig, isVisible) => {
   const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
 
   useEffect(() => {
-    if (map && GisSystemStatic) {
-      const markers = GisSystemStatic.filter((station) => station.System === 111).map((station) => {
-        const marker = L.marker([station.Latitude, station.Longitude], {
-          icon: L.icon({
-            iconUrl: "/img/icons/pois/sms-funkmodem.png",
-            iconSize: [25, 41],
-            iconAnchor: [12, 41],
-            popupAnchor: [1, -34],
-          }),
-          id: station.id,
-          areaName: station.Area_Name,
-          draggable: false,
-        }).bindPopup(`
-          <div>
-            <b class="text-xl text-black-700">${station.Area_Name || "Unbekannt"}</b><br>
-            ${station.Description || "No Description"}<br>
-          </div>
-        `);
+    if (!map || !GisSystemStatic) return;
 
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
+    // Debugging: Logge die Sichtbarkeit und die übergebenen Daten
+    console.log("isVisible für SMS Modem:", isVisible);
+    console.log("Alle Stationen in GisSystemStatic:", GisSystemStatic);
 
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
+    // Hilfsfunktion: Normalisiert Strings
+    const normalizeString = (str) => str?.trim().toLowerCase() || "";
 
-        addContextMenuToMarker(marker);
+    // Filter für SMS Modem (System === 111 oder Name entspricht "SMS Modem")
+    const markers = isVisible
+      ? GisSystemStatic.filter((station) => station.System === 111 || normalizeString(station.Name) === "SMS Modem").map((station) => {
+          console.log("Gefundener SMS Modem-Marker:", station); // Debugging
+          const marker = L.marker([station.Latitude, station.Longitude], {
+            icon: L.icon({
+              iconUrl: "/img/icons/pois/sms-funkmodem.png",
+              iconSize: [25, 41],
+              iconAnchor: [12, 41],
+              popupAnchor: [1, -34],
+            }),
+            id: station.id,
+            areaName: station.Area_Name,
+            draggable: false,
+          }).bindPopup(`
+            <div>
+              <b class="text-xl text-black-700">${station.Area_Name || "Unbekannt"}</b><br>
+              ${station.Description || "No Description"}<br>
+            </div>
+          `);
 
-        return marker;
-      });
+          // Füge ein Kontextmenü hinzu
+          addContextMenuToMarker(marker);
+          return marker;
+        })
+      : [];
 
-      setSmsfunkmodemMarkers(markers);
-      markers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-      });
-    }
-  }, [map, GisSystemStatic, priorityConfig]);
+    // Setze die Marker im Zustand
+    setSmsfunkmodemMarkers(markers);
+
+    // Füge Marker zur Karte hinzu
+    markers.forEach((marker) => {
+      marker.addTo(map);
+      oms.addMarker(marker);
+    });
+
+    // Cleanup: Entferne Marker bei Deaktivierung oder wenn der Hook entladen wird
+    return () => {
+      markers.forEach((marker) => marker.remove());
+    };
+  }, [map, GisSystemStatic, isVisible]);
 
   return smsfunkmodemMarkers;
 };

pages/api/talas5/webserviceMap/GisSystemStatic.js

@@ -1,273 +1,273 @@
 // /pages/api/webServiceMap.js
 const gisSystemStatic = {
-  "Name": "Liste aller angezeigten Systeme",
-  "Zeitstempel": "2024-05-31T15:08:49.8599542+02:00",
-  "IdMap": "10",
-  "Systems": [
+  Name: "Liste aller angezeigten Systeme",
+  Zeitstempel: "2024-05-31T15:08:49.8599542+02:00",
+  IdMap: "10",
+  Systems: [
     {
-      "IdSystem": 1,
-      "Name": "TALAS",
-      "Longname": "Talas Meldestationen",
-      "Allow": 1,
-      "Icon": 1
+      IdSystem: 1,
+      Name: "TALAS",
+      Longname: "Talas Meldestationen",
+      Allow: 1,
+      Icon: 1,
     },
     {
-      "IdSystem": 2,
-      "Name": "ECI",
-      "Longname": "ECI Geräte",
-      "Allow": 1,
-      "Icon": 2
+      IdSystem: 2,
+      Name: "ECI",
+      Longname: "ECI Geräte",
+      Allow: 1,
+      Icon: 2,
     },
     {
-      "IdSystem": 5,
-      "Name": "GSM Modem",
-      "Longname": "LR77 GSM Modems",
-      "Allow": 1,
-      "Icon": 5
+      IdSystem: 5,
+      Name: "GSM Modem",
+      Longname: "LR77 GSM Modems",
+      Allow: 1,
+      Icon: 5,
     },
     {
-      "IdSystem": 6,
-      "Name": "Cisco Router",
-      "Longname": "Cisco Router",
-      "Allow": 1,
-      "Icon": 6
+      IdSystem: 6,
+      Name: "Cisco Router",
+      Longname: "Cisco Router",
+      Allow: 1,
+      Icon: 6,
     },
     {
-      "IdSystem": 7,
-      "Name": "WAGO",
-      "Longname": "WAGO I/O Systeme",
-      "Allow": 1,
-      "Icon": 7
+      IdSystem: 7,
+      Name: "WAGO",
+      Longname: "WAGO I/O Systeme",
+      Allow: 1,
+      Icon: 7,
     },
     {
-      "IdSystem": 8,
-      "Name": "Siemens",
-      "Longname": "Siemens Notrufsystem",
-      "Allow": 0,
-      "Icon": 8
+      IdSystem: 8,
+      Name: "Siemens",
+      Longname: "Siemens Notrufsystem",
+      Allow: 0,
+      Icon: 8,
     },
     {
-      "IdSystem": 9,
-      "Name": "OTDR",
-      "Longname": "Glasfaserüberwachung OTU",
-      "Allow": 0,
-      "Icon": 9
+      IdSystem: 9,
+      Name: "OTDR",
+      Longname: "Glasfaserüberwachung OTU",
+      Allow: 0,
+      Icon: 9,
     },
     {
-      "IdSystem": 10,
-      "Name": "WDM",
-      "Longname": " Wavelength Division Multiplexing",
-      "Allow": 0,
-      "Icon": 10
+      IdSystem: 10,
+      Name: "WDM",
+      Longname: " Wavelength Division Multiplexing",
+      Allow: 0,
+      Icon: 10,
     },
     {
-      "IdSystem": 11,
-      "Name": "GMA",
-      "Longname": "Glättemeldeanlagen",
-      "Allow": 1,
-      "Icon": 11
+      IdSystem: 11,
+      Name: "GMA",
+      Longname: "Glättemeldeanlagen",
+      Allow: 1,
+      Icon: 11,
     },
     {
-      "IdSystem": 13,
-      "Name": "Messstellen",
-      "Longname": "Messstellen",
-      "Allow": 0,
-      "Icon": 13
+      IdSystem: 13,
+      Name: "Messstellen",
+      Longname: "Messstellen",
+      Allow: 0,
+      Icon: 13,
     },
     {
-      "IdSystem": 100,
-      "Name": "TALAS ICL",
-      "Longname": "Talas ICL Unterstationen",
-      "Allow": 1,
-      "Icon": 100
+      IdSystem: 100,
+      Name: "TALAS ICL",
+      Longname: "Talas ICL Unterstationen",
+      Allow: 1,
+      Icon: 100,
     },
     {
-      "IdSystem": 110,
-      "Name": "DAUZ",
-      "Longname": "Dauerzählstellen",
-      "Allow": 1,
-      "Icon": 110
+      IdSystem: 110,
+      Name: "DAUZ",
+      Longname: "Dauerzählstellen",
+      Allow: 1,
+      Icon: 110,
     },
     {
-      "IdSystem": 111,
-      "Name": "SMS-Funkmodem",
-      "Longname": "SMS-Funkmodem",
-      "Allow": 0,
-      "Icon": 111
+      IdSystem: 111,
+      Name: "SMS-Funkmodem",
+      Longname: "SMS-Funkmodem",
+      Allow: 0,
+      Icon: 111,
     },
     {
-      "IdSystem": 200,
-      "Name": "Sonstige",
-      "Longname": "Sonstige",
-      "Allow": 1,
-      "Icon": 200
-    }
+      IdSystem: 200,
+      Name: "Sonstige",
+      Longname: "Sonstige",
+      Allow: 1,
+      Icon: 200,
+    },
   ],
-  "Rights": [
+  Rights: [
     {
-      "IdRight": 1
+      IdRight: 1,
     },
     {
-      "IdRight": 2
+      IdRight: 2,
     },
     {
-      "IdRight": 3
+      IdRight: 3,
     },
     {
-      "IdRight": 5
+      IdRight: 5,
     },
     {
-      "IdRight": 6
+      IdRight: 6,
     },
     {
-      "IdRight": 7
+      IdRight: 7,
     },
     {
-      "IdRight": 8
+      IdRight: 8,
     },
     {
-      "IdRight": 10
+      IdRight: 10,
     },
     {
-      "IdRight": 11
+      IdRight: 11,
     },
     {
-      "IdRight": 12
+      IdRight: 12,
     },
     {
-      "IdRight": 20
+      IdRight: 20,
     },
     {
-      "IdRight": 22
+      IdRight: 22,
     },
     {
-      "IdRight": 23
+      IdRight: 23,
     },
     {
-      "IdRight": 25
+      IdRight: 25,
     },
     {
-      "IdRight": 30
+      IdRight: 30,
     },
     {
-      "IdRight": 40
+      IdRight: 40,
     },
     {
-      "IdRight": 41
+      IdRight: 41,
     },
     {
-      "IdRight": 42
+      IdRight: 42,
     },
     {
-      "IdRight": 43
+      IdRight: 43,
     },
     {
-      "IdRight": 44
+      IdRight: 44,
     },
     {
-      "IdRight": 45
+      IdRight: 45,
     },
     {
-      "IdRight": 46
+      IdRight: 46,
     },
     {
-      "IdRight": 47
+      IdRight: 47,
     },
     {
-      "IdRight": 48
+      IdRight: 48,
     },
     {
-      "IdRight": 49
+      IdRight: 49,
     },
     {
-      "IdRight": 50
+      IdRight: 50,
     },
     {
-      "IdRight": 51
+      IdRight: 51,
     },
     {
-      "IdRight": 52
+      IdRight: 52,
     },
     {
-      "IdRight": 55
+      IdRight: 55,
     },
     {
-      "IdRight": 56
+      IdRight: 56,
     },
     {
-      "IdRight": 60
+      IdRight: 60,
     },
     {
-      "IdRight": 61
+      IdRight: 61,
     },
     {
-      "IdRight": 62
+      IdRight: 62,
     },
     {
-      "IdRight": 63
+      IdRight: 63,
     },
     {
-      "IdRight": 64
+      IdRight: 64,
     },
     {
-      "IdRight": 65
+      IdRight: 65,
     },
     {
-      "IdRight": 68
+      IdRight: 68,
     },
     {
-      "IdRight": 69
+      IdRight: 69,
     },
     {
-      "IdRight": 70
+      IdRight: 70,
     },
     {
-      "IdRight": 71
+      IdRight: 71,
     },
     {
-      "IdRight": 72
+      IdRight: 72,
     },
     {
-      "IdRight": 73
+      IdRight: 73,
     },
     {
-      "IdRight": 79
+      IdRight: 79,
     },
     {
-      "IdRight": 80
+      IdRight: 80,
     },
     {
-      "IdRight": 90
+      IdRight: 90,
     },
     {
-      "IdRight": 93
+      IdRight: 93,
     },
     {
-      "IdRight": 94
+      IdRight: 94,
     },
     {
-      "IdRight": 95
+      IdRight: 95,
     },
     {
-      "IdRight": 96
-    }
-  ]
-}
-  
+      IdRight: 96,
+    },
+  ],
+};
+
 // Export an async function handler for the API route.
 export default async function handler(req, res) {
-    // Initialize an empty params object to store query parameters.
-    const params = {
-        idMap: req.query.idMap,
-        idUser: req.query.idUser
-    };
+  // Initialize an empty params object to store query parameters.
+  const params = {
+    idMap: req.query.idMap,
+    idUser: req.query.idUser,
+  };
 
-    // Check if the requested ID map and user match certain conditions.
-    if (params.idMap === '10' && params.idUser === '484') {
-        // If the conditions are met, return the gisSystemStatic object with a 200 status code.
-        res.status(200).json(gisSystemStatic);
-    } else {
-        // If not, return a 404 error with the message "Not Found".
-        res.status(404).send('Not Found');
-    }
-};
+  // Check if the requested ID map and user match certain conditions.
+  if (params.idMap === "10" && params.idUser === "484") {
+    // If the conditions are met, return the gisSystemStatic object with a 200 status code.
+    res.status(200).json(gisSystemStatic);
+  } else {
+    // If not, return a 404 error with the message "Not Found".
+    res.status(404).send("Not Found");
+  }
+}