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 */}
- {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})
-
${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})
-
${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(
- '' +
- '
---
' +
- '
---
' +
- '
---
' +
- '
---
' +
- '
---
' +
- "