Files
nodeMap/hooks/useDynamicMarkerLayers.js
ISA d0811366f5 feat: Marker-Layer-Logik in useDynamicMarkerLayers Hook ausgelagert
- Logik zur Initialisierung und Aktualisierung von Marker-Layern aus MapComponent.js ausgelagert.
- Neuer Hook: useDynamicMarkerLayers im hooks-Verzeichnis hinzugefügt.
- Modularisierung und Wiederverwendbarkeit verbessert.
2024-12-22 07:07:09 +01:00

81 lines
3.4 KiB
JavaScript

import { useEffect, useRef } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
import { checkOverlappingMarkers } from "../utils/markerUtils";
import { plusRoundIcon } from "../components/PlusRoundIcon.js";
export const useDynamicMarkerLayers = (
map,
gisSystemStaticLoaded,
GisSystemStatic,
priorityConfig,
setMarkerStates
) => {
const layerRefs = {
gmaLayerRef: useRef(null),
talasLayerRef: useRef(null),
eciMarkersLayerRef: useRef(null),
gsmModemMarkersLayerRef: useRef(null),
ciscoRouterMarkersLayerRef: useRef(null),
wagoMarkersLayerRef: useRef(null),
siemensMarkersLayerRef: useRef(null),
otdrMarkersLayerRef: useRef(null),
wdmMarkersLayerRef: useRef(null),
messstellenMarkersLayerRef: useRef(null),
talasiclMarkersLayerRef: useRef(null),
dauzMarkersLayerRef: useRef(null),
smsfunkmodemMarkersLayerRef: useRef(null),
ulafMarkersLayerRef: useRef(null),
sonstigeMarkersLayerRef: useRef(null),
tkComponentsMarkersRef: useRef(null),
};
useEffect(() => {
if (!gisSystemStaticLoaded || !map) return;
const layerGroups = [
{ ref: layerRefs.gmaLayerRef, id: 11, setState: setMarkerStates.setGmaMarkers },
{ ref: layerRefs.talasLayerRef, id: 1, setState: setMarkerStates.setTalasMarkers },
{ ref: layerRefs.eciMarkersLayerRef, id: 2, setState: setMarkerStates.setEciMarkers },
{ ref: layerRefs.gsmModemMarkersLayerRef, id: 5, setState: setMarkerStates.setGsmModemMarkers },
{ ref: layerRefs.ciscoRouterMarkersLayerRef, id: 6, setState: setMarkerStates.setCiscoRouterMarkers },
{ ref: layerRefs.wagoMarkersLayerRef, id: 7, setState: setMarkerStates.setWagoMarkers },
{ ref: layerRefs.siemensMarkersLayerRef, id: 8, setState: setMarkerStates.setSiemensMarkers },
{ ref: layerRefs.otdrMarkersLayerRef, id: 9, setState: setMarkerStates.setOtdrMarkers },
{ ref: layerRefs.wdmMarkersLayerRef, id: 10, setState: setMarkerStates.setWdmMarkers },
{ ref: layerRefs.messstellenMarkersLayerRef, id: 13, setState: setMarkerStates.setMessstellenMarkers },
{ ref: layerRefs.talasiclMarkersLayerRef, id: 100, setState: setMarkerStates.setTalasiclMarkers },
{ ref: layerRefs.dauzMarkersLayerRef, id: 110, setState: setMarkerStates.setDauzMarkers },
{ ref: layerRefs.smsfunkmodemMarkersLayerRef, id: 111, setState: setMarkerStates.setSmsfunkmodemMarkers },
{ ref: layerRefs.ulafMarkersLayerRef, id: 0, setState: setMarkerStates.setUlafMarkers },
{ ref: layerRefs.sonstigeMarkersLayerRef, id: 200, setState: setMarkerStates.setSonstigeMarkers },
{ ref: layerRefs.tkComponentsMarkersRef, id: 30, setState: setMarkerStates.setTkComponentsMarkers },
];
layerGroups.forEach(({ ref }) => {
if (!ref.current) {
ref.current = new L.LayerGroup().addTo(map);
}
});
const updateMarkers = ({ ref, id, setState }) => {
if (ref.current) {
ref.current.clearLayers();
}
createAndSetDevices(id, (newMarkers) => {
setState(newMarkers);
newMarkers.forEach((marker) => ref.current.addLayer(marker));
checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
}, GisSystemStatic, priorityConfig);
};
const updateAllMarkers = () => {
layerGroups.forEach(updateMarkers);
};
updateAllMarkers();
}, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
};