From a4a13ea67f3c0175abbbd42a69249ed32fedbcf1 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 25 Apr 2024 07:46:20 +0200 Subject: [PATCH] TALAS Checkbox zum ein- und ausblenden von Markers auf dem Map --- components/DataSheet.js | 111 +++--- components/MapComponent.js | 771 +++++++------------------------------ config/config.js | 2 +- store/gisStationState.js | 7 + store/gisSystemState.js | 7 + store/mapLayersState.js | 24 ++ 6 files changed, 250 insertions(+), 672 deletions(-) create mode 100644 store/gisStationState.js create mode 100644 store/gisSystemState.js create mode 100644 store/mapLayersState.js diff --git a/components/DataSheet.js b/components/DataSheet.js index 9bd197373..ffda342ec 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,12 +1,13 @@ // components/DataSheet.js import React, { useEffect, useState } from "react"; -import { useRecoilValue, useRecoilState } from "recoil"; -import { gisStationsStaticDistrictState } from "../states/gisStationState"; -import { gisSystemStaticState } from "../states/gisSystemState"; -import { mapLayersState } from "../states/mapLayersState"; - +import { useRecoilState, useRecoilValue } from "recoil"; +import { gisStationsStaticDistrictState } from "../store/gisStationState"; +import { gisSystemStaticState } from "../store/gisSystemState"; +import { mapLayersState } from "../store/mapLayersState"; function DataSheet() { - const [layers, setLayers] = useRecoilState(mapLayersState); + const [mapLayersVisibility, setMapLayersVisibility] = + useRecoilState(mapLayersState); + // useState für uniqueAreas und stationListing const [uniqueAreas, setUniqueAreas] = useState([]); const [uniqueSystems, setUniqueSystems] = useState([]); const [stationListing, setStationListing] = useState([]); @@ -17,6 +18,13 @@ function DataSheet() { const GisSystemStatic = useRecoilValue(gisSystemStaticState); useEffect(() => { + console.log( + "GisStationsStaticDistrict in DataSheet:", + GisStationsStaticDistrict + ); + console.log("GisSystemStatic in DataSheet:", GisSystemStatic); + + // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren const seenNames = new Set(); const filteredAreas = GisStationsStaticDistrict.filter((item) => { const isUnique = !seenNames.has(item.Area_Name); @@ -25,6 +33,7 @@ function DataSheet() { } return isUnique; }); + setUniqueAreas(filteredAreas); const seenSystemNames = new Set(); @@ -35,45 +44,58 @@ function DataSheet() { } return isUnique; }); + setUniqueSystems(filteredSystems); + // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren const newStationListing = filteredAreas - .map((area, index) => ({ id: index + 1, name: area.Area_Name })) - .sort((a, b) => a.name.localeCompare(b.name)); + .map((area, index) => ({ + id: index + 1, // Zuweisung einer eindeutigen ID + name: area.Area_Name, + })) + .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen + setStationListing(newStationListing); - const newSystemListing = filteredSystems.map((system, index) => ({ - id: index + 1, - name: system.Name.replace(/[^a-zA-Z0-9]/g, ""), // Ersetzen von Sonderzeichen - displayName: system.Name, // Beibehalten des originalen Namens für die Anzeige + //---------- + const newSystemListing = filteredSystems.map((area, index) => ({ + id: index + 1, // Zuweisung einer eindeutigen ID + name: area.Name, })); setSystemListing(newSystemListing); + console.log("System Listing:", systemListing); + }, [GisStationsStaticDistrict]); - console.log("Station Listing:", newStationListing); - console.log("System Listing:", newSystemListing); - }, [GisStationsStaticDistrict, GisSystemStatic]); + const [checkedStations, setCheckedStations] = useState({}); - const handleCheckboxChange = (layerKey) => { - console.log( - `Ändern der Sichtbarkeit für: ${layerKey}, aktueller Wert: ${layers[layerKey]}` - ); - setLayers((prevLayers) => { - const newLayers = { - ...prevLayers, - [layerKey]: !prevLayers[layerKey], - }; - console.log(`Neuer Wert für ${layerKey}: ${newLayers[layerKey]}`); - return newLayers; - }); + const handleCheckboxChangeTALAS = (event) => { + const { checked } = event.target; + setMapLayersVisibility((prev) => ({ + ...prev, + TALAS: checked, + })); }; const handleStationChange = (event) => { - console.log("Ausgewählte Station:", event.target.value); + console.log("Station selected:", event.target.value); }; const resetView = () => { - console.log("Ansicht wird zurückgesetzt."); + console.log("View has been reset"); }; + useEffect(() => { + console.log("Checked Stations:", checkedStations); + // Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus + const talasStation = systemListing.find( + (station) => station.name === "TALAS" + ); + if (talasStation) { + console.log( + "TALAS Station ist gecheckt:", + checkedStations[talasStation.id] + ); + } + }, [checkedStations, systemListing]); return (
+ {/* Dropdown */} + {/* Icon */} Expand
- {systemListing.map((station) => ( -
- handleCheckboxChange(`show_${station.name}`)} - /> - -
- ))} + + {/* Liste der Stationen mit Checkboxen */} + +
+ + + {/* Weitere Inhalte der Datenblattkomponente */} +
); diff --git a/components/MapComponent.js b/components/MapComponent.js index a63e4b264..e6caf18b2 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -10,14 +10,14 @@ import "leaflet.smooth_marker_bouncing"; import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; import DataSheet from "../components/DataSheet"; import { useRecoilState, useRecoilValue } from "recoil"; -import { gisStationsStaticDistrictState } from "../states/gisStationState"; -import { gisSystemStaticState } from "../states/gisSystemState"; -import { mapLayersState } from "../states/mapLayersState"; +import { gisStationsStaticDistrictState } from "../store/gisStationState"; +import { gisSystemStaticState } from "../store/gisSystemState"; +import { mapLayersState } from "../store/mapLayersState"; const MapComponent = ({ locations, onLocationUpdate }) => { - const layerVisibility = useRecoilValue(mapLayersState); const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const [map, setMap] = useState(null); // Zustand der Karteninstanz + const [oms, setOms] = useState(null); // State für OMS-Instanz const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState); @@ -37,7 +37,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl; const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; const mapDataIconUrl = config.mapDataIconUrl; - const [oms, setOms] = useState(null); // State für OMS-Instanz // Funktion zum Aktualisieren der Position in der Datenbank const updateLocationInDatabase = async (id, newLatitude, newLongitude) => { @@ -176,10 +175,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // 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 in MapComponent.js :", - jsonResponse.Systems - ); */ + console.log("GisSystemStatic:", jsonResponse.Systems); } else { console.error( 'Erwartete Daten im "Systems"-Array nicht gefunden', @@ -213,8 +209,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const Sonstige = new L.layerGroup(); const TALASICL = new L.layerGroup(); - let newMap = []; - useEffect(() => { if (typeof window !== "undefined") { console.log("Window height from config:", config.windowHeight); @@ -227,10 +221,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { .then((response) => setOnline(response.ok)) .catch(() => setOnline(false)); }; + let initMap = []; // Initialisierung der karte und hinzuügen der Layers useEffect(() => { if (mapRef.current && !map) { - newMap = L.map(mapRef.current, { + initMap = L.map(mapRef.current, { center: [53.111111, 8.4625], zoom: 8, layers: [ @@ -247,7 +242,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { Sonstige, TALASICL, ], - zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung + zoomControl: false, contextmenu: true, contextmenuItems: [ { text: "Station hinzufügen", callback: showAddStationPopup }, @@ -276,63 +271,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => { L.tileLayer(online ? onlineTileLayer : offlineTileLayer, { attribution: '© OpenStreetMap contributors', - }).addTo(newMap); + }).addTo(initMap); - const newOms = new window.OverlappingMarkerSpiderfier(newMap, { - nearbyDistance: 20, //Radius um einen Marker, innerhalb dessen andere Marker gruppiert werden in Pixel + const oms = new window.OverlappingMarkerSpiderfier(initMap, { + nearbyDistance: 20, }); - setMap(newMap); - setOms(newOms); - } - }, [mapRef, map]); // Abhängigkeiten prüfen + setMap(initMap); + setOms(oms); - // 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( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, closeButton: true } - ); - marker.bindTooltip( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, direction: "top", offset: [0, -30] } - ); - - 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); + // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen. + initMap.whenReady(() => { + console.log("Karte ist jetzt bereit und initialisiert."); + // Rufe hier Funktionen auf, die eine initialisierte Karte benötigen. }); } - }, [map, locations, onLocationUpdate]); */ + }, [mapRef, map]); // Prüfe die Abhängigkeiten sorgfältig //------------------------------------------ function parsePoint(pointString) { @@ -378,14 +332,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }; const zoomIn = (e) => { - newMap.flyTo(e.latlng, 12); + initMap.flyTo(e.latlng, 12); }; const zoomOut = (e) => { fly(); }; const centerHere = (e) => { - newMap.panTo(e.latlng); + initMap.panTo(e.latlng); }; const showCoordinates = (e) => { @@ -521,7 +475,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { var y = 7.739617925303934; var zoom = 7; - newMap.flyTo([x, y], zoom); + initMap.flyTo([x, y], zoom); } function getIconPath(status, iconNumber, marker) { @@ -553,137 +507,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { return path; } - //------------------------------------------ - //\talas5\TileMap\img\icons\icon1.png - // minor-marker-icon-23.png - - // Marker hinzufügen für GisStationsStaticDistrict - /* useEffect(() => { - // Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind - if (!map || !oms) { - console.error("Map or OMS is not initialized"); - return; - } - - // Alte Marker entfernen, indem alle Marker, die durch OMS verwaltet werden, gelöscht werden - oms.clearMarkers(); - map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); - } - }); - - // Neue Marker für jede Station hinzufügen - GisStationsStaticDistrict.forEach((station) => { - // Filter für Statusobjekte dieser spezifischen Station - const matchingStatuses = GisStationsStatusDistrict.filter( - (status) => status.IdLD === station.IdLD - ); - - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: "default-icon.png", // Default, wird geändert - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }), - }).addTo(map); - - // Popup beim Überfahren mit der Maus öffnen - marker.on("mouseover", function (e) { - this.openPopup(); - }); - - // Popup schließen, wenn die Maus den Marker verlässt - marker.on("mouseout", function (e) { - this.closePopup(); - }); - - // String-Zusammenstellung für das Popup-Infofenster - let statusInfo = matchingStatuses - .reverse() - .map( - (status) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - - // Bestimmen des Icons basierend auf dem Status - let iconPath = getIconPath( - matchingStatuses[0]?.Na || "", - station.Icon, - marker - ); - - marker.setIcon( - L.icon({ - iconUrl: iconPath, - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }) - ); - // Check if the icon path includes 'critical' and initiate bouncing - if ( - iconPath.includes("critical") || - iconPath.includes("major") || - iconPath.includes("minor") || - iconPath.includes("system") - ) { - marker.setBouncingOptions({ - bounceHeight: 15, - contractHeight: 12, - bounceSpeed: 52, - contractSpeed: 52, - shadowAngle: null, - }); - marker.bounce(3); - } - // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht - if (station.LD_Name === "GMA Littwin (TEST)") { - marker.bindTooltip( - `
${station.Area_Name}
`, - { - permanent: true, - direction: "right", - opacity: 1, // Tooltip immer sichtbar - offset: L.point({ x: 10, y: 0 }), - } - ).addTo(GMA); - } else { - marker.bindTooltip( - `
${station.LD_Name}
`, - { - permanent: false, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ).addTo(GMA); - } - // Marker zu OMS und der Karte hinzufügen - oms.addMarker(marker); - marker.addTo(map).bindPopup(` - ${station.LD_Name}
- ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name})
- ${statusInfo}
- `); - let LocID = station.IdLocation; - - }); - - }, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]); - - //------------------------------------------ */ - //------------------------------------------ */ //useEffect zusammen von MySQL Daten bank und von APIs useEffect(() => { const fetchData = async () => { @@ -719,451 +542,149 @@ const MapComponent = ({ locations, onLocationUpdate }) => { fetchData(); }, []); + //----------------------------------------------------------------- + // TALAS Marker hinzufügen + //----------------------------------------------------------------- + + const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState); + + const [talasMarkers, setTalasMarkers] = useState([]); + // Daten von einer externen Quelle laden useEffect(() => { - if (!map) return; - map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); - } - }); + async function fetchData() { + try { + const responses = await Promise.all([ + fetch(config.mapGisStationsStaticDistrictUrl), + fetch(config.mapGisStationsStatusDistrictUrl), + ]); + const [jsonResponse, statusResponse] = await Promise.all( + responses.map((res) => res.json()) + ); - // Marker für lokale MySQL-Daten - 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, - }); + if ( + jsonResponse && + jsonResponse.Points && + statusResponse && + statusResponse.Statis + ) { + const statisMap = new Map( + statusResponse.Statis.map((s) => [s.IdLD, s]) + ); + let markersData = jsonResponse.Points.filter( + (p) => p.System === 1 + ).map((p) => { + const statis = statisMap.get(p.IdLD); + const marker = L.marker([p.X, p.Y], { + icon: L.icon({ + iconUrl: statis + ? `img/icons/${statis.Na}-marker-icon-${p.Icon}.png` + : `img/icons/marker-icon-${p.Icon}.png`, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + }), + bounceOnAdd: !!statis, + }); - marker.bindPopup( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, closeButton: true } - ); - marker.bindTooltip( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, direction: "top", offset: [0, -30] } - ); - - 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); - - /* if (marker[GisStationsStatusDistrict.IdLD].options.system === 1) { - if (namesArray.includes("TALAS")) { - marker[GisStationsStatusDistrict.IdLD].addTo(TALAS); - console.log("TALAS system added"); - } - } */ - }); - - // Marker für GisStationsStaticDistrict - GisStationsStaticDistrict.forEach((station) => { - //console.log("station 222:", station); - // Filter für Statusobjekte dieser spezifischen Station - const matchingStatuses = GisStationsStatusDistrict.filter( - (status) => status.IdLD === station.IdLD - ); - - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: "default-icon.png", // Default, wird geändert - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }), - }).addTo(map); - - // Popup beim Überfahren mit der Maus öffnen - marker.on("mouseover", function (e) { - this.openPopup(); - }); - - // Popup schließen, wenn die Maus den Marker verlässt - marker.on("mouseout", function (e) { - this.closePopup(); - }); - - // String-Zusammenstellung für das Popup-Infofenster - let statusInfo = matchingStatuses - .reverse() - .map( - (status) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - - // Bestimmen des Icons basierend auf dem Status - let iconPath = getIconPath( - matchingStatuses[0]?.Na || "", - station.Icon, - marker - ); - - marker.setIcon( - L.icon({ - iconUrl: iconPath, - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }) - ); - // Check if the icon path includes 'critical' and initiate bouncing - if ( - iconPath.includes("critical") || - iconPath.includes("major") || - iconPath.includes("minor") || - iconPath.includes("system") - ) { - marker.setBouncingOptions({ - bounceHeight: 15, - contractHeight: 12, - bounceSpeed: 52, - contractSpeed: 52, - shadowAngle: null, - }); - marker.bounce(3); - } - //------------------------------------------------------------------------------------------------------------------------- - //------------------------------------------------------------------------------------------------------------------------- - - // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht - if (station.LD_Name === "GMA Littwin (TEST)") { - marker - .bindTooltip( - `
${station.Area_Name}
`, - { - permanent: true, - direction: "right", - opacity: 1, // Tooltip immer sichtbar - offset: L.point({ x: 10, y: 0 }), + if (statis) { + marker.on("add", () => marker.bounce(3)); } - ) - .addTo(GMA); + + // Ein Popup und Tooltip mit Informationen zur Station binden + marker.bindPopup( + `Station: ${p.LD_Name}
Device: ${p.Device}` + ); + /* marker.bindTooltip( + `
Station: ${p.LD_Name}
`, + { + permanent: false, + direction: "top", + } + ); */ + + return marker; + }); + setTalasMarkers(markersData); + } + } catch (error) { + console.error("Error fetching data: ", error); + } + } + + if (!map) return; + + fetchData(); + }, [map]); // Abhängigkeit nur auf `map` setzen + + useEffect(() => { + if (map && talasMarkers.length) { + talasMarkers.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(TALAS); + } + }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken + + console.log("talasMarkers", talasMarkers); + //------------------------------------------- + const mapLayersVisibility = useRecoilValue(mapLayersState); + + useEffect(() => { + if (!map || !talasMarkers) return; + + const toggleLayer = (isVisible) => { + if (isVisible) { + talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added } else { - marker - .bindTooltip( - `
${station.LD_Name}
`, - { - permanent: false, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ) - .addTo(GMA); + talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually } + }; - //console.log("station.System:", station.System); - //Durchsuche GisSystemStatic und gib in der console den Attribute Name aus + // Apply visibility state to the TALAS layer + toggleLayer(mapLayersVisibility.TALAS); + }, [map, talasMarkers, mapLayersVisibility.TALAS]); // Depend on map, markers array, and visibility state - //console.log("GisSystem:", GisSystemStatic); - //------------------------------------------------------------------------------------------------------------------------- - //------------------------------------------------------------------------------------------------------------------------- - // Marker zu OMS und der Karte hinzufügen - oms.addMarker(marker); - marker.addTo(map).bindPopup(` - ${station.LD_Name}
- ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name})
- ${statusInfo}
- `); - let LocID = station.IdLocation; - //console.log("station test :", station); - - //alle Layers anzeigen unter GMA sind alle - // console.log("TALAS Layers:", TALAS); - - //TALAS Layer entfernen - // map.removeLayer(layers.TALAS); - // wenn station.LD_Name = "GMA Littwin (TEST)" dann entferne den Marker - /* if (station.LD_Name === "GMA Littwin (TEST)") { - map.removeLayer(marker); - } - // wenn station.LD_Name = "CPL Bentheim" dann entferne den Marker - if (station.LD_Name === "CPL Bentheim") { - map.removeLayer(marker); - } */ - map.removeLayer(marker); - }); - }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich - - //------------------------------------------------------------------------------------------------------------------------- - //GMA Layer - const [layerGMA, setLayerGMA] = useState([]); - const [showGMA, setShowGMA] = useState(true); - 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 - //GMA.addTo(map); - if (!map) return; - if (showGMA) { - GMA.addTo(map); - } else { - GMA.remove(); - } - setLayerGMA(GMA); - //console.log("layerGMA:", layerGMA); - console.log("GMA layerGroup:", GMA); - }, [map, GisStationsStaticDistrict, oms]); - //--------------------------------------------------------------------------------- - //------------------------------------------------------------------------------------------------------------------------- - //TALAS Layer - const [layerTALAS, setLayerTALAS] = useState([]); - const [showTALAS, setShowTALAS] = useState(true); - useEffect(() => { - if (!map || !GisStationsStaticDistrict) return; - - // Clear existing markers to prevent duplicates - TALAS.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) === 1) { - 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(TALAS); - 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); - if (showTALAS) { - TALAS.addTo(map); - } else { - console.log("Removing TALAS from map"); - TALAS.remove(); - } - setLayerTALAS(TALAS); - //console.log("layerTALAS:", layerTALAS); - console.log("TALAS layerGroup:", TALAS); - }, [map, GisStationsStaticDistrict, oms, showTALAS]); - //--------------------------------------------------------------------------------- - - //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict); + const handleCheckboxChange = (event) => { + const { checked } = event.target; + setMapLayersVisibility((prev) => ({ + ...prev, + TALAS: checked, + })); + }; //------------------------------------------ - /* useEffect(() => { - if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length) - return; - // Alte Marker löschen - map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); + // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS + + useEffect(() => { + if (!map || !talasMarkers) return; + + const toggleLayer = (isVisible) => { + if (isVisible) { + talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added + } else { + talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually } - }); + }; - // Neuen Markern basierend auf den System IDs zuordnen - GisStationsStaticDistrict.forEach((station) => { - // Finden des entsprechenden System-Objekts - const system = GisSystemStatic.find((s) => s.IdSystem === station.System); - console.log("System idsystem:", system); - console.log("Station system:", station); - //station Object zu layerGroup hinzufügen - - if (system) { - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: "default-icon.png", - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }), - }); - - // Marker dem entsprechenden Layer hinzufügen - if (layers[system.LayerName]) { - layers[system.LayerName].addLayer(marker); - } - //zeige alle Marker des Layers an - //console.log("Layer GMA:", TALAS); - - // Optional: Popup oder Tooltip hinzufügen - marker.bindPopup( - `Station: ${station.LD_Name}
System: ${system.Name}` - ); - } - }); - console.log("layerGroup GMA :", GMA._layers); - console.log("layer TALAS :", layers.GMA._layers); - }, [map, GisStationsStaticDistrict, GisSystemStatic]); */ - - //------------------------------------------ - /* useEffect(() => { - if (map) { - Object.keys(layerVisibility).forEach((layerName) => { - const layer = layers[layerName]; - if (layer) { - console.log( - `Updating layer ${layerName}: ${layerVisibility[layerName] ? "add" : "remove"}` - ); - if (layerVisibility[layerName]) { - map.addLayer(layer); - } else { - map.removeLayer(layer); - } - } else { - console.error( - "Versuch, nicht definierten Layer zu manipulieren:", - layerName - ); - } - }); - } - }, [layerVisibility, map]); */ + // Apply visibility state to the TALAS layer + toggleLayer(mapLayersVisibility.TALAS); + }, [map, talasMarkers, mapLayersVisibility.TALAS]); //------------------------------------------ */ - /* let uniqueIdLDsData = []; - let Tooltip = []; - - for (let index = 0; index < uniqueIdLDsData.length; index++) { - let element = uniqueIdLDsData[index].split(","); - let lat = element[0]; - let lng = element[1]; - let ID = element[2]; - let IdLD = element[3]; - let LocID = element[4]; - - Tooltip[LocID] = L.marker([lat, lng], { icon: invisibleMarker }) - .bindTooltip( - '
' + - '
---
' + - '
---
' + - '
---
' + - '
---
' + - '
---
' + - "
", - { - permanent: true, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ) - .openTooltip() - .addTo(GMA); - } */ - - //------------------------------------------ return ( <> +