Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Gerätemarker-Sichtbarkeit an Redux-Layerzustand gekoppelt

Browse Source 
- Hardcodiertes Zeichnen der Gerätemarker beim Initialisieren entfernt
- Sichtbarkeitssteuerung vollständig über mapLayersVisibility aus Redux umgesetzt
- Dynamische Layererzeugung aus GisSystemStatic integriert
- Marker werden nur angezeigt, wenn zugehöriger Layer aktiv ist
This commit is contained in:
ISA
2025-06-04 07:08:35 +02:00
parent 0622e6ab52
commit 5cf84fb14e
23 changed files with 236 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
hooks/layers/useCiscoRouterMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // hooks/useCiscoRouterMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useCiscoRouterMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco Router
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && ciscoRouterMarkers.length) {
ciscoRouterMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, ciscoRouterMarkers]);
return ciscoRouterMarkers;
};
export default useCiscoRouterMarkersLayer;
*/

46
hooks/layers/useDauzMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useDauzMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useDauzMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [dauzMarkers, setDauzMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && dauzMarkers.length) {
dauzMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, dauzMarkers, oms]);
return dauzMarkers;
};
export default useDauzMarkersLayer;
*/

23
hooks/layers/useDynamicDeviceLayers.js
View File

@@ -17,12 +17,12 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
const [markerStates, setMarkerStates] = useState({});
const layerRefs = useRef({});
// Marker initialisieren
// Marker initialisieren (nicht sichtbar machen)
useEffect(() => {
if (!map || GisSystemStatic.length === 0) return;
GisSystemStatic.forEach(({ Name, IdSystem }) => {
const key = `system-${IdSystem}`; // ✅ Einheitlicher Key
const key = `system-${IdSystem}`; // Einheitlicher Key
if (!layerRefs.current[key]) {
layerRefs.current[key] = new L.LayerGroup().addTo(map);
@@ -30,12 +30,11 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
createAndSetDevices(
IdSystem,
(newMarkers) => {
setMarkerStates((prev) => ({ ...prev, [key]: newMarkers }));
newMarkers.forEach((m) => {
layerRefs.current[key].addLayer(m);
if (oms) oms.addMarker(m);
});
newMarkers => {
setMarkerStates(prev => ({ ...prev, [key]: newMarkers }));
// ❌ NICHT direkt zur Karte hinzufügen
// Sichtbarkeit folgt im 2. useEffect
checkOverlappingMarkers(map, newMarkers, plusRoundIcon, oms);
},
GisSystemStatic,
@@ -44,14 +43,14 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
});
}, [map, GisSystemStatic, priorityConfig]);
// Sichtbarkeit aktualisieren
// Sichtbarkeit nach Redux-Status steuern
useEffect(() => {
if (!map) return;
const editMode = localStorage.getItem("editMode") === "true";
Object.entries(markerStates).forEach(([key, markers]) => {
const isVisible = mapLayersVisibility[key];
markers.forEach((marker) => {
markers.forEach(marker => {
const hasLayer = map.hasLayer(marker);
if (editMode || !isVisible) {
if (hasLayer) map.removeLayer(marker);
@@ -61,9 +60,7 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
});
});
const allMarkers = Object.values(markerStates)
.filter(Array.isArray) // nur Arrays zulassen
.flat();
const allMarkers = Object.values(markerStates).filter(Array.isArray).flat();
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
}, [map, markerStates, mapLayersVisibility]);

49
hooks/layers/useEciMarkersLayer.js
View File

@@ -1,49 +0,0 @@
/* // /hooks/layers/useEciMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useEciMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [eciMarkers, setEciMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && eciMarkers.length) {
eciMarkers.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();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, eciMarkers]);
return eciMarkers;
};
export default useEciMarkersLayer;
*/

54
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,54 +0,0 @@
import { useEffect } from "react";
import { store } from "../redux/store";
import L from "leaflet";
import "leaflet-contextmenu";
import { openInNewTab } from "./openInNewTab";
const useGmaMarkersLayer = (map, markers, selectedMarkerId) => {
useEffect(() => {
if (!map || !markers || markers.length === 0) return;
const markerGroup = L.layerGroup();
markers.forEach((markerData) => {
const marker = L.marker([markerData.lat, markerData.lng], {
contextmenu: true,
contextmenuItems: [
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: () =>
openInNewTab(null, {
options: {
link: markerData.link,
},
}),
},
],
});
markerGroup.addLayer(marker);
// Optional: highlight selected marker
if (selectedMarkerId && markerData.id === selectedMarkerId) {
marker.setZIndexOffset(1000);
marker.setIcon(
L.icon({
iconUrl: "/img/marker-selected.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
})
);
}
});
markerGroup.addTo(map);
return () => {
markerGroup.clearLayers();
map.removeLayer(markerGroup);
};
}, [map, markers, selectedMarkerId]);
};
export default useGmaMarkersLayer;

47
hooks/layers/useLteModemMarkersLayer.js
View File

@@ -1,47 +0,0 @@
// hooks/useLteModemMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useLteModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [lteModemMarkers, setLteModemMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && lteModemMarkers.length) {
lteModemMarkers.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();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, lteModemMarkers]);
return lteModemMarkers;
};
export default useLteModemMarkersLayer;

46
hooks/layers/useOtdrMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useOtdrMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices"; // Assuming this function is in poiUtils
const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [otdrMarkers, setOtdrMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && otdrMarkers.length) {
otdrMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, otdrMarkers, oms]);
return otdrMarkers;
};
export default useOtdrMarkersLayer;
*/

50
hooks/layers/useSiemensMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // hooks/useSiemensMarkersLayer.js
import { useState, useEffect } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
const [siemensMarkers, setSiemensMarkers] = useState([]);
useEffect(() => {
if (gisSystemStatic && gisSystemStatic.length && map) {
createAndSetDevices(8, setSiemensMarkers, gisSystemStatic, priorityConfig); // Siemens-System
}
}, [gisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && siemensMarkers.length) {
siemensMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, siemensMarkers, oms]);
return siemensMarkers;
};
export default useSiemensMarkersLayer;
*/

66
hooks/layers/useSmsfunkmodemMarkersLayer.js
View File

@@ -1,66 +0,0 @@
/* // hooks/useSmsfunkmodemMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import "leaflet-contextmenu";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig, isVisible) => {
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
useEffect(() => {
if (!map || !GisSystemStatic) return;
// Debugging: Logge die Sichtbarkeit und die übergebenen Daten
console.log("isVisible für SMS Modem:", isVisible);
console.log("Alle Stationen in GisSystemStatic:", GisSystemStatic);
// Hilfsfunktion: Normalisiert Strings
const normalizeString = (str) => str?.trim().toLowerCase() || "";
// Filter für SMS Modem (System === 111 oder Name entspricht "SMS Modem")
const markers = isVisible
? GisSystemStatic.filter((station) => station.System === 111 || normalizeString(station.Name) === "SMS Modem").map((station) => {
console.log("Gefundener SMS Modem-Marker:", station); // Debugging
const marker = L.marker([station.Latitude, station.Longitude], {
icon: L.icon({
iconUrl: "/img/icons/pois/sms-funkmodem.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
id: station.id,
areaName: station.Area_Name,
draggable: false,
}).bindPopup(`
<div>
<b class="text-xl text-black-700">${station.Area_Name || "Unbekannt"}</b><br>
${station.Description || "No Description"}<br>
</div>
`);
// Füge ein Kontextmenü hinzu
addContextMenuToMarker(marker);
return marker;
})
: [];
// Setze die Marker im Zustand
setSmsfunkmodemMarkers(markers);
// Füge Marker zur Karte hinzu
markers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
});
// Cleanup: Entferne Marker bei Deaktivierung oder wenn der Hook entladen wird
return () => {
markers.forEach((marker) => marker.remove());
};
}, [map, GisSystemStatic, isVisible]);
return smsfunkmodemMarkers;
};
export default useSmsfunkmodemMarkersLayer;
*/

46
hooks/layers/useSonstigeMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useSonstigeMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useSonstigeMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && sonstigeMarkers.length) {
sonstigeMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, sonstigeMarkers, oms]);
return sonstigeMarkers;
};
export default useSonstigeMarkersLayer;
*/

36
hooks/layers/useTalasMarkersLayer.js
View File

@@ -1,36 +0,0 @@
// /hooks/layers/useTalasMarkersLayer.js
/* import { useEffect, useState } from "react";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [talasMarkers, setTalasMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && talasMarkers.length && oms) {
talasMarkers.forEach((marker) => {
oms.addMarker(marker); // Erst zu OMS hinzufügen
marker.addTo(map); // Dann zum Map hinzufügen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker); // Kontextmenü-Event hinzufügen
});
}
}, [map, talasMarkers, oms]);
return talasMarkers;
};
export default useTalasMarkersLayer; */

46
hooks/layers/useTalasiclMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useTalasiclMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useTalasiclMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [talasiclMarkers, setTalasiclMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && talasiclMarkers.length) {
talasiclMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, talasiclMarkers, oms]);
return talasiclMarkers;
};
export default useTalasiclMarkersLayer;
*/

50
hooks/layers/useTkComponentsMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // /hooks/layers/useTkComponentsMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useTkComponentsMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(2, setTkComponentsMarkers, GisSystemStatic, priorityConfig); // ECI-System
}
GisSystemStatic.filter((system) => system.IdSystem === 30).forEach((station) => console.log("Koordinaten für TK-Komponenten wird von hier nie aufgerufen:", station.Latitude, station.Longitude));
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && tkComponentsMarkers.length) {
tkComponentsMarkers.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();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, tkComponentsMarkers]);
return tkComponentsMarkers;
};
export default useTkComponentsMarkersLayer;
*/

78
hooks/layers/useUlafMarkersLayer.js
View File

@@ -1,78 +0,0 @@
/* // hooks/useUlafMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
//import { fetchDeviceNameById } from "../services/api/fetchDeviceNameById";
const useUlafMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [ulafMarkers, setUlafMarkers] = useState([]);
useEffect(() => {
if (!map || !GisSystemStatic) return;
const markers = [];
GisSystemStatic.forEach((station) => {
if (station.System === 0) {
// Adjust the condition to match ULAF system identification
const marker = L.marker([station.Lat, station.Lon], {
icon: L.icon({
iconUrl: "/img/icons/ulaf.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
id: station.id,
name: station.name,
description: station.description,
});
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
${station.description || "Keine Beschreibung"}
</div>
`);
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("click", async () => {
//const deviceName = await fetchDeviceNameById(station.idLD);
marker
.bindPopup(
`
<div>
<b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
${deviceName}<br>
${station.description || "Keine Beschreibung"}
</div>
`
)
.openPopup();
});
markers.push(marker);
if (map) marker.addTo(map);
if (oms) oms.addMarker(marker);
addContextMenuToMarker(marker);
}
});
setUlafMarkers(markers);
return () => {
markers.forEach((marker) => map.removeLayer(marker));
};
}, [map, GisSystemStatic, oms, priorityConfig]);
return ulafMarkers;
};
export default useUlafMarkersLayer;
*/

50
hooks/layers/useWagoMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // hooks/useWagoMarkersLayer.js
import { useState, useEffect } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
const [wagoMarkers, setWagoMarkers] = useState([]);
useEffect(() => {
if (gisSystemStatic && gisSystemStatic.length && map) {
createAndSetDevices(7, setWagoMarkers, gisSystemStatic, priorityConfig); // WAGO-System
}
}, [gisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && wagoMarkers.length) {
wagoMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, wagoMarkers, oms]);
return wagoMarkers;
};
export default useWagoMarkersLayer;
*/

46
hooks/layers/useWdmMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useWdmMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useWdmMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [wdmMarkers, setWdmMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && wdmMarkers.length) {
wdmMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, wdmMarkers, oms]);
return wdmMarkers;
};
export default useWdmMarkersLayer;
*/