103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
// /hooks/useTalasMarkers.js
|
|
import { useEffect, useState } from "react";
|
|
import L from "leaflet";
|
|
import "leaflet-contextmenu";
|
|
import { useRecoilValue } from "recoil";
|
|
import { mapLayersState } from "../../store/atoms/mapLayersState.js";
|
|
import { selectedAreaState } from "../../store/atoms/selectedAreaState.js";
|
|
import { zoomTriggerState } from "../../store/atoms/zoomTriggerState.js";
|
|
import { addContextMenuToMarker } from "../../utils/contextMenuUtils.js";
|
|
import { checkOverlappingMarkers } from "../../utils/mapUtils.js";
|
|
import plusRoundIcon from "../../components/PlusRoundIcon.js";
|
|
import { gisStationsStaticDistrictState } from "../../store/atoms/gisStationState.js";
|
|
|
|
const useTalasMarkers = (map, oms, layers, priorityConfig) => {
|
|
const [talasMarkers, setTalasMarkers] = useState([]);
|
|
const mapLayersVisibility = useRecoilValue(mapLayersState);
|
|
const selectedArea = useRecoilValue(selectedAreaState);
|
|
const zoomTrigger = useRecoilValue(zoomTriggerState);
|
|
const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
|
|
|
|
// Funktion zum Erstellen und Setzen der Marker
|
|
const createAndSetDevices = (systemId, setMarkers, GisSystemStatic, priorityConfig) => {
|
|
const markers = GisSystemStatic.filter((station) => station.System === systemId).map((station) => {
|
|
const marker = L.marker([station.Latitude, station.Longitude], {
|
|
title: station.Name,
|
|
contextmenu: true,
|
|
contextmenuItems: [],
|
|
});
|
|
|
|
marker.bindPopup(`<b>${station.Name}</b><br>${station.Description}`);
|
|
|
|
if (priorityConfig.includes(station.Priority)) {
|
|
marker.setIcon(
|
|
L.icon({
|
|
iconUrl: `/icons/priority_${station.Priority}.png`,
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
})
|
|
);
|
|
}
|
|
|
|
return marker;
|
|
});
|
|
|
|
setMarkers(markers);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (map && talasMarkers.length) {
|
|
talasMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
|
|
map.addLayer(layers.TALAS);
|
|
checkOverlappingMarkers(oms, map, plusRoundIcon);
|
|
}
|
|
}, [map, talasMarkers]);
|
|
|
|
useEffect(() => {
|
|
if (!map || !talasMarkers) return;
|
|
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
talasMarkers.forEach((marker) => marker.addTo(map));
|
|
} else {
|
|
talasMarkers.forEach((marker) => map.removeLayer(marker));
|
|
}
|
|
};
|
|
|
|
toggleLayer(mapLayersVisibility.TALAS);
|
|
}, [map, talasMarkers, mapLayersVisibility.TALAS]);
|
|
|
|
useEffect(() => {
|
|
if (selectedArea && map) {
|
|
const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
|
|
if (station) {
|
|
map.flyTo([station.X, station.Y], 14);
|
|
}
|
|
}
|
|
}, [selectedArea, map, GisStationsStaticDistrict]);
|
|
|
|
useEffect(() => {
|
|
if (zoomTrigger && map) {
|
|
map.flyTo([51.41321407879154, 7.739617925303934], 7);
|
|
}
|
|
}, [zoomTrigger, map]);
|
|
|
|
return [talasMarkers, setTalasMarkers, createAndSetDevices];
|
|
};
|
|
|
|
export default useTalasMarkers;
|