67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
// Definiere ein Standard-Icon
|
|
const customIcon = new L.Icon({
|
|
iconUrl: "/img/marker-icon.png", // Beispielpfad: Passe dies auf dein Symbol an
|
|
iconSize: [25, 41], // Größe des Icons
|
|
iconAnchor: [12, 41], // Position des Icons
|
|
popupAnchor: [1, -34],
|
|
shadowUrl: "/img/marker-shadow.png", // Optionaler Schatten
|
|
shadowSize: [41, 41],
|
|
});
|
|
|
|
const useBereicheMarkersLayer = (map, oms, apiUrl) => {
|
|
const [bereicheMarkers, setBereicheMarkers] = useState([]);
|
|
|
|
useEffect(() => {
|
|
// Hole die Daten aus der API
|
|
const fetchBereiche = async () => {
|
|
try {
|
|
const response = await fetch(apiUrl);
|
|
const data = await response.json();
|
|
|
|
const markers = data.map((item) => {
|
|
// Erstelle Marker für jedes Datenbank-Item
|
|
const marker = L.marker([item.x, item.y], { icon: customIcon }).bindPopup(`
|
|
<strong>ID Location:</strong> ${item.idLocation} <br />
|
|
<strong>ID Map:</strong> ${item.idMaps}
|
|
`);
|
|
|
|
return marker;
|
|
});
|
|
|
|
setBereicheMarkers(markers);
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Bereiche:", error);
|
|
}
|
|
};
|
|
|
|
fetchBereiche();
|
|
}, [apiUrl]);
|
|
|
|
useEffect(() => {
|
|
if (map && bereicheMarkers.length) {
|
|
// Füge alle Marker zur Karte hinzu
|
|
bereicheMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
|
|
});
|
|
}
|
|
}, [map, bereicheMarkers, oms]);
|
|
useEffect(() => {
|
|
if (!map) return; // Sicherheitsprüfung
|
|
if (bereicheMarkers.length > 0) {
|
|
bereicheMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
if (oms) oms.addMarker(marker);
|
|
});
|
|
}
|
|
}, [map, bereicheMarkers, oms]);
|
|
|
|
return bereicheMarkers;
|
|
};
|
|
|
|
export default useBereicheMarkersLayer;
|