From dfb1a9cedcab469c7696aebb8f2149084e87091f Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismail_ali_1@hotmail.com>
Date: Mon, 22 Apr 2024 20:42:34 +0200
Subject: [PATCH] TALAS als separater layerGroup

---
 components/DataSheet.js                |   31 +-
 components/MapComponent - Kopie.js     | 1134 ++++++++++++++++++++++++
 components/MapComponent.js             |  223 ++++-
 config/config.js                       |    8 +-
 features/gisStationState.js            |    7 -
 pages/api/[...path].js                 |    4 +-
 states/gisStationState.js              |    7 +
 {features => states}/gisSystemState.js |    2 +-
 states/mapLayersState.js               |   24 +
 9 files changed, 1408 insertions(+), 32 deletions(-)
 create mode 100644 components/MapComponent - Kopie.js
 delete mode 100644 features/gisStationState.js
 create mode 100644 states/gisStationState.js
 rename {features => states}/gisSystemState.js (84%)
 create mode 100644 states/mapLayersState.js

diff --git a/components/DataSheet.js b/components/DataSheet.js
index e0edb940b..f403e943e 100644
--- a/components/DataSheet.js
+++ b/components/DataSheet.js
@@ -1,8 +1,11 @@
+//components/DataSheet.js
 import React, { useEffect, useState } from "react";
-import { useRecoilValue } from "recoil";
-import { gisStationsStaticDistrictState } from "../features/gisStationState";
-import { gisSystemStaticState } from "../features/gisSystemState";
+import { useRecoilValue, useRecoilState } from "recoil";
+import { gisStationsStaticDistrictState } from "../states/gisStationState";
+import { gisSystemStaticState } from "../states/gisSystemState";
+import { mapLayersState } from "../states/mapLayersState";
 function DataSheet() {
+  const [layers, setLayers] = useRecoilState(mapLayersState);
   // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
   const [uniqueSystems, setUniqueSystems] = useState([]);
@@ -14,11 +17,11 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
 
   useEffect(() => {
-    console.log(
+    /* console.log(
       "GisStationsStaticDistrict in DataSheet:",
       GisStationsStaticDistrict
-    );
-    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
+    ); */
+    //console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
 
     // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
     const seenNames = new Set();
@@ -59,24 +62,28 @@ function DataSheet() {
       name: area.Name,
     }));
     setSystemListing(newSystemListing);
-    console.log("System Listing:", systemListing);
+    // console.log("System Listing:", systemListing);
   }, [GisStationsStaticDistrict]);
 
   const [checkedStations, setCheckedStations] = useState({});
 
-  const handleCheckboxChange = (id) => {
+  const handleCheckboxChange = (layerName) => {
     setCheckedStations((prev) => ({
       ...prev,
-      [id]: !prev[id],
+      [layerName]: !prev[layerName],
+    }));
+    setLayers((prevLayers) => ({
+      ...prevLayers,
+      [layerName]: !prevLayers[layerName],
     }));
   };
 
   const handleStationChange = (event) => {
-    console.log("Station selected:", event.target.value);
+    // console.log("Station selected:", event.target.value);
   };
 
   const resetView = () => {
-    console.log("View has been reset");
+    // console.log("View has been reset");
   };
 
   return (
@@ -115,7 +122,7 @@ function DataSheet() {
               id={`box-${station.id}`}
               className="accent-blue-500 checked:bg-blue-500"
               checked={checkedStations[station.id] || false}
-              onChange={() => handleCheckboxChange(station.id)}
+              onChange={() => handleCheckboxChange(station.name)}
             />
             <label
               htmlFor={`box-${station.id}`}
diff --git a/components/MapComponent - Kopie.js b/components/MapComponent - Kopie.js
new file mode 100644
index 000000000..c87de5b54
--- /dev/null
+++ b/components/MapComponent - Kopie.js	
@@ -0,0 +1,1134 @@
+// components/MapComponent.js
+import React, { useEffect, useRef, useState } from "react";
+import L, { marker } from "leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
+import "leaflet-contextmenu";
+import * as config from "../config/config.js";
+import dynamic from "next/dynamic";
+import "leaflet.smooth_marker_bouncing";
+import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
+import DataSheet from "../components/DataSheet";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { gisStationsStaticDistrictState } from "../states/gisStationState";
+import { gisSystemStaticState } from "../states/gisSystemState";
+import { mapLayersState } from "../states/mapLayersState";
+
+const MapComponent = ({ locations, onLocationUpdate }) => {
+  const layerVisibility = useRecoilValue(mapLayersState);
+  const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
+  const [map, setMap] = useState(null); // Zustand der Karteninstanz
+  const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
+  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] =
+    useRecoilState(gisStationsStaticDistrictState);
+  const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState(
+    []
+  ); // Zustand für Statusdaten
+  const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
+  const [GisSystemStatic, setGisSystemStatic] =
+    useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
+  const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten
+
+  // Konstanten für die URLs
+  const mapGisStationsStaticDistrictUrl =
+    config.mapGisStationsStaticDistrictUrl;
+  const mapGisStationsStatusDistrictUrl =
+    config.mapGisStationsStatusDistrictUrl;
+  const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
+  const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
+  const mapDataIconUrl = config.mapDataIconUrl;
+  const [oms, setOms] = useState(null); // State für OMS-Instanz
+
+  // Funktion zum Aktualisieren der Position in der Datenbank
+  const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
+    const response = await fetch("/api/updateLocation", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        id,
+        latitude: newLatitude,
+        longitude: newLongitude,
+      }),
+    });
+
+    if (response.ok) {
+      //schreib die neue Kooridnaten in die Console
+      //akuellisiere die Position in der Datenbank mit den neuen Koordinaten mit updateLocation mit SQL Anweisung UPDATE
+    } else {
+      console.error("Fehler beim Aktualisieren der Position");
+    }
+  };
+
+  // API-Daten laden für GisStationsStaticDistrict
+  //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(mapGisStationsStaticDistrictUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Points) {
+          setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
+        } else {
+          console.error(
+            'Erwartete Daten im "Points"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisStationsStaticDistrict([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 1: ", error);
+        setGisStationsStaticDistrict([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+
+  //GisStationsStaticDistrict Daten laden
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(mapGisStationsStaticDistrictUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Points) {
+          setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
+        } else {
+          console.error(
+            'Erwartete Daten im "Points"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisStationsStaticDistrict([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 1: ", error);
+        setGisStationsStaticDistrict([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
+  //GisStationsStatusDistrict Daten laden
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(mapGisStationsStatusDistrictUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Statis) {
+          setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
+        } else {
+          console.error(
+            'Erwartete Daten im "Statis"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisStationsStatusDistrict([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 2: ", error);
+        setGisStationsStatusDistrict([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
+  //GisStationsMeasurements Daten laden
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(mapGisStationsMeasurementsUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Statis) {
+          setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
+        } else {
+          console.error(
+            'Erwartete Daten im "Statis"-Array nicht gefunden',
+
+            jsonResponse
+          );
+          setGisStationsMeasurements([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 3: ", error);
+        setGisStationsMeasurements([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
+  //GisSystemStatic Daten laden
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        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'
+          /* console.log(
+            "GisSystemStatic in MapComponent.js :",
+            jsonResponse.Systems
+          ); */
+        } else {
+          console.error(
+            'Erwartete Daten im "Systems"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisSystemStatic([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 4: ", error);
+        setGisSystemStatic([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
+
+  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
+  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{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();
+
+  let newMap = [];
+
+  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));
+  };
+  // Initialisierung der karte und hinzuügen der Layers
+  useEffect(() => {
+    if (mapRef.current && !map) {
+      newMap = L.map(mapRef.current, {
+        center: [53.111111, 8.4625],
+        zoom: 8,
+        layers: [
+          TALAS,
+          ECI,
+          ULAF,
+          GSMModem,
+          CiscoRouter,
+          WAGO,
+          Siemens,
+          OTDR,
+          WDM,
+          GMA,
+          Sonstige,
+          TALASICL,
+        ],
+        zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
+        contextmenu: true,
+        contextmenuItems: [
+          { text: "Station hinzufügen", callback: showAddStationPopup },
+          {
+            text: "Station öffnen (Tab)",
+            icon: "img/screen_new.png",
+            callback: newLink,
+          },
+          {
+            text: "Station öffnen",
+            icon: "img/screen_same.png",
+            callback: sameLink,
+          },
+          {
+            text: "Koordinaten",
+            icon: "img/screen_same.png",
+            callback: lata,
+          },
+          "-", // Divider
+          { text: "Reinzoomen", callback: zoomIn },
+          { text: "Rauszoomen", callback: zoomOut },
+          { text: "Hier zentrieren", callback: centerHere },
+        ],
+      });
+
+      L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
+        attribution:
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      }).addTo(newMap);
+
+      const newOms = new window.OverlappingMarkerSpiderfier(newMap, {
+        nearbyDistance: 20, //Radius um einen Marker, innerhalb dessen andere Marker gruppiert werden in Pixel
+      });
+
+      setMap(newMap);
+      setOms(newOms);
+    }
+  }, [mapRef, map]); // Abhängigkeiten prüfen
+
+  // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+  /*     useEffect(() => {
+    // Remove old markers
+    if (map) {
+      map.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+          map.removeLayer(layer);
+        }
+      });
+
+      // Add new markers
+      locations.forEach((location) => {
+        const { latitude, longitude } = parsePoint(location.position);
+        const marker = L.marker([latitude, longitude], {
+          icon: L.icon({
+            iconUrl: "/location.svg",
+            iconSize: [34, 34],
+            iconAnchor: [17, 34],
+            popupAnchor: [0, -34],
+          }),
+          draggable: true,
+          id: location.idPoi,
+        });
+
+        marker.bindPopup(
+          `<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+          { permanent: false, closeButton: true }
+        );
+        marker.bindTooltip(
+          `<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+          { permanent: false, direction: "top", offset: [0, -30] }
+        );
+
+        marker.on("dragend", function (e) {
+          const newLat = e.target.getLatLng().lat;
+          const newLng = e.target.getLatLng().lng;
+          const markerId = e.target.options.id;
+          updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+            onLocationUpdate(markerId, newLat, newLng);
+          });
+        });
+
+        marker.addTo(map);
+      });
+    }
+  }, [map, locations, onLocationUpdate]);  */
+
+  //------------------------------------------
+  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
+    }
+  }
+  //----------------------------------
+  //-----Kontextmenu----------------
+  const newLink = (e) => {
+    try {
+      if (!e.relatedTarget || !e.relatedTarget.options) {
+        throw new Error("relatedTarget or options not defined");
+      }
+      alert("Neues Fenster: " + e.relatedTarget.options.test);
+      window
+        .open(`../devices/${e.relatedTarget.options.test}`, "_blank")
+        .focus();
+    } catch (error) {
+      console.error("Failed in newLink function:", error);
+    }
+  };
+
+  const sameLink = (e) => {
+    alert(e.relatedTarget.options.test);
+    window
+      .open("../devices/" + e.relatedTarget.options.test, "_parent")
+      .focus();
+  };
+
+  const lata = (e) => {
+    alert("Breitengrad: " + e.latlng.lat);
+  };
+
+  const zoomIn = (e) => {
+    newMap.flyTo(e.latlng, 12);
+  };
+
+  const zoomOut = (e) => {
+    fly();
+  };
+  const centerHere = (e) => {
+    newMap.panTo(e.latlng);
+  };
+
+  const showCoordinates = (e) => {
+    alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng);
+  };
+  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();
+  };
+  //-----Kontextmenu----ende------------
+  // Ensure this function is only called when map is initialized and available
+  const showAddStationPopup = (e) => {
+    if (!newMap) {
+      return;
+    }
+
+    const popupContent = L.DomUtil.create("div");
+    popupContent.innerHTML = `
+  <form id="addStationForm" class="m-0 p-2 w-full">
+  <div class="flex items-center mb-4">      
+    <label for="name" class="block mr-2 flex-none">Name:</label>
+    <input
+      type="text"
+      id="name"
+      name="name"
+      placeholder="Name der Station"
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+  
+  <div class="flex items-center mb-4">   
+    <label for="type" class="block mr-3 flex-none">Type:</label>
+    <input
+      type="text"
+      id="type"
+      name="type"
+      placeholder="Typ der Station"
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+  
+  <div class="flex items-center mb-4">
+    <label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
+    <input
+      type="text"
+      id="lat"
+      name="lat"
+      value="${e.latlng.lat.toFixed(5)}"
+      readonly
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+   
+  <div class="flex items-center mb-4">   
+    <label for="lng" class="block mr-2 flex-none">Längengrad:</label>
+    <input
+      type="text"
+      id="lng"
+      name="lng"
+      value="${e.latlng.lng.toFixed(5)}"
+      readonly
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+  
+  <button
+    type="submit"
+    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
+  >
+    Station hinzufügen
+  </button>
+</form>
+  `;
+
+    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(newMap);
+
+    // Attach event listener here
+    L.DomEvent.on(popupContent, "submit", handleSubmit);
+  };
+
+  // Funktion zum Hinzufügen eines neuen Standorts
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const form = event.target;
+    const data = {
+      name: form.name.value,
+      type: form.type.value,
+      latitude: form.lat.value,
+      longitude: form.lng.value,
+    };
+
+    try {
+      const response = await fetch("/api/addLocation", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+
+      const result = await response.json();
+
+      if (response.ok) {
+        alert("Standort erfolgreich hinzugefügt!");
+        form.reset(); // Formular zurücksetzen
+        // Hier könntest du weitere Aktionen durchführen, wie das Schließen des Popups oder das Aktualisieren der Marker auf der Karte
+      } else {
+        throw new Error(
+          result.error || "Ein unbekannter Fehler ist aufgetreten."
+        );
+      }
+    } catch (error) {
+      console.error("Fehler beim Hinzufügen des Standorts:", error);
+      alert(error.message);
+    }
+  }
+
+  function fly(stationValue) {
+    var x = 51.41321407879154;
+    var y = 7.739617925303934;
+    var zoom = 7;
+
+    newMap.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") ||
+      path.includes("major") ||
+      path.includes("minor") ||
+      path.includes("system")
+    ) {
+      // 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;
+  }
+
+  //------------------------------------------
+  //\talas5\TileMap\img\icons\icon1.png
+  // minor-marker-icon-23.png
+
+  // Marker hinzufügen für GisStationsStaticDistrict
+  /*  useEffect(() => {
+    // Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind
+    if (!map || !oms) {
+      console.error("Map or OMS is not initialized");
+      return;
+    }
+
+    // Alte Marker entfernen, indem alle Marker, die durch OMS verwaltet werden, gelöscht werden
+    oms.clearMarkers();
+    map.eachLayer((layer) => {
+      if (layer instanceof L.Marker) {
+        map.removeLayer(layer);
+      }
+    });
+
+    // Neue Marker für jede Station hinzufügen
+    GisStationsStaticDistrict.forEach((station) => {
+      // Filter für Statusobjekte dieser spezifischen Station
+      const matchingStatuses = GisStationsStatusDistrict.filter(
+        (status) => status.IdLD === station.IdLD
+      );
+
+      const marker = L.marker([station.X, station.Y], {
+        icon: L.icon({
+          iconUrl: "default-icon.png", // Default, wird geändert
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          shadowSize: [41, 41],
+        }),
+      }).addTo(map);
+
+      // Popup beim Überfahren mit der Maus öffnen
+      marker.on("mouseover", function (e) {
+        this.openPopup();
+      });
+
+      // Popup schließen, wenn die Maus den Marker verlässt
+      marker.on("mouseout", function (e) {
+        this.closePopup();
+      });
+
+      // String-Zusammenstellung für das Popup-Infofenster
+      let statusInfo = matchingStatuses
+        .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("");
+
+      // Bestimmen des Icons basierend auf dem Status
+      let iconPath = getIconPath(
+        matchingStatuses[0]?.Na || "",
+        station.Icon,
+        marker
+      );
+
+      marker.setIcon(
+        L.icon({
+          iconUrl: iconPath,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          shadowSize: [41, 41],
+        })
+      );
+      // Check if the icon path includes 'critical' and initiate bouncing
+      if (
+        iconPath.includes("critical") ||
+        iconPath.includes("major") ||
+        iconPath.includes("minor") ||
+        iconPath.includes("system")
+      ) {
+        marker.setBouncingOptions({
+          bounceHeight: 15,
+          contractHeight: 12,
+          bounceSpeed: 52,
+          contractSpeed: 52,
+          shadowAngle: null,
+        });
+        marker.bounce(3);
+      }
+           // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
+           if (station.LD_Name === "GMA Littwin (TEST)") {
+            marker.bindTooltip(
+              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
+              {
+                permanent: true,
+                direction: "right",
+                opacity: 1, // Tooltip immer sichtbar
+                offset: L.point({ x: 10, y: 0 }),
+              }
+            ).addTo(GMA);
+          } else {
+            marker.bindTooltip(
+              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
+              {
+                permanent: false,
+                direction: "right",
+                opacity: 0,
+                offset: L.point({ x: 10, y: 0 }),
+              }
+            ).addTo(GMA);
+          }
+      // Marker zu OMS und der Karte hinzufügen
+      oms.addMarker(marker);
+      marker.addTo(map).bindPopup(`
+        <b>${station.LD_Name}</b><br>
+        ${station.Device}<br>
+        ${station.Area_Short} (${station.Area_Name})<br>
+        ${station.Location_Short} (${station.Location_Name})<br>
+        ${statusInfo}<br>
+      `);
+      let LocID = station.IdLocation;
+
+    });
+ 
+  }, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
+
+  //------------------------------------------ */
+  //------------------------------------------ */
+  //useEffect zusammen von MySQL Daten bank und von APIs
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const responses = await Promise.all([
+          fetch(mapGisStationsStaticDistrictUrl),
+          fetch(mapGisStationsStatusDistrictUrl),
+          // Andere relevante API-Anfragen
+        ]);
+        const data = await Promise.all(responses.map((res) => res.json()));
+
+        if (data[0] && data[0].Points) {
+          setGisStationsStaticDistrict(data[0].Points);
+        } else {
+          console.error("Daten für GisStationsStaticDistrict nicht gefunden");
+          setGisStationsStaticDistrict([]);
+        }
+
+        if (data[1] && data[1].Statis) {
+          setGisStationsStatusDistrict(data[1].Statis);
+        } else {
+          console.error("Daten für GisStationsStatusDistrict nicht gefunden");
+          setGisStationsStatusDistrict([]);
+        }
+
+        // Weitere Datenverarbeitung...
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten: ", error);
+        // Setzen Sie Zustände auf leere Arrays oder Fehlerzustände
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (!map) return;
+    map.eachLayer((layer) => {
+      if (layer instanceof L.Marker) {
+        map.removeLayer(layer);
+      }
+    });
+
+    // Marker für lokale MySQL-Daten
+    locations.forEach((location) => {
+      const { latitude, longitude } = parsePoint(location.position);
+      const marker = L.marker([latitude, longitude], {
+        icon: L.icon({
+          iconUrl: "/location.svg",
+          iconSize: [34, 34],
+          iconAnchor: [17, 34],
+          popupAnchor: [0, -34],
+        }),
+        draggable: true,
+        id: location.idPoi,
+      });
+
+      marker.bindPopup(
+        `<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+        { permanent: false, closeButton: true }
+      );
+      marker.bindTooltip(
+        `<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+        { permanent: false, direction: "top", offset: [0, -30] }
+      );
+
+      marker.on("dragend", function (e) {
+        const newLat = e.target.getLatLng().lat;
+        const newLng = e.target.getLatLng().lng;
+        const markerId = e.target.options.id;
+        updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+          onLocationUpdate(markerId, newLat, newLng);
+        });
+      });
+
+      marker.addTo(map);
+
+      /*  if (marker[GisStationsStatusDistrict.IdLD].options.system === 1) {
+        if (namesArray.includes("TALAS")) {
+          marker[GisStationsStatusDistrict.IdLD].addTo(TALAS);
+          console.log("TALAS system added");
+        }
+      } */
+    });
+
+    // Marker für GisStationsStaticDistrict
+    GisStationsStaticDistrict.forEach((station) => {
+      //console.log("station 222:", station);
+      // Filter für Statusobjekte dieser spezifischen Station
+      const matchingStatuses = GisStationsStatusDistrict.filter(
+        (status) => status.IdLD === station.IdLD
+      );
+
+      const marker = L.marker([station.X, station.Y], {
+        icon: L.icon({
+          iconUrl: "default-icon.png", // Default, wird geändert
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          shadowSize: [41, 41],
+        }),
+      }).addTo(map);
+
+      // Popup beim Überfahren mit der Maus öffnen
+      marker.on("mouseover", function (e) {
+        this.openPopup();
+      });
+
+      // Popup schließen, wenn die Maus den Marker verlässt
+      marker.on("mouseout", function (e) {
+        this.closePopup();
+      });
+
+      // String-Zusammenstellung für das Popup-Infofenster
+      let statusInfo = matchingStatuses
+        .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("");
+
+      // Bestimmen des Icons basierend auf dem Status
+      let iconPath = getIconPath(
+        matchingStatuses[0]?.Na || "",
+        station.Icon,
+        marker
+      );
+
+      marker.setIcon(
+        L.icon({
+          iconUrl: iconPath,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          shadowSize: [41, 41],
+        })
+      );
+      // Check if the icon path includes 'critical' and initiate bouncing
+      if (
+        iconPath.includes("critical") ||
+        iconPath.includes("major") ||
+        iconPath.includes("minor") ||
+        iconPath.includes("system")
+      ) {
+        marker.setBouncingOptions({
+          bounceHeight: 15,
+          contractHeight: 12,
+          bounceSpeed: 52,
+          contractSpeed: 52,
+          shadowAngle: null,
+        });
+        marker.bounce(3);
+      }
+      //-------------------------------------------------------------------------------------------------------------------------
+      //-------------------------------------------------------------------------------------------------------------------------
+
+      // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
+      if (station.LD_Name === "GMA Littwin (TEST)") {
+        marker
+          .bindTooltip(
+            `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
+            {
+              permanent: true,
+              direction: "right",
+              opacity: 1, // Tooltip immer sichtbar
+              offset: L.point({ x: 10, y: 0 }),
+            }
+          )
+          .addTo(GMA);
+      } else {
+        marker
+          .bindTooltip(
+            `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
+            {
+              permanent: false,
+              direction: "right",
+              opacity: 0,
+              offset: L.point({ x: 10, y: 0 }),
+            }
+          )
+          .addTo(GMA);
+      }
+
+      //console.log("station.System:", station.System);
+      //Durchsuche GisSystemStatic und gib in der console den Attribute Name aus
+
+      //console.log("GisSystem:", GisSystemStatic);
+      //-------------------------------------------------------------------------------------------------------------------------
+      //-------------------------------------------------------------------------------------------------------------------------
+      // Marker zu OMS und der Karte hinzufügen
+      oms.addMarker(marker);
+      marker.addTo(map).bindPopup(`
+        <b>${station.LD_Name}</b><br>
+        ${station.Device}<br>
+        ${station.Area_Short} (${station.Area_Name})<br>
+        ${station.Location_Short} (${station.Location_Name})<br>
+        ${statusInfo}<br>
+      `);
+      let LocID = station.IdLocation;
+      //console.log("station test :", station);
+
+      //alle Layers anzeigen unter GMA sind alle
+      // console.log("TALAS Layers:", TALAS);
+
+      //TALAS Layer entfernen
+      // map.removeLayer(layers.TALAS);
+      // wenn station.LD_Name = "GMA Littwin (TEST)" dann entferne den Marker
+      /*  if (station.LD_Name === "GMA Littwin (TEST)") {
+        map.removeLayer(marker);
+      }
+      // wenn station.LD_Name = "CPL Bentheim" dann entferne den Marker
+      if (station.LD_Name === "CPL Bentheim") {
+        map.removeLayer(marker);
+      } */
+      map.removeLayer(marker);
+    });
+  }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
+
+  //GisStationsStatusDistrict
+  //const [talasSystem, setTalasSystem] = useState({});
+  const [layerTALAS, setLayerTALAS] = useState([]);
+
+  // GisSystemStatic Daten laden und Systemdaten speichern
+  // Systeminformationen aus GisSystemStatic aktualisieren--------------1
+  useEffect(() => {
+    GisSystemStatic.forEach((system) => {
+      if (system.Name === "TALAS") {
+        setLayerTALAS((prev) => {
+          // Prüfen, ob der Eintrag bereits existiert, bevor Hinzufügung
+          const exists = prev.some((item) => item.IdSystem === system.IdSystem);
+          return exists ? prev : [...prev, system];
+        });
+      }
+    });
+  }, [GisSystemStatic]);
+
+  // Systeminformationen aus GisStationsStaticDistrict aktualisieren-------2
+  useEffect(() => {
+    if (!map || !GisStationsStaticDistrict) return;
+  
+    // Clear existing layers to ensure no old markers persist
+    TALAS.clearLayers();
+  
+    GisStationsStaticDistrict.forEach(station => {
+      if (parseInt(station.System) === 1) {
+        const icon = L.icon({
+          iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41]
+        });
+  
+        const marker = L.marker([station.X, station.Y], { icon });
+        marker.addTo(TALAS);
+  
+        marker.bindPopup(`
+          <b>${station.LD_Name}</b><br>
+          ${station.Device}<br>
+          ${station.Area_Short} (${station.Area_Name})<br>
+          ${station.Location_Short} (${station.Location_Name})<br>
+        `);
+  
+        // Debug events
+        marker.on('mouseover', () => marker.openPopup());
+        marker.on('mouseout', () => marker.closePopup());
+      }
+    });
+  
+    TALAS.addTo(map);
+  }, [map, GisStationsStaticDistrict]);
+  
+  
+//---------------------------------------------------------------------------------
+const [activeLayer, setActiveLayer] = useState(null);
+
+useEffect(() => {
+  if (!map) return;
+
+  // Erstelle eine Funktion, um alle Layer zu entfernen
+  const removeLayers = () => {
+    [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL].forEach(layer => {
+      if (map.hasLayer(layer)) {
+        map.removeLayer(layer);
+      }
+    });
+  };
+
+  // Entferne alle Layer zuerst
+  removeLayers();
+
+  // Füge nur den aktiven Layer hinzu, wenn er definiert ist
+  if (activeLayer && map.hasLayer(activeLayer) === false) {
+    activeLayer.addTo(map);
+  }
+}, [activeLayer, map]); // Abhängigkeiten von activeLayer und map
+
+useEffect(() => {
+  // Setze TALAS als aktiven Layer, wenn die entsprechenden Daten geladen sind
+  if (GisStationsStaticDistrict.length > 0) {
+    setActiveLayer(TALAS); // Diese Funktion aktualisiert den aktiven Layer, der dann im anderen useEffect behandelt wird
+  }
+}, [GisStationsStaticDistrict]); // Reagiere auf Änderungen in GisStationsStaticDistrict
+
+
+  // Verwenden von Systemdaten zur Aktualisierung der LayerGroup-----------3
+  useEffect(() => {
+    console.log("Verarbeitung der talasSystem-Daten:", layerTALAS);
+    // Hier könnten Sie Ihre Leaflet LayerGroup-Aktionen ausführen
+  }, [layerTALAS]);
+
+  //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
+
+  //------------------------------------------
+  /*   useEffect(() => {
+    if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)
+      return;
+
+    // Alte Marker löschen
+    map.eachLayer((layer) => {
+      if (layer instanceof L.Marker) {
+        map.removeLayer(layer);
+      }
+    });
+
+    // Neuen Markern basierend auf den System IDs zuordnen
+    GisStationsStaticDistrict.forEach((station) => {
+      // Finden des entsprechenden System-Objekts
+      const system = GisSystemStatic.find((s) => s.IdSystem === station.System);
+      console.log("System idsystem:", system);
+      console.log("Station system:", station);
+      //station Object zu layerGroup hinzufügen
+
+      if (system) {
+        const marker = L.marker([station.X, station.Y], {
+          icon: L.icon({
+            iconUrl: "default-icon.png",
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41],
+          }),
+        });
+
+        // Marker dem entsprechenden Layer hinzufügen
+        if (layers[system.LayerName]) {
+          layers[system.LayerName].addLayer(marker);
+        }
+        //zeige alle Marker des Layers an
+        //console.log("Layer GMA:", TALAS);
+
+        // Optional: Popup oder Tooltip hinzufügen
+        marker.bindPopup(
+          `Station: ${station.LD_Name}<br>System: ${system.Name}`
+        );
+      }
+    });
+    console.log("layerGroup GMA :", GMA._layers);
+    console.log("layer TALAS :", layers.GMA._layers);
+  }, [map, GisStationsStaticDistrict, GisSystemStatic]); */
+
+  //------------------------------------------
+  /*   useEffect(() => {
+    if (map) {
+      Object.keys(layerVisibility).forEach((layerName) => {
+        const layer = layers[layerName];
+        if (layer) {
+          console.log(
+            `Updating layer ${layerName}: ${layerVisibility[layerName] ? "add" : "remove"}`
+          );
+          if (layerVisibility[layerName]) {
+            map.addLayer(layer);
+          } else {
+            map.removeLayer(layer);
+          }
+        } else {
+          console.error(
+            "Versuch, nicht definierten Layer zu manipulieren:",
+            layerName
+          );
+        }
+      });
+    }
+  }, [layerVisibility, map]); */
+
+  //------------------------------------------ */
+  /*   let uniqueIdLDsData = [];
+  let Tooltip = [];
+
+  for (let index = 0; index < uniqueIdLDsData.length; index++) {
+    let element = uniqueIdLDsData[index].split(",");
+    let lat = element[0];
+    let lng = element[1];
+    let ID = element[2];
+    let IdLD = element[3];
+    let LocID = element[4];
+
+    Tooltip[LocID] = L.marker([lat, lng], { icon: invisibleMarker })
+      .bindTooltip(
+        '<div id="tip-' +
+          LocID +
+          '">' +
+          '<div id="areaname' +
+          LocID +
+          '" style="font-weight:700;font-size:0.9rem">---</div>' +
+          '<div id="value1-' +
+          LocID +
+          '" style="font-weight:700;color:blue">---</div>' +
+          '<div id="value2-' +
+          LocID +
+          '" style="font-weight:700;color:red">---</div>' +
+          '<div id="value3-' +
+          LocID +
+          '" style="font-weight:700;color:#ECC5C0">---</div>' +
+          '<div id="value4-' +
+          LocID +
+          '" style="font-weight:700;color:green">---</div>' +
+          "</div>",
+        {
+          permanent: true,
+          direction: "right",
+          opacity: 0,
+          offset: L.point({ x: 10, y: 0 }),
+        }
+      )
+      .openTooltip()
+      .addTo(GMA);
+  } */
+
+  //------------------------------------------
+
+  return (
+    <>
+      <DataSheet className="z-50" />
+      <div
+        id="map"
+        ref={mapRef}
+        className="z-0"
+        style={{ height: "100vh", width: "100vw" }}
+      ></div>
+    </>
+  );
+};
+
+export default MapComponent;
diff --git a/components/MapComponent.js b/components/MapComponent.js
index 5753cc951..973f9e8bd 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -9,11 +9,13 @@ import dynamic from "next/dynamic";
 import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
 import DataSheet from "../components/DataSheet";
-import { useRecoilState } from "recoil";
-import { gisStationsStaticDistrictState } from "../features/gisStationState";
-import { gisSystemStaticState } from "../features/gisSystemState";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { gisStationsStaticDistrictState } from "../states/gisStationState";
+import { gisSystemStaticState } from "../states/gisSystemState";
+import { mapLayersState } from "../states/mapLayersState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+  const layerVisibility = useRecoilValue(mapLayersState);
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
   const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
@@ -174,7 +176,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
         if (jsonResponse && jsonResponse.Systems) {
           setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
-          console.log("GisSystemStatic:", jsonResponse.Systems);
+          /* console.log(
+            "GisSystemStatic in MapComponent.js :",
+            jsonResponse.Systems
+          ); */
         } else {
           console.error(
             'Erwartete Daten im "Systems"-Array nicht gefunden',
@@ -755,10 +760,18 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
 
       marker.addTo(map);
+
+      /*  if (marker[GisStationsStatusDistrict.IdLD].options.system === 1) {
+        if (namesArray.includes("TALAS")) {
+          marker[GisStationsStatusDistrict.IdLD].addTo(TALAS);
+          console.log("TALAS system added");
+        }
+      } */
     });
 
     // Marker für GisStationsStaticDistrict
     GisStationsStaticDistrict.forEach((station) => {
+      //console.log("station 222:", station);
       // Filter für Statusobjekte dieser spezifischen Station
       const matchingStatuses = GisStationsStatusDistrict.filter(
         (status) => status.IdLD === station.IdLD
@@ -829,6 +842,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
         marker.bounce(3);
       }
+      //-------------------------------------------------------------------------------------------------------------------------
+      //-------------------------------------------------------------------------------------------------------------------------
+
       // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
       if (station.LD_Name === "GMA Littwin (TEST)") {
         marker
@@ -855,6 +871,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           )
           .addTo(GMA);
       }
+
+      //console.log("station.System:", station.System);
+      //Durchsuche GisSystemStatic und gib in der console den Attribute Name aus
+
+      //console.log("GisSystem:", GisSystemStatic);
+      //-------------------------------------------------------------------------------------------------------------------------
+      //-------------------------------------------------------------------------------------------------------------------------
       // Marker zu OMS und der Karte hinzufügen
       oms.addMarker(marker);
       marker.addTo(map).bindPopup(`
@@ -865,11 +888,199 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         ${statusInfo}<br>
       `);
       let LocID = station.IdLocation;
+      //console.log("station test :", station);
+
+      //alle Layers anzeigen unter GMA sind alle
+      // console.log("TALAS Layers:", TALAS);
+
+      //TALAS Layer entfernen
+      // map.removeLayer(layers.TALAS);
+      // wenn station.LD_Name = "GMA Littwin (TEST)" dann entferne den Marker
+      /*  if (station.LD_Name === "GMA Littwin (TEST)") {
+        map.removeLayer(marker);
+      }
+      // wenn station.LD_Name = "CPL Bentheim" dann entferne den Marker
+      if (station.LD_Name === "CPL Bentheim") {
+        map.removeLayer(marker);
+      } */
+      map.removeLayer(marker);
     });
   }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
 
+  //-------------------------------------------------------------------------------------------------------------------------
+  //GisStationsStatusDistrict
+  //const [talasSystem, setTalasSystem] = useState({});
+  const [layerTALAS, setLayerTALAS] = useState([]);
+
+  // GisSystemStatic Daten laden und Systemdaten speichern
+  // Systeminformationen aus GisSystemStatic aktualisieren--------------1
+
+  useEffect(() => {
+    if (!map || !GisStationsStaticDistrict) return;
+    
+    // Clear existing markers to prevent duplicates
+    TALAS.clearLayers();
+  
+    // Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
+    if (!oms) {
+      setOms(new OverlappingMarkerSpiderfier(map, {
+        // Konfigurationen für OverlappingMarkerSpiderfier
+        keepSpiderfied: true
+      }));
+    }
+  
+    GisStationsStaticDistrict.forEach(station => {
+      if (parseInt(station.System) === 1) {
+        const icon = L.icon({
+          iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41] // iconAnchor set to the tip of the icon
+        });
+  
+        const marker = L.marker([station.X, station.Y], { icon });
+        
+        // Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
+        marker.addTo(TALAS);
+        oms.addMarker(marker);
+  
+        // Adjust the popup anchor based on your icon's appearance
+        marker.bindPopup(`
+          <b>${station.LD_Name}</b><br>
+          ${station.Device}<br>
+          ${station.Area_Short} (${station.Area_Name})<br>
+          ${station.Location_Short} (${station.Location_Name})<br>
+        `, {
+          offset: L.point(0, -20),
+          autoClose: false
+        });
+  
+        // Events for mouse interactions
+        marker.on('mouseover', () => marker.openPopup());
+        marker.on('mouseout', () => marker.closePopup());
+      }
+    });
+  
+    // Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
+    TALAS.addTo(map);
+  
+  }, [map, GisStationsStaticDistrict, oms]);
+  
+  
+
+//---------------------------------------------------------------------------------
+const [activeLayer, setActiveLayer] = useState(null);
+
+useEffect(() => {
+  if (!map) return;
+
+  // Erstelle eine Funktion, um alle Layer zu entfernen
+  const removeLayers = () => {
+    [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL].forEach(layer => {
+      if (map.hasLayer(layer)) {
+        map.removeLayer(layer);
+      }
+    });
+  };
+
+  // Entferne alle Layer zuerst
+  removeLayers();
+
+  // Füge nur den aktiven Layer hinzu, wenn er definiert ist
+  if (activeLayer && map.hasLayer(activeLayer) === false) {
+    activeLayer.addTo(map);
+  }
+}, [activeLayer, map]); // Abhängigkeiten von activeLayer und map
+
+useEffect(() => {
+  // Setze TALAS als aktiven Layer, wenn die entsprechenden Daten geladen sind
+  if (GisStationsStaticDistrict.length > 0) {
+    setActiveLayer(TALAS); // Diese Funktion aktualisiert den aktiven Layer, der dann im anderen useEffect behandelt wird
+  }
+}, [GisStationsStaticDistrict]); // Reagiere auf Änderungen in GisStationsStaticDistrict
+
+
+  // Verwenden von Systemdaten zur Aktualisierung der LayerGroup-----------3
+  useEffect(() => {
+    console.log("Verarbeitung der talasSystem-Daten:", layerTALAS);
+    // Hier könnten Sie Ihre Leaflet LayerGroup-Aktionen ausführen
+  }, [layerTALAS]);
+
+  //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
+
+  //------------------------------------------
+  /*   useEffect(() => {
+    if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)
+      return;
+
+    // Alte Marker löschen
+    map.eachLayer((layer) => {
+      if (layer instanceof L.Marker) {
+        map.removeLayer(layer);
+      }
+    });
+
+    // Neuen Markern basierend auf den System IDs zuordnen
+    GisStationsStaticDistrict.forEach((station) => {
+      // Finden des entsprechenden System-Objekts
+      const system = GisSystemStatic.find((s) => s.IdSystem === station.System);
+      console.log("System idsystem:", system);
+      console.log("Station system:", station);
+      //station Object zu layerGroup hinzufügen
+
+      if (system) {
+        const marker = L.marker([station.X, station.Y], {
+          icon: L.icon({
+            iconUrl: "default-icon.png",
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41],
+          }),
+        });
+
+        // Marker dem entsprechenden Layer hinzufügen
+        if (layers[system.LayerName]) {
+          layers[system.LayerName].addLayer(marker);
+        }
+        //zeige alle Marker des Layers an
+        //console.log("Layer GMA:", TALAS);
+
+        // Optional: Popup oder Tooltip hinzufügen
+        marker.bindPopup(
+          `Station: ${station.LD_Name}<br>System: ${system.Name}`
+        );
+      }
+    });
+    console.log("layerGroup GMA :", GMA._layers);
+    console.log("layer TALAS :", layers.GMA._layers);
+  }, [map, GisStationsStaticDistrict, GisSystemStatic]); */
+
+  //------------------------------------------
+  /*   useEffect(() => {
+    if (map) {
+      Object.keys(layerVisibility).forEach((layerName) => {
+        const layer = layers[layerName];
+        if (layer) {
+          console.log(
+            `Updating layer ${layerName}: ${layerVisibility[layerName] ? "add" : "remove"}`
+          );
+          if (layerVisibility[layerName]) {
+            map.addLayer(layer);
+          } else {
+            map.removeLayer(layer);
+          }
+        } else {
+          console.error(
+            "Versuch, nicht definierten Layer zu manipulieren:",
+            layerName
+          );
+        }
+      });
+    }
+  }, [layerVisibility, map]); */
+
   //------------------------------------------ */
-  let uniqueIdLDsData = [];
+  /*   let uniqueIdLDsData = [];
   let Tooltip = [];
 
   for (let index = 0; index < uniqueIdLDsData.length; index++) {
@@ -910,7 +1121,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       )
       .openTooltip()
       .addTo(GMA);
-  }
+  } */
 
   //------------------------------------------
 
diff --git a/config/config.js b/config/config.js
index 6357eb528..0319da2b9 100644
--- a/config/config.js
+++ b/config/config.js
@@ -31,17 +31,17 @@ if (typeof window !== "undefined") {
   user = url.searchParams.get("u") || "485"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485'
 
   // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
-  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
+  /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
 
-  /*  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+   mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
 
   // URLs zu Offline-Daten, falls benötigt
 }
diff --git a/features/gisStationState.js b/features/gisStationState.js
deleted file mode 100644
index c0488f2e6..000000000
--- a/features/gisStationState.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// Pfad: features/gisStationState.js
-import { atom } from 'recoil';
-
-export const gisStationsStaticDistrictState = atom({
-  key: 'gisStationsStaticDistrict', // Eindeutiger Schlüssel (innerhalb des Projekts)
-  default: [], // Standardwert (Anfangszustand)
-});
diff --git a/pages/api/[...path].js b/pages/api/[...path].js
index 299b2253b..49efc5183 100644
--- a/pages/api/[...path].js
+++ b/pages/api/[...path].js
@@ -2,8 +2,8 @@
 import { createProxyMiddleware } from "http-proxy-middleware";
 
 export default createProxyMiddleware({
-  target: "http://10.10.0.13", // Ziel-URL des Proxys
-  //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
+  //target: "http://10.10.0.13", // Ziel-URL des Proxys
+  target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
   changeOrigin: true,
   pathRewrite: {
     "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert
diff --git a/states/gisStationState.js b/states/gisStationState.js
new file mode 100644
index 000000000..e373a6271
--- /dev/null
+++ b/states/gisStationState.js
@@ -0,0 +1,7 @@
+// Pfad: states/gisStationState.js
+import { atom } from "recoil";
+
+export const gisStationsStaticDistrictState = atom({
+  key: "gisStationsStaticDistrict", // Eindeutiger Schlüssel (innerhalb des Projekts)
+  default: [], // Standardwert (Anfangszustand)
+});
diff --git a/features/gisSystemState.js b/states/gisSystemState.js
similarity index 84%
rename from features/gisSystemState.js
rename to states/gisSystemState.js
index 9dcf5a42f..28cec0ad1 100644
--- a/features/gisSystemState.js
+++ b/states/gisSystemState.js
@@ -1,4 +1,4 @@
-// Pfad: features/gisStationState.js
+// Pfad: states/gisStationState.js
 import { atom } from "recoil";
 
 export const gisSystemStaticState = atom({
diff --git a/states/mapLayersState.js b/states/mapLayersState.js
new file mode 100644
index 000000000..d16f180dc
--- /dev/null
+++ b/states/mapLayersState.js
@@ -0,0 +1,24 @@
+// states/mapLayersState.js
+import { atom } from "recoil";
+
+export const mapLayersState = atom({
+  key: "mapLayersState", // Eindeutiger Schlüssel für das Atom
+  default: {
+    // Standardwerte für jeden Layer
+    TALAS: false,
+    ECI: false,
+    ULAF: false,
+    GSMModem: false,
+    CiscoRouter: false,
+    WAGO: false,
+    Siemens: false,
+    OTDR: false,
+    WDM: false,
+    GMA: false,
+    Messstellen: false,
+    TALASICL: false,
+    DAUZ: false,
+    SMSFunkmodem: false,
+    Sonstige: false,
+  },
+});