feat: Filterung der Stationen nach Erlaubniswert hinzugefügt

- Die Funktion `createAndSetMarkers` wurde angepasst, sodass nur Stationen angezeigt werden, wenn ihr Erlaubniswert (`Allow`) auf 1 gesetzt ist.
- Eine neue Map `getIdSystemAndAllowValueMap` wurde eingeführt, um die Zuordnung von System-IDs zu ihren Erlaubniswerten abzubilden.
- Die Stationen werden jetzt entsprechend gefiltert, bevor sie auf der Karte dargestellt werden.
- Der Code wurde entsprechend umbenannt und bereinigt, um die Lesbarkeit und Verständlichkeit zu verbessern.

components/MapComponent.js

@@ -31,6 +31,25 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+  const zoomTrigger = useRecoilValue(zoomTriggerState);
+  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
+  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+  //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
+  // Create map layers
+  const TALAS = new L.layerGroup();
+  const ECI = new L.layerGroup();
+  const ULAF = new L.layerGroup();
+  const GSMModem = new L.layerGroup();
+  const CiscoRouter = new L.layerGroup();
+  const WAGO = new L.layerGroup();
+  const Siemens = new L.layerGroup();
+  const OTDR = new L.layerGroup();
+  const WDM = new L.layerGroup();
+  const GMA = new L.layerGroup();
+  const Sonstige = new L.layerGroup();
+  const TALASICL = new L.layerGroup();
+
+  const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
   const baseUrl = "http://10.10.0.13/talas5/devices/";
   const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
@@ -99,6 +118,339 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   };
 
+  //----------------------------------------------------
+  //-----Kontextmenu----------------
+  function addContextMenuToMarker(marker) {
+    marker.bindContextMenu({
+      contextmenu: true,
+      contextmenuWidth: 140,
+      contextmenuItems: [
+        {
+          text: "Station öffnen (Tab)",
+          icon: "/img/screen_new.png",
+          callback: (e) => openInNewTab(e, marker),
+        },
+        {
+          text: "Station öffnen",
+          icon: "/img/screen_same.png",
+          callback: (e) => openInSameWindow(e, marker),
+        },
+      ],
+    });
+  }
+  // Funktion zum Öffnen in einem neuen Tab
+  function openInNewTab(e, marker) {
+    console.log("Marker data:", baseUrl + marker.options.link);
+    window.open(baseUrl + marker.options.link, "_blank");
+  }
+
+  // Funktion zum Öffnen im gleichen Fenster
+  function openInSameWindow(e, marker) {
+    console.log("Marker data:", baseUrl + marker.options.link);
+    window.location.href = baseUrl + marker.options.link;
+  }
+
+  const zoomIn = (e) => {
+    initMap.flyTo(e.latlng, 12);
+    //console.log("ZoomIn koordinaten in MapComponent", e.latlng);
+  };
+
+  const zoomOut = (e) => {
+    fly();
+  };
+  const centerHere = (e) => {
+    initMap.panTo(e.latlng);
+  };
+
+  // Funktion zum Anzeigen der Koordinaten
+  const showCoordinates = (e) => {
+    alert(
+      "Breitengrad: " +
+        e.latlng.lat.toFixed(5) +
+        "\nLängengrad: " +
+        e.latlng.lng.toFixed(5)
+    );
+  };
+  const showData = (e) => {};
+  const showTalas = (e) => {
+    map.addLayer(TALAS);
+    loadData();
+  };
+  const hideTalas = (e) => {
+    map.removeLayer(TALAS);
+    loadData();
+  };
+  const showGSM = (e) => {
+    map.addLayer(GMA);
+    loadData();
+  };
+  const hideGSM = (e) => {
+    map.removeLayer(GMA);
+    loadData();
+  };
+
+  // Kontextmenü Callback für "Station hinzufügen"
+  const addStationCallback = (event) => {
+    setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
+    setShowPopup(true); // Popup öffnen
+  };
+  //-----Kontextmenu----ende------------
+  //------------------------------------------ */
+  const layerNames = {
+    "GSM Modem": "GSMMODEM",
+    "Cisco Router": "CiscoRouter",
+    "TALAS ICL": "TALASICL",
+    "SMS-Funkmodem": "GSMModem",
+  };
+  //------------------------------------------ */
+  function fly(stationValue) {
+    var x = 51.41321407879154;
+    var y = 7.739617925303934;
+    var zoom = 7;
+
+    initMap.flyTo([x, y], zoom);
+  }
+
+  function getIconPath(status, iconNumber, marker) {
+    let path = status
+      ? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
+      : `TileMap/img/icons/marker-icon-${iconNumber}.png`;
+
+    // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
+    if (
+      path.includes("critical") || // Priorität 1
+      path.includes("major") || // Priorität 2
+      path.includes("minor") || // Priorität 3
+      path.includes("system") // Priorität 4
+    ) {
+      // Setze Bouncing-Optionen
+      marker.setBouncingOptions({
+        bounceHeight: 15, // Höhe des Bounces
+        contractHeight: 12, // Höhe des Einzugs beim Landen
+        bounceSpeed: 52, // Geschwindigkeit des Bounces
+        contractSpeed: 52, // Geschwindigkeit des Einzugs
+        shadowAngle: null, // Standard-Schattenwinkel
+      });
+      // Check if the icon path includes 'critical'
+      if (path.includes("critical")) {
+        // marker.bounce(3);
+      }
+    }
+
+    return path;
+  }
+  //------------------------------------------
+  // Funktionen zur Überwachung der Internetverbindung
+  const checkInternet = () => {
+    fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
+      .then((response) => setOnline(response.ok))
+      .catch(() => setOnline(false));
+  };
+  let initMap = [];
+  //------------------------------------------
+  //------------------------------------------
+  function parsePoint(pointString) {
+    const match = pointString.match(
+      /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
+    );
+    if (match) {
+      return {
+        longitude: parseFloat(match[1]),
+        latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
+      };
+    } else {
+      // Handle the error or return a default/fallback value
+      console.error("Invalid POINT format:", pointString);
+      return null; // Oder eine sinnvolle Standardantwort
+    }
+  }
+  //----------------------------------
+  //------------------------------------------
+
+  function parsePoint(position) {
+    const [longitude, latitude] = position.slice(6, -1).split(" ");
+    return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
+  }
+  //-----------------------------------------------------------------
+  //         TALAS  Marker hinzufügen
+  //-----------------------------------------------------------------
+  // Reihenfolge nach API sortiert mit der Attribute "System"
+  const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
+  const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
+  const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
+  const [ciscoRouterVisible, setCiscoRouterVisible] =
+    useRecoilState(mapLayersState);
+  const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
+  const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
+  const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
+  const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
+  const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
+  const [messstellenVisible, setMessstellenVisible] =
+    useRecoilState(mapLayersState);
+  const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
+  const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
+  const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
+    useRecoilState(mapLayersState);
+  const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
+  const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
+
+  const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
+  const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
+  const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
+  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
+  const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
+  const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
+  const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
+  const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
+  const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
+  const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
+  const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
+  const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
+  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
+  const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
+  const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
+  //--------------------------------------------------------------------------------
+  function determinePriority(iconPath) {
+    if (iconPath.includes("critical")) return 1; // Highest priority
+    if (iconPath.includes("major")) return 2;
+    if (iconPath.includes("minor")) return 3;
+    if (iconPath.includes("system")) return 4;
+    return 5; // Default priority (lowest)
+  }
+  // Daten von einer externen Quelle laden
+  const createAndSetMarkers = async (systemId, setMarkersFunction) => {
+    try {
+      const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
+      const jsonResponse = await response1.json();
+      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 &&
+            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 marker = L.marker([station.X, station.Y], {
+            icon: L.icon({
+              iconUrl: iconPath,
+              iconSize: [25, 41],
+              iconAnchor: [12, 41],
+              popupAnchor: [1, -34],
+            }),
+            areaName: station.Area_Name,
+            link: station.Link,
+            bounceOnAdd: !!statis,
+          });
+
+          marker.bindPopup(`
+              <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>
+            `);
+          return marker;
+        });
+
+        setMarkersFunction(markersData);
+      }
+    } catch (error) {
+      console.error("Error fetching data: ", error);
+    }
+  };
+  //--------------------------------------------------------------------------------
+
+  const mapLayersVisibility = useRecoilValue(mapLayersState);
+
+  const handleCheckboxChange = (name, event) => {
+    const { checked } = event.target;
+    const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
+
+    setMapLayersVisibility((prev) => {
+      return {
+        ...prev,
+        [internalName]: checked,
+      };
+    });
+  };
+
+  //------------------------------------------
+  //------------------------------------------ */
+  const selectedArea = useRecoilValue(selectedAreaState);
+
+  // Combine all markers into a single array
+  const allMarkers = [
+    ...talasMarkers,
+    ...eciMarkers,
+    ...gsmModemMarkers,
+    ...ciscoRouterMarkers,
+    ...wagoMarkers,
+    ...siemensMarkers,
+    ...otdrMarkers,
+    ...wdmMarkers,
+    ...gmaMarkers,
+    ...messstellenMarkers,
+    ...talasiclMarkers,
+    ...dauzMarkers,
+    ...smsfunkmodemMarkers,
+    ...sonstigeMarkers,
+    ...ulafMarkers,
+  ];
+
+  // Function to find a marker by areaName across all groups
+  const findMyMarker = (areaName) => {
+    return allMarkers.find((marker) => marker.options.areaName === areaName);
+  };
+  //--------------------------------------------------------------
+  //---------------------------------------------------------
+  // Now update checkOverlappingMarkers to check if oms is initialized
+  function checkOverlappingMarkers(map, markers, plusIcon) {
+    // Ensure markers is always an array
+    if (!Array.isArray(markers)) {
+      //console.error("The `markers` argument is not an array:", markers);
+      return;
+    }
+
+    const overlappingGroups = {};
+
+    // Group markers by coordinates as strings
+    markers.forEach((marker) => {
+      const latlngStr = marker.getLatLng().toString();
+      if (overlappingGroups[latlngStr]) {
+        overlappingGroups[latlngStr].push(marker);
+      } else {
+        overlappingGroups[latlngStr] = [marker];
+      }
+    });
+
+    // Add plus markers at coordinates where overlaps occur
+    for (const coords in overlappingGroups) {
+      if (overlappingGroups[coords].length > 1) {
+        const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
+        const plusMarker = L.marker(latLng, { icon: plusIcon });
+        plusMarker.addTo(map);
+
+        //console.log("Adding plus icon marker at", latLng);
+      }
+    }
+  }
+  //---------------------------------------------------------
+  //------------------------------------------
   // API-Daten laden für GisStationsStaticDistrict
   //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
   useEffect(() => {
@@ -207,8 +559,6 @@ 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 () => {
@@ -236,36 +586,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, []);
   //------------------------------------------
 
-  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
-  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-  //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
-  // Create map layers
-  const TALAS = new L.layerGroup();
-  const ECI = new L.layerGroup();
-  const ULAF = new L.layerGroup();
-  const GSMModem = new L.layerGroup();
-  const CiscoRouter = new L.layerGroup();
-  const WAGO = new L.layerGroup();
-  const Siemens = new L.layerGroup();
-  const OTDR = new L.layerGroup();
-  const WDM = new L.layerGroup();
-  const GMA = new L.layerGroup();
-  const Sonstige = new L.layerGroup();
-  const TALASICL = new L.layerGroup();
-
   useEffect(() => {
     if (typeof window !== "undefined") {
       //console.log("Window height from config:", config.windowHeight);
     }
   }, []);
 
-  // Funktionen zur Überwachung der Internetverbindung
-  const checkInternet = () => {
-    fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
-      .then((response) => setOnline(response.ok))
-      .catch(() => setOnline(false));
-  };
-  let initMap = [];
   // Initialisierung der karte und hinzuügen der Layers
   useEffect(() => {
     if (mapRef.current && !map) {
@@ -349,23 +675,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     console.log("trigger in MapComponent.js:", poiReadTrigger);
   }, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig
 
-  //------------------------------------------
-  function parsePoint(pointString) {
-    const match = pointString.match(
-      /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
-    );
-    if (match) {
-      return {
-        longitude: parseFloat(match[1]),
-        latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
-      };
-    } else {
-      // Handle the error or return a default/fallback value
-      console.error("Invalid POINT format:", pointString);
-      return null; // Oder eine sinnvolle Standardantwort
-    }
-  }
-  //----------------------------------
   //          poiTyp Daten hinzufügen
   //------------------------------------------
   // Funktion zum Abrufen der poiTyp Daten
@@ -392,194 +701,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     console.log("poiTypData aktualisiert:", poiTypData);
   }, [poiTypData]);
 
-  //----------------------------------------------------
-  //-----Kontextmenu----------------
-  function addContextMenuToMarker(marker) {
-    marker.bindContextMenu({
-      contextmenu: true,
-      contextmenuWidth: 140,
-      contextmenuItems: [
-        {
-          text: "Station öffnen (Tab)",
-          icon: "/img/screen_new.png",
-          callback: (e) => openInNewTab(e, marker),
-        },
-        {
-          text: "Station öffnen",
-          icon: "/img/screen_same.png",
-          callback: (e) => openInSameWindow(e, marker),
-        },
-      ],
-    });
-  }
-  // Funktion zum Öffnen in einem neuen Tab
-  function openInNewTab(e, marker) {
-    console.log("Marker data:", baseUrl + marker.options.link);
-    window.open(baseUrl + marker.options.link, "_blank");
-  }
-
-  // Funktion zum Öffnen im gleichen Fenster
-  function openInSameWindow(e, marker) {
-    console.log("Marker data:", baseUrl + marker.options.link);
-    window.location.href = baseUrl + marker.options.link;
-  }
-
-  const zoomIn = (e) => {
-    initMap.flyTo(e.latlng, 12);
-    //console.log("ZoomIn koordinaten in MapComponent", e.latlng);
-  };
-
-  const zoomOut = (e) => {
-    fly();
-  };
-  const centerHere = (e) => {
-    initMap.panTo(e.latlng);
-  };
-
-  // Funktion zum Anzeigen der Koordinaten
-  const showCoordinates = (e) => {
-    alert(
-      "Breitengrad: " +
-        e.latlng.lat.toFixed(5) +
-        "\nLängengrad: " +
-        e.latlng.lng.toFixed(5)
-    );
-  };
-  const showData = (e) => {};
-  const showTalas = (e) => {
-    map.addLayer(TALAS);
-    loadData();
-  };
-  const hideTalas = (e) => {
-    map.removeLayer(TALAS);
-    loadData();
-  };
-  const showGSM = (e) => {
-    map.addLayer(GMA);
-    loadData();
-  };
-  const hideGSM = (e) => {
-    map.removeLayer(GMA);
-    loadData();
-  };
-
-  // Kontextmenü Callback für "Station hinzufügen"
-  const addStationCallback = (event) => {
-    setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
-    setShowPopup(true); // Popup öffnen
-  };
-  //-----Kontextmenu----ende------------
-  // Ensure this function is only called when map is initialized and available
-  /*   const showAddStationPopup = (e, map) => {
-   const container = L.DomUtil.create("div");
-
-    // Create a root container for the React component inside the popup
-    const root = ReactDOM.createRoot(container);
-
-    root.render(
-     
-        <ShowAddStationPopup map={initMap} latlng={e.latlng} />
- 
-    );
-
-    // Create and configure the popup
-    L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);
-
-    // Cleanup when the popup is closed
-    initMap.on("popupclose", () => {
-      root.unmount(); // Use unmount method from the root
-    });
-  }; */
-
-  // Inside your ShowAddStationPopup component
-  /*   useEffect(() => {
-    // Cleanup function to unmount React component
-    return () => {
-      if (container._reactRoot) {
-        container._reactRoot.unmount();
-      }
-    };
-  }, []); */
-
-  //------------------------------------------
-
-  // Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
-  /*   async function handleSubmit(event) {
-    event.preventDefault();
-    const form = event.target;
-
-    // Einfache Validierung, um sicherzustellen, dass idPoiTyp eine Zahl ist
-    if (!form.idPoiTyp.value || isNaN(form.idPoiTyp.value)) {
-      alert("Bitte geben Sie eine gültige ID für den Poi-Typ ein.");
-      return; // Beendet die Funktion, um das Senden von ungültigen Daten zu verhindern
-    }
-
-    const data = {
-      name: form.name.value,
-      type: form.type.value,
-      idPoi: form.idPoi.value,
-      idPoiTyp: form.idPoiTyp.value,
-      latitude: form.lat.value,
-      longitude: form.lng.value,
-    };
-
-    // Senden der Daten an den Server
-    const response = await fetch("/api/addLocation", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    });
-
-    if (response.ok) {
-      console.log("Station erfolgreich hinzugefügt");
-      // Weitere Aktionen nach erfolgreichem Hinzufügen
-    } else {
-      console.error("Fehler beim Hinzufügen der Station");
-      // Fehlerbehandlung
-    }
-  } */
-
   //---------------------------------------
 
-  function fly(stationValue) {
-    var x = 51.41321407879154;
-    var y = 7.739617925303934;
-    var zoom = 7;
-
-    initMap.flyTo([x, y], zoom);
-  }
-
-  function getIconPath(status, iconNumber, marker) {
-    let path = status
-      ? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
-      : `TileMap/img/icons/marker-icon-${iconNumber}.png`;
-
-    // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
-    if (
-      path.includes("critical") || // Priorität 1
-      path.includes("major") || // Priorität 2
-      path.includes("minor") || // Priorität 3
-      path.includes("system") // Priorität 4
-    ) {
-      // Setze Bouncing-Optionen
-      marker.setBouncingOptions({
-        bounceHeight: 15, // Höhe des Bounces
-        contractHeight: 12, // Höhe des Einzugs beim Landen
-        bounceSpeed: 52, // Geschwindigkeit des Bounces
-        contractSpeed: 52, // Geschwindigkeit des Einzugs
-        shadowAngle: null, // Standard-Schattenwinkel
-      });
-      // Check if the icon path includes 'critical'
-      if (path.includes("critical")) {
-        // marker.bounce(3);
-      }
-    }
-
-    return path;
-  }
-  //------------------------------------------
   // Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
   useEffect(() => {
     const fetchPoiTypData = async () => {
@@ -704,115 +827,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
 
-  //------------------------------------------
-
-  function parsePoint(position) {
-    const [longitude, latitude] = position.slice(6, -1).split(" ");
-    return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
-  }
-  //-----------------------------------------------------------------
-  //         TALAS  Marker hinzufügen
-  //-----------------------------------------------------------------
-  // Reihenfolge nach API sortiert mit der Attribute "System"
-  const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
-  const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
-  const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
-  const [ciscoRouterVisible, setCiscoRouterVisible] =
-    useRecoilState(mapLayersState);
-  const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
-  const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
-  const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
-  const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
-  const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
-  const [messstellenVisible, setMessstellenVisible] =
-    useRecoilState(mapLayersState);
-  const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
-  const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
-  const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
-    useRecoilState(mapLayersState);
-  const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
-  const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
-
-  const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
-  const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
-  const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
-  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
-  const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
-  const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
-  const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
-  const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
-  const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
-  const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
-  const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
-  const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
-  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
-  const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
-  const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
-  //--------------------------------------------------------------------------------
-  function determinePriority(iconPath) {
-    if (iconPath.includes("critical")) return 1; // Highest priority
-    if (iconPath.includes("major")) return 2;
-    if (iconPath.includes("minor")) return 3;
-    if (iconPath.includes("system")) return 4;
-    return 5; // Default priority (lowest)
-  }
-  // Daten von einer externen Quelle laden
-  const createAndSetMarkers = async (systemId, setMarkersFunction) => {
-    try {
-      const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
-      const jsonResponse = await response1.json();
-      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 &&
-            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 marker = L.marker([station.X, station.Y], {
-            icon: L.icon({
-              iconUrl: iconPath,
-              iconSize: [25, 41],
-              iconAnchor: [12, 41],
-              popupAnchor: [1, -34],
-            }),
-            areaName: station.Area_Name,
-            link: station.Link,
-            bounceOnAdd: !!statis,
-          });
-
-          marker.bindPopup(`
-            <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>
-          `);
-          return marker;
-        });
-
-        setMarkersFunction(markersData);
-      }
-    } catch (error) {
-      console.error("Error fetching data: ", error);
-    }
-  };
-
   useEffect(() => {
     if (gisSystemStaticLoaded && map) {
       createAndSetMarkers(1, setTalasMarkers); // TALAS-System
@@ -1237,38 +1251,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   //console.log("sonstige", sonstigeMarkers);
   //-------------------------------------------
-  //--------------------------------------------------------------------------------
-
-  const mapLayersVisibility = useRecoilValue(mapLayersState);
-
-  /*   useEffect(() => {
-    if (!map || !talasMarkers) return;
-
-    const toggleLayer = (isVisible) => {
-      if (isVisible) {
-        talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
-      } else {
-        talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
-      }
-    };
-
-    // Apply visibility state to the TALAS layer
-    toggleLayer(mapLayersVisibility.TALAS);
-  }, [map, talasMarkers, mapLayersVisibility.TALAS]);  */ // Depend on map, markers array, and visibility state
-
-  const handleCheckboxChange = (name, event) => {
-    const { checked } = event.target;
-    const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
-
-    setMapLayersVisibility((prev) => {
-      return {
-        ...prev,
-        [internalName]: checked,
-      };
-    });
-  };
-
-  //------------------------------------------
 
   // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
 
@@ -1337,13 +1319,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
 
   //------------------------------------------ */
-  const layerNames = {
+
-    "GSM Modem": "GSMMODEM",
-    "Cisco Router": "CiscoRouter",
-    "TALAS ICL": "TALASICL",
-    "SMS-Funkmodem": "GSMModem",
-  };
-  //------------------------------------------ */
   // Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
 
   useEffect(() => {
@@ -1538,31 +1514,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
 
   //------------------------------------------ */
-  const selectedArea = useRecoilValue(selectedAreaState);
-
-  // Combine all markers into a single array
-  const allMarkers = [
-    ...talasMarkers,
-    ...eciMarkers,
-    ...gsmModemMarkers,
-    ...ciscoRouterMarkers,
-    ...wagoMarkers,
-    ...siemensMarkers,
-    ...otdrMarkers,
-    ...wdmMarkers,
-    ...gmaMarkers,
-    ...messstellenMarkers,
-    ...talasiclMarkers,
-    ...dauzMarkers,
-    ...smsfunkmodemMarkers,
-    ...sonstigeMarkers,
-    ...ulafMarkers,
-  ];
-
-  // Function to find a marker by areaName across all groups
-  const findMyMarker = (areaName) => {
-    return allMarkers.find((marker) => marker.options.areaName === areaName);
-  };
 
   // Effect to handle navigation to selected area
   useEffect(() => {
@@ -1574,15 +1525,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
 
-  /*   const findMyMarker = (areaName) => {
-    // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
-    return talasMarkers.find((marker) => marker.options.areaName === areaName);
-  }; */
-
   //------------------------------------------
 
-  const zoomTrigger = useRecoilValue(zoomTriggerState);
-
   useEffect(() => {
     if (map) {
       var x = 51.41321407879154;
@@ -1605,37 +1549,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     // Beispiel: Daten neu laden oder aktualisieren
   }, [poiReadTrigger]);
   //---------------------------------------------------------
-  // Now update checkOverlappingMarkers to check if oms is initialized
-  function checkOverlappingMarkers(map, markers, plusIcon) {
-    // Ensure markers is always an array
-    if (!Array.isArray(markers)) {
-      //console.error("The `markers` argument is not an array:", markers);
-      return;
-    }
-
-    const overlappingGroups = {};
-
-    // Group markers by coordinates as strings
-    markers.forEach((marker) => {
-      const latlngStr = marker.getLatLng().toString();
-      if (overlappingGroups[latlngStr]) {
-        overlappingGroups[latlngStr].push(marker);
-      } else {
-        overlappingGroups[latlngStr] = [marker];
-      }
-    });
-
-    // Add plus markers at coordinates where overlaps occur
-    for (const coords in overlappingGroups) {
-      if (overlappingGroups[coords].length > 1) {
-        const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
-        const plusMarker = L.marker(latLng, { icon: plusIcon });
-        plusMarker.addTo(map);
-
-        //console.log("Adding plus icon marker at", latLng);
-      }
-    }
-  }
 
   //---------------------------------------------------------
   useEffect(() => {