Alle Marker von layerGroups sind im Map, Priorität muss noch setzen, damit die Marker hanz oben ist, oms muss bei allen noch funktionieren

components/MapComponent.js

@@ -373,6 +373,29 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     const popupContent = L.DomUtil.create("div");
     popupContent.innerHTML = `
   <form id="addStationForm" class="m-0 p-2 w-full">
+      <!-- Kommantar von hier
+        <div class="flex items-center mb-4">
+
+        <label for="idPoi" class="block mr-2 flex-none">ID Poi:</label>
+        <input
+          type="text"
+          id="idPoi"
+          name="idPoi"
+          value="2" 
+          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="idPoiTyp" class="block mr-2 flex-none">ID idPoiTyp:</label>
+      <input
+        type="text"
+        id="idPoiTyp"
+        name="idPoiTyp"
+        value="2" 
+        class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+      />
+      </div>
+      Kommantar bis hier-->
   <div class="flex items-center mb-4">      
     <label for="name" class="block mr-2 flex-none">Name:</label>
     <input
@@ -385,7 +408,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   </div>
   
   <div class="flex items-center mb-4">   
-    <label for="type" class="block mr-3 flex-none">Type:</label>
+    <label for="idPoi" class="block mr-3 flex-none">Type:</label>
     <input
       type="text"
       id="type"
@@ -418,6 +441,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
     />
   </div>
+
   
   <button
     type="submit"
@@ -434,43 +458,46 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     L.DomEvent.on(popupContent, "submit", handleSubmit);
   };
 
-  // Funktion zum Hinzufügen eines neuen Standorts
+  // Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
   async function handleSubmit(event) {
     event.preventDefault();
     const form = event.target;
+
+    // Einfache Validierung, um sicherzustellen, dass idPoiTyp eine Zahl ist
+    if (!form.idPoiTyp.value || isNaN(form.idPoiTyp.value)) {
+      alert("Bitte geben Sie eine gültige ID für den Poi-Typ ein.");
+      return; // Beendet die Funktion, um das Senden von ungültigen Daten zu verhindern
+    }
+
     const data = {
       name: form.name.value,
       type: form.type.value,
+      idPoi: form.idPoi.value,
+      idPoiTyp: form.idPoiTyp.value,
       latitude: form.lat.value,
       longitude: form.lng.value,
     };
 
-    try {
+    // Senden der Daten an den Server
-      const response = await fetch("/api/addLocation", {
+    const response = await fetch("/api/addLocation", {
-        method: "POST",
+      method: "POST",
-        headers: {
+      headers: {
-          "Content-Type": "application/json",
+        "Content-Type": "application/json",
-        },
+      },
-        body: JSON.stringify(data),
+      body: JSON.stringify(data),
-      });
+    });
 
-      const result = await response.json();
+    if (response.ok) {
-
+      console.log("Station erfolgreich hinzugefügt");
-      if (response.ok) {
+      // Weitere Aktionen nach erfolgreichem Hinzufügen
-        alert("Standort erfolgreich hinzugefügt!");
+    } else {
-        form.reset(); // Formular zurücksetzen
+      console.error("Fehler beim Hinzufügen der Station");
-        // Hier könntest du weitere Aktionen durchführen, wie das Schließen des Popups oder das Aktualisieren der Marker auf der Karte
+      // Fehlerbehandlung
-      } 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;
@@ -508,40 +535,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     return path;
   }
 
-  //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();
-  }, []); */
   //------------------------------------------
   let dbLayer = null;
   useEffect(() => {
@@ -559,7 +552,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map]);
   //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt
   // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
-  /*  useEffect(() => {
+  useEffect(() => {
     // Remove old markers
     if (map) {
       // Entfernen der alten DBLayer und Erstellung einer neuen
@@ -598,55 +591,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
     }
   }, [map, locations, onLocationUpdate]);
- */
-  //------------------------------------------
-  // 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(
-          `<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
-        );
-        marker.bindTooltip(
-          `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${location.description}</div>`,
-          { permanent: false, direction: "top" }
-        );
-
-        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]); */
 
   //------------------------------------------
+
   useEffect(() => {
     // Initialisierung der dbLayer, wenn die Karte verfügbar ist
     if (map && !dbLayerRef.current) {
@@ -661,7 +608,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       }
     };
   }, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert
-
+  //------------------------------------------
   useEffect(() => {
     if (map && dbLayerRef.current) {
       // Sicherstellen, dass die alte dbLayer entfernt wird
@@ -702,83 +649,123 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //-----------------------------------------------------------------
   //         TALAS  Marker hinzufügen
   //-----------------------------------------------------------------
-
+  // Reihenfolge nach API sortiert mit der Attribute "System"
   const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
+  const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
+  const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
+  const [ciscoRouterVisible, setCiscoRouterVisible] =
+    useRecoilState(mapLayersState);
+  const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
+  const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
+  const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
+  const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
+  const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
+  const [messstellenVisible, setMessstellenVisible] =
+    useRecoilState(mapLayersState);
+  const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
+  const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
+  const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
+    useRecoilState(mapLayersState);
+  const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
+  const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
 
-  const [talasMarkers, setTalasMarkers] = useState([]);
+  const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
+  const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
+  const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
+  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
+  const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
+  const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
+  const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
+  const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
+  const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
+  const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
+  const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
+  const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
+  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
+  const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
+  const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
+  //--------------------------------------------------------------------------------
   // Daten von einer externen Quelle laden
-  useEffect(() => {
+  const createAndSetMarkers = async (systemId, setMarkersFunction) => {
-    async function fetchData() {
+    try {
-      if (!map) return;
+      const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
-      try {
+      const jsonResponse = await response1.json();
-        // Erster Fetch-Aufruf
+      const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
-        const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
+      const statusResponse = await response2.json();
-        const jsonResponse = await response1.json();
 
-        // Zweiter Fetch-Aufruf
+      if (jsonResponse.Points && statusResponse.Statis) {
-        const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
+        const statisMap = new Map(
-        const statusResponse = await response2.json();
+          statusResponse.Statis.map((s) => [s.IdLD, s])
-
+        );
-        if (jsonResponse.Points && statusResponse.Statis) {
+        let markersData = jsonResponse.Points.filter(
-          const statisMap = new Map(
+          (station) => station.System === systemId
-            statusResponse.Statis.map((s) => [s.IdLD, s])
+        ).map((station) => {
-          );
+          const statis = statisMap.get(station.IdLD);
-          console.log("statisMap", statisMap);
+          const marker = L.marker([station.X, station.Y], {
-
+            icon: L.icon({
-          let markersData = jsonResponse.Points.filter(
+              iconUrl: statis
-            (station) => station.System === 1
+                ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
-          ).map((station) => {
+                : `img/icons/marker-icon-${station.Icon}.png`,
-            const statis = statisMap.get(station.IdLD);
+              iconSize: [25, 41],
-            const marker = L.marker([station.X, station.Y], {
+              iconAnchor: [12, 41],
-              icon: L.icon({
+              popupAnchor: [1, -34],
-                iconUrl: statis
+            }),
-                  ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
+            bounceOnAdd: !!statis,
-                  : `img/icons/marker-icon-${station.Icon}.png`,
-                iconSize: [25, 41],
-                iconAnchor: [12, 41],
-                popupAnchor: [1, -34],
-              }),
-              bounceOnAdd: !!statis,
-            });
-
-            if (statis) {
-              marker.on("add", () => marker.bounce(3));
-            }
-            // String-Zusammenstellung für das Popup-Infofenster
-            const matchingStatuses = statusResponse.Statis.filter(
-              (status) => status.IdLD === station.IdLD
-            );
-            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("");
-            // Ein Popup und Tooltip mit Informationen zur Station binden
-            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>${statusInfo}`
-            );
-
-            return marker;
           });
 
-          setTalasMarkers(markersData);
+          if (statis) {
-        }
+            marker.on("add", () => marker.bounce(3));
-      } catch (error) {
+          }
-        console.error("Error fetching data: ", error);
-      }
-    }
 
-    fetchData();
+          const statusInfo = statusResponse.Statis.filter(
-  }, [map]); // Abhängigkeit nur auf `map` setzen
+            (status) => status.IdLD === station.IdLD
+          )
+            .reverse()
+            .map(
+              (status) => `
+                <div class="flex items-center my-1">
+                  <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
+                  ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
+                </div>
+              `
+            )
+            .join("");
+
+          marker.bindPopup(`
+              <b>${station.LD_Name}</b><br>
+              ${station.Device}<br>
+              ${station.Area_Short} (${station.Area_Name})<br>
+              ${station.Location_Short} (${station.Location_Name})<br>
+              ${statusInfo}
+            `);
+
+          return marker;
+        });
+
+        setMarkersFunction(markersData);
+      }
+    } catch (error) {
+      console.error("Error fetching data: ", error);
+    }
+  };
+  useEffect(() => {
+    if (!map) return;
+    createAndSetMarkers(1, setTalasMarkers); // TALAS-System
+    createAndSetMarkers(2, setEciMarkers); // ECI-System
+    createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
+    createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
+    createAndSetMarkers(7, setWagoMarkers); // WAGO-System
+    createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
+    createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
+    createAndSetMarkers(10, setWdmMarkers); // WDM-System
+    createAndSetMarkers(11, setGmaMarkers); // GMA-System
+    createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
+    createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
+    createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
+    createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
+    createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
+    createAndSetMarkers(0, setUlafMarkers); // ULAF-System
+  }, [map]);
   //--------------------------------------------------------------------------------
   useEffect(() => {
     if (map && talasMarkers.length) {
@@ -800,9 +787,300 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   console.log("talasMarkers", talasMarkers);
   //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && eciMarkers.length) {
+      eciMarkers.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(ECI);
+    }
+  }, [map, eciMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("eciMarkers", eciMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && gsmModemMarkers.length) {
+      gsmModemMarkers.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(GSMModem);
+    }
+  }, [map, gsmModemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("gsmModemMarkers", gsmModemMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && ciscoRouterMarkers.length) {
+      ciscoRouterMarkers.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(CiscoRouter);
+    }
+  }, [map, ciscoRouterMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("ciscoRouterMarkers", ciscoRouterMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && wagoMarkers.length) {
+      wagoMarkers.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(WAGO);
+
+      //toggleLayer(mapLayersVisibility.WAGO);
+    }
+    // }, [map, wagoMarkers, mapLayersVisibility.WAGO]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, wagoMarkers]);
+  console.log("wagoMarkers", wagoMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && siemensMarkers.length) {
+      siemensMarkers.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(Siemens);
+    }
+  }, [map, siemensMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("siemensMarkers", siemensMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && otdrMarkers.length) {
+      otdrMarkers.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(OTDR);
+    }
+  }, [map, otdrMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("otdrMarkers", otdrMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && wdmMarkers.length) {
+      wdmMarkers.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(WDM);
+    }
+  }, [map, wdmMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("wdmMarkers", wdmMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && gmaMarkers.length) {
+      gmaMarkers.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(GMA);
+    }
+  }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("gmaMarkers", gmaMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && messstellenMarkers.length) {
+      messstellenMarkers.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(GMA);
+    }
+  }, [map, messstellenMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("messstellenMarkers", messstellenMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && talasiclMarkers.length) {
+      talasiclMarkers.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(TALASICL);
+    }
+  }, [map, talasiclMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("talasiclMarkers", talasiclMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && dauzMarkers.length) {
+      dauzMarkers.forEach((marker) => {
+        marker.addTo(map);
+
+        // Popup beim Überfahren mit der Maus öffnen und schließen
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+      });
+    }
+  }, [map, dauzMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("dauzMarkers", dauzMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && smsfunkmodemMarkers.length) {
+      smsfunkmodemMarkers.forEach((marker) => {
+        marker.addTo(map);
+
+        // Popup beim Überfahren mit der Maus öffnen und schließen
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+      });
+    }
+  }, [map, smsfunkmodemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    // Drucker ist hier und noch eine Marker "SNMP"
+    if (map && sonstigeMarkers.length) {
+      sonstigeMarkers.forEach((marker) => {
+        marker.addTo(map);
+
+        // Popup beim Überfahren mit der Maus öffnen und schließen
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+      });
+    }
+  }, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("sonstigeMarkers", sonstigeMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && ulafMarkers.length) {
+      ulafMarkers.forEach((marker) => {
+        marker.addTo(map);
+
+        // Popup beim Überfahren mit der Maus öffnen und schließen
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+      });
+    }
+  }, [map, ulafMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  console.log("ulafMarkers", ulafMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+
   const mapLayersVisibility = useRecoilValue(mapLayersState);
 
-  useEffect(() => {
+  /*   useEffect(() => {
     if (!map || !talasMarkers) return;
 
     const toggleLayer = (isVisible) => {
@@ -815,7 +1093,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
     // Apply visibility state to the TALAS layer
     toggleLayer(mapLayersVisibility.TALAS);
-  }, [map, talasMarkers, mapLayersVisibility.TALAS]); // Depend on map, markers array, and visibility state
+  }, [map, talasMarkers, mapLayersVisibility.TALAS]);  */ // Depend on map, markers array, and visibility state
 
   const handleCheckboxChange = (event) => {
     const { checked } = event.target;