Alle Marker von layerGroups sind im Map sichtbar.

Mouseover für Popup, ok.
Reinzoomen ok.
Rauszoomen ok.
Hier zentrieren ok.
Nur TALAS layerGroup über checkbox ein- und ausblenden.
Marker von DB anzeigen, aber verschieben geht noch nicht und hinzufügen auch nicht.

components/DataSheet.js

@@ -67,7 +67,18 @@ function DataSheet() {
   }, [GisStationsStaticDistrict]);
 
   const [checkedStations, setCheckedStations] = useState({});
-
+  /*   const TALAS = new L.layerGroup();
+  const ECI = new L.layerGroup();
+  const ULAF = new L.layerGroup();
+  const GSMModem = new L.layerGroup();
+  const CiscoRouter = new L.layerGroup();
+  const WAGO = new L.layerGroup();
+  const Siemens = new L.layerGroup();
+  const OTDR = new L.layerGroup();
+  const WDM = new L.layerGroup();
+  const GMA = new L.layerGroup();
+  const Sonstige = new L.layerGroup();
+  const TALASICL = new L.layerGroup(); */
   const handleCheckboxChangeTALAS = (event) => {
     const { checked } = event.target;
     setMapLayersVisibility((prev) => ({
@@ -75,6 +86,112 @@ function DataSheet() {
       TALAS: checked,
     }));
   };
+  const handleCheckboxChangeECI = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      ECI: checked,
+    }));
+  };
+  const handleCheckboxChangeULAF = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      ULAF: checked,
+    }));
+  };
+  const handleCheckboxChangeGSMModem = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      GSMModem: checked,
+    }));
+  };
+  const handleCheckboxChangeCiscoRouter = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      CiscoRouter: checked,
+    }));
+  };
+  const handleCheckboxChangeWAGO = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      WAGO: checked,
+    }));
+  };
+  const handleCheckboxChangeSiemens = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      Siemens: checked,
+    }));
+  };
+  const handleCheckboxChangeOTDR = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      OTDR: checked,
+    }));
+  };
+  const handleCheckboxChangeWDM = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      WDM: checked,
+    }));
+  };
+  const handleCheckboxChangeGMA = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      GMA: checked,
+    }));
+  };
+  const handleCheckboxChangeSonstige = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      Sonstige: checked,
+    }));
+  };
+  const handleCheckboxChangeTALASICL = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      TALASICL: checked,
+    }));
+  };
+  const handleCheckboxChangeDAUZ = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      DAUZ: checked,
+    }));
+  };
+  const handleCheckboxChangeSMSFunkmodem = (event) => {
+    const { checked } = event.target;
+
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      SMSFunkmodem: checked,
+    }));
+  };
+  const handleCheckboxChangeMessstellen = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      Messstellen: checked,
+    }));
+  };
+  const handleCheckboxChange = (event) => {
+    const { checked, value } = event.target;
+    setCheckedStations((prev) => ({
+      ...prev,
+      [value]: checked,
+    }));
+  };
 
   const handleStationChange = (event) => {
     console.log("Station selected:", event.target.value);
@@ -96,6 +213,34 @@ function DataSheet() {
       );
     }
   }, [checkedStations, systemListing]);
+  const eciStation = systemListing.find((station) => station.name === "ECI");
+  const ulafStation = systemListing.find((station) => station.name === "ULAF");
+  const gsmModemStation = systemListing.find(
+    (station) => station.name === "GSMModem"
+  );
+  const ciscoRouterStation = systemListing.find(
+    (station) => station.name === "CiscoRouter"
+  );
+  const wagoStation = systemListing.find((station) => station.name === "WAGO");
+  const siemensStation = systemListing.find(
+    (station) => station.name === "Siemens"
+  );
+  const otdrStation = systemListing.find((station) => station.name === "OTDR");
+  const wdmStation = systemListing.find((station) => station.name === "WDM");
+  const gmaStation = systemListing.find((station) => station.name === "GMA");
+  const sonstigeStation = systemListing.find(
+    (station) => station.name === "Sonstige"
+  );
+  const talasiclStation = systemListing.find(
+    (station) => station.name === "TALASICL"
+  );
+  const dauzStation = systemListing.find((station) => station.name === "DAUZ");
+  const smsFunkmodemStation = systemListing.find(
+    (station) => station.name === "SMSFunkmodem"
+  );
+  const messstellenStation = systemListing.find(
+    (station) => station.name === "Messstellen"
+  );
 
   return (
     <div
@@ -134,7 +279,105 @@ function DataSheet() {
             onChange={handleCheckboxChangeTALAS}
           />
           <label className="text-sm font-bold ml-2">TALAS</label>
-          {/* Weitere Inhalte der Datenblattkomponente */}
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.ECI}
+            onChange={handleCheckboxChangeECI}
+          />
+          <label className="text-sm font-bold ml-2">ECI</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.ULAF}
+            onChange={handleCheckboxChangeULAF}
+          />
+          <label className="text-sm font-bold ml-2">ULAF</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.GSMModem}
+            onChange={handleCheckboxChangeGSMModem}
+          />
+          <label className="text-sm font-bold ml-2">GSM Modem</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.CiscoRouter}
+            onChange={handleCheckboxChangeCiscoRouter}
+          />
+          <label className="text-sm font-bold ml-2">Cisco Router</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.WAGO}
+            onChange={handleCheckboxChangeWAGO}
+          />
+          <label className="text-sm font-bold ml-2">WAGO</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.Siemens}
+            onChange={handleCheckboxChangeSiemens}
+          />
+          <label className="text-sm font-bold ml-2">Siemens</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.OTDR}
+            onChange={handleCheckboxChangeOTDR}
+          />
+          <label className="text-sm font-bold ml-2">OTDR</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.WDM}
+            onChange={handleCheckboxChangeWDM}
+          />
+          <label className="text-sm font-bold ml-2">WDM</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.GMA}
+            onChange={handleCheckboxChangeGMA}
+          />
+          <label className="text-sm font-bold ml-2">GMA</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.Sonstige}
+            onChange={handleCheckboxChangeSonstige}
+          />
+          <label className="text-sm font-bold ml-2">Sonstige</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.TALASICL}
+            onChange={handleCheckboxChangeTALASICL}
+          />
+          <label className="text-sm font-bold ml-2">TALASICL</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.DAUZ}
+            onChange={handleCheckboxChangeDAUZ}
+          />
+          <label className="text-sm font-bold ml-2">DAUZ</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.SMSFunkmodem}
+            onChange={handleCheckboxChangeSMSFunkmodem}
+          />
+          <label className="text-sm font-bold ml-2">SMS Funkmodem</label>
+          <br />
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.Messstellen}
+            onChange={handleCheckboxChangeMessstellen}
+          />
+          <label className="text-sm font-bold ml-2">Messstellen</label>
+          <br />
         </div>
       </div>
     </div>

components/MapComponent.js

@@ -1038,7 +1038,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
   //-------------------------------------------
   //--------------------------------------------------------------------------------
-  useEffect(() => {
+  /*   useEffect(() => {
     // Drucker ist hier und noch eine Marker "SNMP"
     if (map && sonstigeMarkers.length) {
       sonstigeMarkers.forEach((marker) => {
@@ -1055,7 +1055,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
 
-  console.log("sonstigeMarkers", sonstigeMarkers);
+  console.log("sonstigeMarkers", sonstigeMarkers); */
   //-------------------------------------------
   //--------------------------------------------------------------------------------
   useEffect(() => {