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(`
+ ${station.LD_Name}
+ ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name})
+ `, {
+ 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);