diff --git a/components/MapComponent.js b/components/MapComponent.js index df667e9e5..60b4a44c2 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -207,6 +207,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen //------------------------------------------ + const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false); + //GisSystemStatic Daten laden useEffect(() => { const fetchData = async () => { @@ -214,10 +216,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const response = await fetch(mapGisSystemStaticUrl); const jsonResponse = await response.json(); - // 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("GisSystemStatic:", jsonResponse.Systems); + setGisSystemStatic(jsonResponse.Systems); + setGisSystemStaticLoaded(true); // Setze den Zustand auf geladen } else { console.error( 'Erwartete Daten im "Systems"-Array nicht gefunden', @@ -232,7 +233,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }; fetchData(); - }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen + }, []); //------------------------------------------ const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; @@ -591,7 +592,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen console.log("poiTypMap:", map); const poiTypName = poiTypMap.get(0) || "Unbekannt"; - console.log("poiTypName:", poiTypName); + //console.log("poiTypName:", poiTypName); } catch (error) { console.error("Fehler beim Abrufen der poiTyp-Daten:", error); } @@ -763,25 +764,25 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); const statusResponse = await response2.json(); + const getIdSystemAndAllowValueMap = new Map( + GisSystemStatic.map((system) => [system.IdSystem, system.Allow]) + ); + console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap); + if (jsonResponse.Points && statusResponse.Statis) { const statisMap = new Map( statusResponse.Statis.map((s) => [s.IdLD, s]) ); let markersData = jsonResponse.Points.filter( - (station) => station.System === systemId + (station) => + station.System === systemId && + getIdSystemAndAllowValueMap.get(station.System) === 1 ).map((station) => { const statis = statisMap.get(station.IdLD); const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`; - const priority = determinePriority(iconPath); - const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values - - /* console.log( - `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}` - ); */ - const marker = L.marker([station.X, station.Y], { icon: L.icon({ iconUrl: iconPath, @@ -789,37 +790,17 @@ const MapComponent = ({ locations, onLocationUpdate }) => { iconAnchor: [12, 41], popupAnchor: [1, -34], }), - areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird + areaName: station.Area_Name, link: station.Link, - zIndexOffset: zIndexOffset, bounceOnAdd: !!statis, }); - if (statis) { - marker.on("add", () => marker.bounce(3)); - } - - const statusInfo = statusResponse.Statis.filter( - (status) => status.IdLD === station.IdLD - ) - .reverse() - .map( - (status) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - marker.bindPopup(` -
+

${station.LD_Name}

Gerät: ${station.Device}

Zone: ${station.Area_Short} (${station.Area_Name})

Standort: ${station.Location_Short} (${station.Location_Name})

-
${statusInfo}
`); return marker; @@ -831,24 +812,26 @@ const MapComponent = ({ locations, onLocationUpdate }) => { 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]); + if (gisSystemStaticLoaded && map) { + 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 + } + }, [gisSystemStaticLoaded, map]); //-------------------------------------------------------------------------------- useEffect(() => { if (map && talasMarkers.length) {