diff --git a/components/MapComponent.js b/components/MapComponent.js
index 60b4a44c2..01c0aa1f3 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -31,6 +31,25 @@ const plusRoundIcon = L.icon({
});
const MapComponent = ({ locations, onLocationUpdate }) => {
+ const zoomTrigger = useRecoilValue(zoomTriggerState);
+ const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
+ const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+ //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
+ // Create map layers
+ const TALAS = new L.layerGroup();
+ const ECI = new L.layerGroup();
+ const ULAF = new L.layerGroup();
+ const GSMModem = new L.layerGroup();
+ const CiscoRouter = new L.layerGroup();
+ const WAGO = new L.layerGroup();
+ const Siemens = new L.layerGroup();
+ const OTDR = new L.layerGroup();
+ const WDM = new L.layerGroup();
+ const GMA = new L.layerGroup();
+ const Sonstige = new L.layerGroup();
+ const TALASICL = new L.layerGroup();
+
+ const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
const baseUrl = "http://10.10.0.13/talas5/devices/";
const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
const [poiTypMap, setPoiTypMap] = useState(new Map());
@@ -99,6 +118,339 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
};
+ //----------------------------------------------------
+ //-----Kontextmenu----------------
+ function addContextMenuToMarker(marker) {
+ marker.bindContextMenu({
+ contextmenu: true,
+ contextmenuWidth: 140,
+ contextmenuItems: [
+ {
+ text: "Station öffnen (Tab)",
+ icon: "/img/screen_new.png",
+ callback: (e) => openInNewTab(e, marker),
+ },
+ {
+ text: "Station öffnen",
+ icon: "/img/screen_same.png",
+ callback: (e) => openInSameWindow(e, marker),
+ },
+ ],
+ });
+ }
+ // Funktion zum Öffnen in einem neuen Tab
+ function openInNewTab(e, marker) {
+ console.log("Marker data:", baseUrl + marker.options.link);
+ window.open(baseUrl + marker.options.link, "_blank");
+ }
+
+ // Funktion zum Öffnen im gleichen Fenster
+ function openInSameWindow(e, marker) {
+ console.log("Marker data:", baseUrl + marker.options.link);
+ window.location.href = baseUrl + marker.options.link;
+ }
+
+ const zoomIn = (e) => {
+ initMap.flyTo(e.latlng, 12);
+ //console.log("ZoomIn koordinaten in MapComponent", e.latlng);
+ };
+
+ const zoomOut = (e) => {
+ fly();
+ };
+ const centerHere = (e) => {
+ initMap.panTo(e.latlng);
+ };
+
+ // Funktion zum Anzeigen der Koordinaten
+ const showCoordinates = (e) => {
+ alert(
+ "Breitengrad: " +
+ e.latlng.lat.toFixed(5) +
+ "\nLängengrad: " +
+ e.latlng.lng.toFixed(5)
+ );
+ };
+ const showData = (e) => {};
+ const showTalas = (e) => {
+ map.addLayer(TALAS);
+ loadData();
+ };
+ const hideTalas = (e) => {
+ map.removeLayer(TALAS);
+ loadData();
+ };
+ const showGSM = (e) => {
+ map.addLayer(GMA);
+ loadData();
+ };
+ const hideGSM = (e) => {
+ map.removeLayer(GMA);
+ loadData();
+ };
+
+ // Kontextmenü Callback für "Station hinzufügen"
+ const addStationCallback = (event) => {
+ setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
+ setShowPopup(true); // Popup öffnen
+ };
+ //-----Kontextmenu----ende------------
+ //------------------------------------------ */
+ const layerNames = {
+ "GSM Modem": "GSMMODEM",
+ "Cisco Router": "CiscoRouter",
+ "TALAS ICL": "TALASICL",
+ "SMS-Funkmodem": "GSMModem",
+ };
+ //------------------------------------------ */
+ function fly(stationValue) {
+ var x = 51.41321407879154;
+ var y = 7.739617925303934;
+ var zoom = 7;
+
+ initMap.flyTo([x, y], zoom);
+ }
+
+ function getIconPath(status, iconNumber, marker) {
+ let path = status
+ ? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
+ : `TileMap/img/icons/marker-icon-${iconNumber}.png`;
+
+ // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
+ if (
+ path.includes("critical") || // Priorität 1
+ path.includes("major") || // Priorität 2
+ path.includes("minor") || // Priorität 3
+ path.includes("system") // Priorität 4
+ ) {
+ // Setze Bouncing-Optionen
+ marker.setBouncingOptions({
+ bounceHeight: 15, // Höhe des Bounces
+ contractHeight: 12, // Höhe des Einzugs beim Landen
+ bounceSpeed: 52, // Geschwindigkeit des Bounces
+ contractSpeed: 52, // Geschwindigkeit des Einzugs
+ shadowAngle: null, // Standard-Schattenwinkel
+ });
+ // Check if the icon path includes 'critical'
+ if (path.includes("critical")) {
+ // marker.bounce(3);
+ }
+ }
+
+ return path;
+ }
+ //------------------------------------------
+ // Funktionen zur Überwachung der Internetverbindung
+ const checkInternet = () => {
+ fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
+ .then((response) => setOnline(response.ok))
+ .catch(() => setOnline(false));
+ };
+ let initMap = [];
+ //------------------------------------------
+ //------------------------------------------
+ function parsePoint(pointString) {
+ const match = pointString.match(
+ /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
+ );
+ if (match) {
+ return {
+ longitude: parseFloat(match[1]),
+ latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
+ };
+ } else {
+ // Handle the error or return a default/fallback value
+ console.error("Invalid POINT format:", pointString);
+ return null; // Oder eine sinnvolle Standardantwort
+ }
+ }
+ //----------------------------------
+ //------------------------------------------
+
+ function parsePoint(position) {
+ const [longitude, latitude] = position.slice(6, -1).split(" ");
+ return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
+ }
+ //-----------------------------------------------------------------
+ // TALAS Marker hinzufügen
+ //-----------------------------------------------------------------
+ // Reihenfolge nach API sortiert mit der Attribute "System"
+ const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
+ const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
+ const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
+ const [ciscoRouterVisible, setCiscoRouterVisible] =
+ useRecoilState(mapLayersState);
+ const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
+ const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
+ const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
+ const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
+ const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
+ const [messstellenVisible, setMessstellenVisible] =
+ useRecoilState(mapLayersState);
+ const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
+ const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
+ const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
+ useRecoilState(mapLayersState);
+ const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
+ const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
+
+ const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
+ const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
+ const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
+ const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
+ const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
+ const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
+ const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
+ const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
+ const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
+ const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
+ const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
+ const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
+ const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
+ const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
+ const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
+ //--------------------------------------------------------------------------------
+ function determinePriority(iconPath) {
+ if (iconPath.includes("critical")) return 1; // Highest priority
+ if (iconPath.includes("major")) return 2;
+ if (iconPath.includes("minor")) return 3;
+ if (iconPath.includes("system")) return 4;
+ return 5; // Default priority (lowest)
+ }
+ // Daten von einer externen Quelle laden
+ const createAndSetMarkers = async (systemId, setMarkersFunction) => {
+ try {
+ const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
+ const jsonResponse = await response1.json();
+ 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 &&
+ 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 marker = L.marker([station.X, station.Y], {
+ icon: L.icon({
+ iconUrl: iconPath,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ }),
+ areaName: station.Area_Name,
+ link: station.Link,
+ bounceOnAdd: !!statis,
+ });
+
+ marker.bindPopup(`
+
+
${station.LD_Name}
+
Gerät: ${station.Device}
+
Zone: ${station.Area_Short} (${station.Area_Name})
+
Standort: ${station.Location_Short} (${station.Location_Name})
+
+ `);
+ return marker;
+ });
+
+ setMarkersFunction(markersData);
+ }
+ } catch (error) {
+ console.error("Error fetching data: ", error);
+ }
+ };
+ //--------------------------------------------------------------------------------
+
+ const mapLayersVisibility = useRecoilValue(mapLayersState);
+
+ const handleCheckboxChange = (name, event) => {
+ const { checked } = event.target;
+ const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
+
+ setMapLayersVisibility((prev) => {
+ return {
+ ...prev,
+ [internalName]: checked,
+ };
+ });
+ };
+
+ //------------------------------------------
+ //------------------------------------------ */
+ const selectedArea = useRecoilValue(selectedAreaState);
+
+ // Combine all markers into a single array
+ const allMarkers = [
+ ...talasMarkers,
+ ...eciMarkers,
+ ...gsmModemMarkers,
+ ...ciscoRouterMarkers,
+ ...wagoMarkers,
+ ...siemensMarkers,
+ ...otdrMarkers,
+ ...wdmMarkers,
+ ...gmaMarkers,
+ ...messstellenMarkers,
+ ...talasiclMarkers,
+ ...dauzMarkers,
+ ...smsfunkmodemMarkers,
+ ...sonstigeMarkers,
+ ...ulafMarkers,
+ ];
+
+ // Function to find a marker by areaName across all groups
+ const findMyMarker = (areaName) => {
+ return allMarkers.find((marker) => marker.options.areaName === areaName);
+ };
+ //--------------------------------------------------------------
+ //---------------------------------------------------------
+ // Now update checkOverlappingMarkers to check if oms is initialized
+ function checkOverlappingMarkers(map, markers, plusIcon) {
+ // Ensure markers is always an array
+ if (!Array.isArray(markers)) {
+ //console.error("The `markers` argument is not an array:", markers);
+ return;
+ }
+
+ const overlappingGroups = {};
+
+ // Group markers by coordinates as strings
+ markers.forEach((marker) => {
+ const latlngStr = marker.getLatLng().toString();
+ if (overlappingGroups[latlngStr]) {
+ overlappingGroups[latlngStr].push(marker);
+ } else {
+ overlappingGroups[latlngStr] = [marker];
+ }
+ });
+
+ // Add plus markers at coordinates where overlaps occur
+ for (const coords in overlappingGroups) {
+ if (overlappingGroups[coords].length > 1) {
+ const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
+ const plusMarker = L.marker(latLng, { icon: plusIcon });
+ plusMarker.addTo(map);
+
+ //console.log("Adding plus icon marker at", latLng);
+ }
+ }
+ }
+ //---------------------------------------------------------
+ //------------------------------------------
// API-Daten laden für GisStationsStaticDistrict
//http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
useEffect(() => {
@@ -207,8 +559,6 @@ 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 () => {
@@ -236,36 +586,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}, []);
//------------------------------------------
- const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
- const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
- //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
- // Create map layers
- const TALAS = new L.layerGroup();
- const ECI = new L.layerGroup();
- const ULAF = new L.layerGroup();
- const GSMModem = new L.layerGroup();
- const CiscoRouter = new L.layerGroup();
- const WAGO = new L.layerGroup();
- const Siemens = new L.layerGroup();
- const OTDR = new L.layerGroup();
- const WDM = new L.layerGroup();
- const GMA = new L.layerGroup();
- const Sonstige = new L.layerGroup();
- const TALASICL = new L.layerGroup();
-
useEffect(() => {
if (typeof window !== "undefined") {
//console.log("Window height from config:", config.windowHeight);
}
}, []);
- // Funktionen zur Überwachung der Internetverbindung
- const checkInternet = () => {
- fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
- .then((response) => setOnline(response.ok))
- .catch(() => setOnline(false));
- };
- let initMap = [];
// Initialisierung der karte und hinzuügen der Layers
useEffect(() => {
if (mapRef.current && !map) {
@@ -349,23 +675,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
console.log("trigger in MapComponent.js:", poiReadTrigger);
}, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig
- //------------------------------------------
- function parsePoint(pointString) {
- const match = pointString.match(
- /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
- );
- if (match) {
- return {
- longitude: parseFloat(match[1]),
- latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
- };
- } else {
- // Handle the error or return a default/fallback value
- console.error("Invalid POINT format:", pointString);
- return null; // Oder eine sinnvolle Standardantwort
- }
- }
- //----------------------------------
// poiTyp Daten hinzufügen
//------------------------------------------
// Funktion zum Abrufen der poiTyp Daten
@@ -392,194 +701,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
console.log("poiTypData aktualisiert:", poiTypData);
}, [poiTypData]);
- //----------------------------------------------------
- //-----Kontextmenu----------------
- function addContextMenuToMarker(marker) {
- marker.bindContextMenu({
- contextmenu: true,
- contextmenuWidth: 140,
- contextmenuItems: [
- {
- text: "Station öffnen (Tab)",
- icon: "/img/screen_new.png",
- callback: (e) => openInNewTab(e, marker),
- },
- {
- text: "Station öffnen",
- icon: "/img/screen_same.png",
- callback: (e) => openInSameWindow(e, marker),
- },
- ],
- });
- }
- // Funktion zum Öffnen in einem neuen Tab
- function openInNewTab(e, marker) {
- console.log("Marker data:", baseUrl + marker.options.link);
- window.open(baseUrl + marker.options.link, "_blank");
- }
-
- // Funktion zum Öffnen im gleichen Fenster
- function openInSameWindow(e, marker) {
- console.log("Marker data:", baseUrl + marker.options.link);
- window.location.href = baseUrl + marker.options.link;
- }
-
- const zoomIn = (e) => {
- initMap.flyTo(e.latlng, 12);
- //console.log("ZoomIn koordinaten in MapComponent", e.latlng);
- };
-
- const zoomOut = (e) => {
- fly();
- };
- const centerHere = (e) => {
- initMap.panTo(e.latlng);
- };
-
- // Funktion zum Anzeigen der Koordinaten
- const showCoordinates = (e) => {
- alert(
- "Breitengrad: " +
- e.latlng.lat.toFixed(5) +
- "\nLängengrad: " +
- e.latlng.lng.toFixed(5)
- );
- };
- const showData = (e) => {};
- const showTalas = (e) => {
- map.addLayer(TALAS);
- loadData();
- };
- const hideTalas = (e) => {
- map.removeLayer(TALAS);
- loadData();
- };
- const showGSM = (e) => {
- map.addLayer(GMA);
- loadData();
- };
- const hideGSM = (e) => {
- map.removeLayer(GMA);
- loadData();
- };
-
- // Kontextmenü Callback für "Station hinzufügen"
- const addStationCallback = (event) => {
- setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
- setShowPopup(true); // Popup öffnen
- };
- //-----Kontextmenu----ende------------
- // Ensure this function is only called when map is initialized and available
- /* const showAddStationPopup = (e, map) => {
- const container = L.DomUtil.create("div");
-
- // Create a root container for the React component inside the popup
- const root = ReactDOM.createRoot(container);
-
- root.render(
-
-
-
- );
-
- // Create and configure the popup
- L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);
-
- // Cleanup when the popup is closed
- initMap.on("popupclose", () => {
- root.unmount(); // Use unmount method from the root
- });
- }; */
-
- // Inside your ShowAddStationPopup component
- /* useEffect(() => {
- // Cleanup function to unmount React component
- return () => {
- if (container._reactRoot) {
- container._reactRoot.unmount();
- }
- };
- }, []); */
-
- //------------------------------------------
-
- // Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
- /* async function handleSubmit(event) {
- event.preventDefault();
- const form = event.target;
-
- // Einfache Validierung, um sicherzustellen, dass idPoiTyp eine Zahl ist
- if (!form.idPoiTyp.value || isNaN(form.idPoiTyp.value)) {
- alert("Bitte geben Sie eine gültige ID für den Poi-Typ ein.");
- return; // Beendet die Funktion, um das Senden von ungültigen Daten zu verhindern
- }
-
- const data = {
- name: form.name.value,
- type: form.type.value,
- idPoi: form.idPoi.value,
- idPoiTyp: form.idPoiTyp.value,
- latitude: form.lat.value,
- longitude: form.lng.value,
- };
-
- // Senden der Daten an den Server
- const response = await fetch("/api/addLocation", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(data),
- });
-
- if (response.ok) {
- console.log("Station erfolgreich hinzugefügt");
- // Weitere Aktionen nach erfolgreichem Hinzufügen
- } else {
- console.error("Fehler beim Hinzufügen der Station");
- // Fehlerbehandlung
- }
- } */
-
//---------------------------------------
- function fly(stationValue) {
- var x = 51.41321407879154;
- var y = 7.739617925303934;
- var zoom = 7;
-
- initMap.flyTo([x, y], zoom);
- }
-
- function getIconPath(status, iconNumber, marker) {
- let path = status
- ? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
- : `TileMap/img/icons/marker-icon-${iconNumber}.png`;
-
- // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
- if (
- path.includes("critical") || // Priorität 1
- path.includes("major") || // Priorität 2
- path.includes("minor") || // Priorität 3
- path.includes("system") // Priorität 4
- ) {
- // Setze Bouncing-Optionen
- marker.setBouncingOptions({
- bounceHeight: 15, // Höhe des Bounces
- contractHeight: 12, // Höhe des Einzugs beim Landen
- bounceSpeed: 52, // Geschwindigkeit des Bounces
- contractSpeed: 52, // Geschwindigkeit des Einzugs
- shadowAngle: null, // Standard-Schattenwinkel
- });
- // Check if the icon path includes 'critical'
- if (path.includes("critical")) {
- // marker.bounce(3);
- }
- }
-
- return path;
- }
- //------------------------------------------
// Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
useEffect(() => {
const fetchPoiTypData = async () => {
@@ -704,115 +827,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
}, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
- //------------------------------------------
-
- function parsePoint(position) {
- const [longitude, latitude] = position.slice(6, -1).split(" ");
- return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
- }
- //-----------------------------------------------------------------
- // TALAS Marker hinzufügen
- //-----------------------------------------------------------------
- // Reihenfolge nach API sortiert mit der Attribute "System"
- const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
- const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
- const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
- const [ciscoRouterVisible, setCiscoRouterVisible] =
- useRecoilState(mapLayersState);
- const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
- const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
- const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
- const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
- const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
- const [messstellenVisible, setMessstellenVisible] =
- useRecoilState(mapLayersState);
- const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
- const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
- const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
- useRecoilState(mapLayersState);
- const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
- const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
-
- const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
- const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
- const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
- const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
- const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
- const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
- const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
- const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
- const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
- const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
- const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
- const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
- const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
- const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
- const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
- //--------------------------------------------------------------------------------
- function determinePriority(iconPath) {
- if (iconPath.includes("critical")) return 1; // Highest priority
- if (iconPath.includes("major")) return 2;
- if (iconPath.includes("minor")) return 3;
- if (iconPath.includes("system")) return 4;
- return 5; // Default priority (lowest)
- }
- // Daten von einer externen Quelle laden
- const createAndSetMarkers = async (systemId, setMarkersFunction) => {
- try {
- const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
- const jsonResponse = await response1.json();
- 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 &&
- 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 marker = L.marker([station.X, station.Y], {
- icon: L.icon({
- iconUrl: iconPath,
- iconSize: [25, 41],
- iconAnchor: [12, 41],
- popupAnchor: [1, -34],
- }),
- areaName: station.Area_Name,
- link: station.Link,
- bounceOnAdd: !!statis,
- });
-
- marker.bindPopup(`
-
-
${station.LD_Name}
-
Gerät: ${station.Device}
-
Zone: ${station.Area_Short} (${station.Area_Name})
-
Standort: ${station.Location_Short} (${station.Location_Name})
-
- `);
- return marker;
- });
-
- setMarkersFunction(markersData);
- }
- } catch (error) {
- console.error("Error fetching data: ", error);
- }
- };
-
useEffect(() => {
if (gisSystemStaticLoaded && map) {
createAndSetMarkers(1, setTalasMarkers); // TALAS-System
@@ -1237,38 +1251,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
//console.log("sonstige", sonstigeMarkers);
//-------------------------------------------
- //--------------------------------------------------------------------------------
-
- 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 {
- talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
- }
- };
-
- // Apply visibility state to the TALAS layer
- toggleLayer(mapLayersVisibility.TALAS);
- }, [map, talasMarkers, mapLayersVisibility.TALAS]); */ // Depend on map, markers array, and visibility state
-
- const handleCheckboxChange = (name, event) => {
- const { checked } = event.target;
- const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
-
- setMapLayersVisibility((prev) => {
- return {
- ...prev,
- [internalName]: checked,
- };
- });
- };
-
- //------------------------------------------
// Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
@@ -1337,13 +1319,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
//------------------------------------------ */
- const layerNames = {
- "GSM Modem": "GSMMODEM",
- "Cisco Router": "CiscoRouter",
- "TALAS ICL": "TALASICL",
- "SMS-Funkmodem": "GSMModem",
- };
- //------------------------------------------ */
+
// Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
useEffect(() => {
@@ -1538,31 +1514,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
//------------------------------------------ */
- const selectedArea = useRecoilValue(selectedAreaState);
-
- // Combine all markers into a single array
- const allMarkers = [
- ...talasMarkers,
- ...eciMarkers,
- ...gsmModemMarkers,
- ...ciscoRouterMarkers,
- ...wagoMarkers,
- ...siemensMarkers,
- ...otdrMarkers,
- ...wdmMarkers,
- ...gmaMarkers,
- ...messstellenMarkers,
- ...talasiclMarkers,
- ...dauzMarkers,
- ...smsfunkmodemMarkers,
- ...sonstigeMarkers,
- ...ulafMarkers,
- ];
-
- // Function to find a marker by areaName across all groups
- const findMyMarker = (areaName) => {
- return allMarkers.find((marker) => marker.options.areaName === areaName);
- };
// Effect to handle navigation to selected area
useEffect(() => {
@@ -1574,15 +1525,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
}, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
- /* const findMyMarker = (areaName) => {
- // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
- return talasMarkers.find((marker) => marker.options.areaName === areaName);
- }; */
-
//------------------------------------------
- const zoomTrigger = useRecoilValue(zoomTriggerState);
-
useEffect(() => {
if (map) {
var x = 51.41321407879154;
@@ -1605,37 +1549,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// Beispiel: Daten neu laden oder aktualisieren
}, [poiReadTrigger]);
//---------------------------------------------------------
- // Now update checkOverlappingMarkers to check if oms is initialized
- function checkOverlappingMarkers(map, markers, plusIcon) {
- // Ensure markers is always an array
- if (!Array.isArray(markers)) {
- //console.error("The `markers` argument is not an array:", markers);
- return;
- }
-
- const overlappingGroups = {};
-
- // Group markers by coordinates as strings
- markers.forEach((marker) => {
- const latlngStr = marker.getLatLng().toString();
- if (overlappingGroups[latlngStr]) {
- overlappingGroups[latlngStr].push(marker);
- } else {
- overlappingGroups[latlngStr] = [marker];
- }
- });
-
- // Add plus markers at coordinates where overlaps occur
- for (const coords in overlappingGroups) {
- if (overlappingGroups[coords].length > 1) {
- const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
- const plusMarker = L.marker(latLng, { icon: plusIcon });
- plusMarker.addTo(map);
-
- //console.log("Adding plus icon marker at", latLng);
- }
- }
- }
//---------------------------------------------------------
useEffect(() => {