TALAS Checkbox zum ein- und ausblenden von Markers auf dem Map

components/DataSheet.js

@@ -1,12 +1,13 @@
 // components/DataSheet.js
 import React, { useEffect, useState } from "react";
-import { useRecoilValue, useRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
-import { gisStationsStaticDistrictState } from "../states/gisStationState";
+import { gisStationsStaticDistrictState } from "../store/gisStationState";
-import { gisSystemStaticState } from "../states/gisSystemState";
+import { gisSystemStaticState } from "../store/gisSystemState";
-import { mapLayersState } from "../states/mapLayersState";
+import { mapLayersState } from "../store/mapLayersState";
-
 function DataSheet() {
-  const [layers, setLayers] = useRecoilState(mapLayersState);
+  const [mapLayersVisibility, setMapLayersVisibility] =
+    useRecoilState(mapLayersState);
+  // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
   const [uniqueSystems, setUniqueSystems] = useState([]);
   const [stationListing, setStationListing] = useState([]);
@@ -17,6 +18,13 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
 
   useEffect(() => {
+    console.log(
+      "GisStationsStaticDistrict in DataSheet:",
+      GisStationsStaticDistrict
+    );
+    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
+
+    // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
       const isUnique = !seenNames.has(item.Area_Name);
@@ -25,6 +33,7 @@ function DataSheet() {
       }
       return isUnique;
     });
+
     setUniqueAreas(filteredAreas);
 
     const seenSystemNames = new Set();
@@ -35,45 +44,58 @@ function DataSheet() {
       }
       return isUnique;
     });
+
     setUniqueSystems(filteredSystems);
 
+    // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
     const newStationListing = filteredAreas
-      .map((area, index) => ({ id: index + 1, name: area.Area_Name }))
+      .map((area, index) => ({
-      .sort((a, b) => a.name.localeCompare(b.name));
+        id: index + 1, // Zuweisung einer eindeutigen ID
+        name: area.Area_Name,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen
+
     setStationListing(newStationListing);
 
-    const newSystemListing = filteredSystems.map((system, index) => ({
+    //----------
-      id: index + 1,
+    const newSystemListing = filteredSystems.map((area, index) => ({
-      name: system.Name.replace(/[^a-zA-Z0-9]/g, ""), // Ersetzen von Sonderzeichen
+      id: index + 1, // Zuweisung einer eindeutigen ID
-      displayName: system.Name, // Beibehalten des originalen Namens für die Anzeige
+      name: area.Name,
     }));
     setSystemListing(newSystemListing);
+    console.log("System Listing:", systemListing);
+  }, [GisStationsStaticDistrict]);
 
-    console.log("Station Listing:", newStationListing);
+  const [checkedStations, setCheckedStations] = useState({});
-    console.log("System Listing:", newSystemListing);
-  }, [GisStationsStaticDistrict, GisSystemStatic]);
 
-  const handleCheckboxChange = (layerKey) => {
+  const handleCheckboxChangeTALAS = (event) => {
-    console.log(
+    const { checked } = event.target;
-      `Ändern der Sichtbarkeit für: ${layerKey}, aktueller Wert: ${layers[layerKey]}`
+    setMapLayersVisibility((prev) => ({
-    );
+      ...prev,
-    setLayers((prevLayers) => {
+      TALAS: checked,
-      const newLayers = {
+    }));
-        ...prevLayers,
-        [layerKey]: !prevLayers[layerKey],
-      };
-      console.log(`Neuer Wert für ${layerKey}: ${newLayers[layerKey]}`);
-      return newLayers;
-    });
   };
 
   const handleStationChange = (event) => {
-    console.log("Ausgewählte Station:", event.target.value);
+    console.log("Station selected:", event.target.value);
   };
 
   const resetView = () => {
-    console.log("Ansicht wird zurückgesetzt.");
+    console.log("View has been reset");
   };
+  useEffect(() => {
+    console.log("Checked Stations:", checkedStations);
+    // Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus
+    const talasStation = systemListing.find(
+      (station) => station.name === "TALAS"
+    );
+    if (talasStation) {
+      console.log(
+        "TALAS Station ist gecheckt:",
+        checkedStations[talasStation.id]
+      );
+    }
+  }, [checkedStations, systemListing]);
 
   return (
     <div
@@ -82,6 +104,7 @@ function DataSheet() {
     >
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
+          {/* Dropdown */}
           <select
             onChange={handleStationChange}
             id="stationListing"
@@ -94,29 +117,25 @@ function DataSheet() {
               </option>
             ))}
           </select>
+          {/* Icon */}
           <img
             src="/img/expand-icon.svg"
             alt="Expand"
             className="h-6 w-6 ml-2"
           />
         </div>
-        {systemListing.map((station) => (
+
-          <div key={station.id} className="flex items-center">
+        {/* Liste der Stationen mit Checkboxen */}
-            <input
+
-              type="checkbox"
+        <div>
-              id={`box-${station.id}`}
+          <input
-              className="accent-blue-500 checked:bg-blue-500"
+            type="checkbox"
-              checked={layers[`show_${station.name}`] || false}
+            checked={mapLayersVisibility.TALAS}
-              onChange={() => handleCheckboxChange(`show_${station.name}`)}
+            onChange={handleCheckboxChangeTALAS}
-            />
+          />
-            <label
+          <label className="text-sm font-bold ml-2">TALAS</label>
-              htmlFor={`box-${station.id}`}
+          {/* Weitere Inhalte der Datenblattkomponente */}
-              className="text-sm font-bold ml-2"
+        </div>
-            >
-              {station.name}
-            </label>
-          </div>
-        ))}
       </div>
     </div>
   );

components/MapComponent.js

@@ -10,14 +10,14 @@ 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 { gisStationsStaticDistrictState } from "../store/gisStationState";
-import { gisSystemStaticState } from "../states/gisSystemState";
+import { gisSystemStaticState } from "../store/gisSystemState";
-import { mapLayersState } from "../states/mapLayersState";
+import { mapLayersState } from "../store/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 [oms, setOms] = useState(null); // State für OMS-Instanz
   const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
   const [GisStationsStaticDistrict, setGisStationsStaticDistrict] =
     useRecoilState(gisStationsStaticDistrictState);
@@ -37,7 +37,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   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) => {
@@ -176,10 +175,7 @@ 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(
+          console.log("GisSystemStatic:", jsonResponse.Systems);
-            "GisSystemStatic in MapComponent.js :",
-            jsonResponse.Systems
-          ); */
         } else {
           console.error(
             'Erwartete Daten im "Systems"-Array nicht gefunden',
@@ -213,8 +209,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   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);
@@ -227,10 +221,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       .then((response) => setOnline(response.ok))
       .catch(() => setOnline(false));
   };
+  let initMap = [];
   // Initialisierung der karte und hinzuügen der Layers
   useEffect(() => {
     if (mapRef.current && !map) {
-      newMap = L.map(mapRef.current, {
+      initMap = L.map(mapRef.current, {
         center: [53.111111, 8.4625],
         zoom: 8,
         layers: [
@@ -247,7 +242,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           Sonstige,
           TALASICL,
         ],
-        zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
+        zoomControl: false,
         contextmenu: true,
         contextmenuItems: [
           { text: "Station hinzufügen", callback: showAddStationPopup },
@@ -276,63 +271,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
         attribution:
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-      }).addTo(newMap);
+      }).addTo(initMap);
 
-      const newOms = new window.OverlappingMarkerSpiderfier(newMap, {
+      const oms = new window.OverlappingMarkerSpiderfier(initMap, {
-        nearbyDistance: 20, //Radius um einen Marker, innerhalb dessen andere Marker gruppiert werden in Pixel
+        nearbyDistance: 20,
       });
 
-      setMap(newMap);
+      setMap(initMap);
-      setOms(newOms);
+      setOms(oms);
-    }
-  }, [mapRef, map]); // Abhängigkeiten prüfen
 
-  // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+      // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
-  /*     useEffect(() => {
+      initMap.whenReady(() => {
-    // Remove old markers
+        console.log("Karte ist jetzt bereit und initialisiert.");
-    if (map) {
+        // Rufe hier Funktionen auf, die eine initialisierte Karte benötigen.
-      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]);  */
+  }, [mapRef, map]); // Prüfe die Abhängigkeiten sorgfältig
 
   //------------------------------------------
   function parsePoint(pointString) {
@@ -378,14 +332,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   };
 
   const zoomIn = (e) => {
-    newMap.flyTo(e.latlng, 12);
+    initMap.flyTo(e.latlng, 12);
   };
 
   const zoomOut = (e) => {
     fly();
   };
   const centerHere = (e) => {
-    newMap.panTo(e.latlng);
+    initMap.panTo(e.latlng);
   };
 
   const showCoordinates = (e) => {
@@ -521,7 +475,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     var y = 7.739617925303934;
     var zoom = 7;
 
-    newMap.flyTo([x, y], zoom);
+    initMap.flyTo([x, y], zoom);
   }
 
   function getIconPath(status, iconNumber, marker) {
@@ -553,137 +507,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     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 () => {
@@ -719,451 +542,149 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     fetchData();
   }, []);
 
+  //-----------------------------------------------------------------
+  //         TALAS  Marker hinzufügen
+  //-----------------------------------------------------------------
+
+  const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
+
+  const [talasMarkers, setTalasMarkers] = useState([]);
+  // Daten von einer externen Quelle laden
   useEffect(() => {
-    if (!map) return;
+    async function fetchData() {
-    map.eachLayer((layer) => {
+      try {
-      if (layer instanceof L.Marker) {
+        const responses = await Promise.all([
-        map.removeLayer(layer);
+          fetch(config.mapGisStationsStaticDistrictUrl),
-      }
+          fetch(config.mapGisStationsStatusDistrictUrl),
-    });
+        ]);
+        const [jsonResponse, statusResponse] = await Promise.all(
+          responses.map((res) => res.json())
+        );
 
-    // Marker für lokale MySQL-Daten
+        if (
-    locations.forEach((location) => {
+          jsonResponse &&
-      const { latitude, longitude } = parsePoint(location.position);
+          jsonResponse.Points &&
-      const marker = L.marker([latitude, longitude], {
+          statusResponse &&
-        icon: L.icon({
+          statusResponse.Statis
-          iconUrl: "/location.svg",
+        ) {
-          iconSize: [34, 34],
+          const statisMap = new Map(
-          iconAnchor: [17, 34],
+            statusResponse.Statis.map((s) => [s.IdLD, s])
-          popupAnchor: [0, -34],
+          );
-        }),
+          let markersData = jsonResponse.Points.filter(
-        draggable: true,
+            (p) => p.System === 1
-        id: location.idPoi,
+          ).map((p) => {
-      });
+            const statis = statisMap.get(p.IdLD);
+            const marker = L.marker([p.X, p.Y], {
+              icon: L.icon({
+                iconUrl: statis
+                  ? `img/icons/${statis.Na}-marker-icon-${p.Icon}.png`
+                  : `img/icons/marker-icon-${p.Icon}.png`,
+                iconSize: [25, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+              }),
+              bounceOnAdd: !!statis,
+            });
 
-      marker.bindPopup(
+            if (statis) {
-        `<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>`,
+              marker.on("add", () => marker.bounce(3));
-        { 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);
+            // Ein Popup und Tooltip mit Informationen zur Station binden
+            marker.bindPopup(
+              `<b>Station: ${p.LD_Name}</b><br>Device: ${p.Device}`
+            );
+            /*  marker.bindTooltip(
+              `<div class="tooltip-content">Station: ${p.LD_Name}</div>`,
+              {
+                permanent: false,
+                direction: "top",
+              }
+            ); */
+
+            return marker;
+          });
+          setTalasMarkers(markersData);
+        }
+      } catch (error) {
+        console.error("Error fetching data: ", error);
+      }
+    }
+
+    if (!map) return;
+
+    fetchData();
+  }, [map]); // Abhängigkeit nur auf `map` setzen
+
+  useEffect(() => {
+    if (map && talasMarkers.length) {
+      talasMarkers.forEach((marker) => {
+        marker.addTo(map);
+        oms.addMarker(marker);
+
+        // Popup beim Überfahren mit der Maus öffnen und schließen
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+      });
+      map.addLayer(TALAS);
+    }
+  }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("talasMarkers", talasMarkers);
+  //-------------------------------------------
+  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 {
-        marker
+        talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
-          .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);
+    // Apply visibility state to the TALAS layer
-      //Durchsuche GisSystemStatic und gib in der console den Attribute Name aus
+    toggleLayer(mapLayersVisibility.TALAS);
+  }, [map, talasMarkers, mapLayersVisibility.TALAS]); // Depend on map, markers array, and visibility state
 
-      //console.log("GisSystem:", GisSystemStatic);
+  const handleCheckboxChange = (event) => {
-      //-------------------------------------------------------------------------------------------------------------------------
+    const { checked } = event.target;
-      //-------------------------------------------------------------------------------------------------------------------------
+    setMapLayersVisibility((prev) => ({
-      // Marker zu OMS und der Karte hinzufügen
+      ...prev,
-      oms.addMarker(marker);
+      TALAS: checked,
-      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
-
-  //-------------------------------------------------------------------------------------------------------------------------
-  //GMA Layer
-  const [layerGMA, setLayerGMA] = useState([]);
-  const [showGMA, setShowGMA] = useState(true);
-  useEffect(() => {
-    if (!map || !GisStationsStaticDistrict) return;
-
-    // Clear existing markers to prevent duplicates
-    GMA.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) === 11) {
-        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(GMA);
-        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
-    //GMA.addTo(map);
-    if (!map) return;
-    if (showGMA) {
-      GMA.addTo(map);
-    } else {
-      GMA.remove();
-    }
-    setLayerGMA(GMA);
-    //console.log("layerGMA:", layerGMA);
-    console.log("GMA layerGroup:", GMA);
-  }, [map, GisStationsStaticDistrict, oms]);
-  //---------------------------------------------------------------------------------
-  //-------------------------------------------------------------------------------------------------------------------------
-  //TALAS Layer
-  const [layerTALAS, setLayerTALAS] = useState([]);
-  const [showTALAS, setShowTALAS] = useState(true);
-  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);
-    if (showTALAS) {
-      TALAS.addTo(map);
-    } else {
-      console.log("Removing TALAS from map");
-      TALAS.remove();
-    }
-    setLayerTALAS(TALAS);
-    //console.log("layerTALAS:", layerTALAS);
-    console.log("TALAS layerGroup:", TALAS);
-  }, [map, GisStationsStaticDistrict, oms, showTALAS]);
-  //---------------------------------------------------------------------------------
-
-  //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
   //------------------------------------------
-  /*   useEffect(() => {
-    if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)
-      return;
 
-    // Alte Marker löschen
+  // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
-    map.eachLayer((layer) => {
+
-      if (layer instanceof L.Marker) {
+  useEffect(() => {
-        map.removeLayer(layer);
+    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
       }
-    });
+    };
 
-    // Neuen Markern basierend auf den System IDs zuordnen
+    // Apply visibility state to the TALAS layer
-    GisStationsStaticDistrict.forEach((station) => {
+    toggleLayer(mapLayersVisibility.TALAS);
-      // Finden des entsprechenden System-Objekts
+  }, [map, talasMarkers, mapLayersVisibility.TALAS]);
-      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}

config/config.js

@@ -37,7 +37,7 @@ if (typeof window !== "undefined") {
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
   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`;

store/gisStationState.js

@@ -0,0 +1,7 @@
+// Pfad: store/gisStationState.js
+import { atom } from "recoil";
+
+export const gisStationsStaticDistrictState = atom({
+  key: "gisStationsStaticDistrict", // Eindeutiger Schlüssel (innerhalb des Projekts)
+  default: [], // Standardwert (Anfangszustand)
+});

store/gisSystemState.js

@@ -0,0 +1,7 @@
+// Pfad: store/gisStationState.js
+import { atom } from "recoil";
+
+export const gisSystemStaticState = atom({
+  key: "gisSystemStatic", // Eindeutiger Schlüssel (innerhalb des Projekts)
+  default: [], // Standardwert (Anfangszustand)
+});

store/mapLayersState.js

@@ -0,0 +1,24 @@
+// store/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: true,
+    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,
+  },
+});