From c1aa47a11f6a2d87c9d47480bd9c886b0764ce0c Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismail_ali_1@hotmail.com>
Date: Mon, 22 Apr 2024 21:54:04 +0200
Subject: [PATCH] GMA layerGroup separat

---
 components/MapComponent.js | 73 +++++++++++++++++++++++++++++++-------
 1 file changed, 61 insertions(+), 12 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 973f9e8bd..d400eae89 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -906,15 +906,65 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       map.removeLayer(marker);
     });
   }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
-
+  
   //-------------------------------------------------------------------------------------------------------------------------
-  //GisStationsStatusDistrict
-  //const [talasSystem, setTalasSystem] = useState({});
+  //GMA Layer
+  const [layerGMA, setLayerGMA] = useState([]);
+  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
+    TALAS.addTo(map);
+    setLayerGMA(GMA);
+    console.log("layerGMA:", layerGMA);
+  
+  }, [map, GisStationsStaticDistrict, oms]);
+//---------------------------------------------------------------------------------
+  //-------------------------------------------------------------------------------------------------------------------------
+  //TALAS Layer
   const [layerTALAS, setLayerTALAS] = useState([]);
-
-  // GisSystemStatic Daten laden und Systemdaten speichern
-  // Systeminformationen aus GisSystemStatic aktualisieren--------------1
-
   useEffect(() => {
     if (!map || !GisStationsStaticDistrict) return;
     
@@ -962,14 +1012,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   
     // Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
     TALAS.addTo(map);
+    setLayerTALAS(TALAS);
+    console.log("layerTALAS:", layerTALAS);
   
   }, [map, GisStationsStaticDistrict, oms]);
-  
-  
-
 //---------------------------------------------------------------------------------
 const [activeLayer, setActiveLayer] = useState(null);
-
 useEffect(() => {
   if (!map) return;
 
@@ -995,6 +1043,7 @@ 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
+    setActiveLayer(GMA);
   }
 }, [GisStationsStaticDistrict]); // Reagiere auf Änderungen in GisStationsStaticDistrict
 
@@ -1003,7 +1052,7 @@ useEffect(() => {
   useEffect(() => {
     console.log("Verarbeitung der talasSystem-Daten:", layerTALAS);
     // Hier könnten Sie Ihre Leaflet LayerGroup-Aktionen ausführen
-  }, [layerTALAS]);
+  }, [layerTALAS,layerGMA]);
 
   //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);