55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
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;
|