diff --git a/components/MapComponent.js b/components/MapComponent.js index 954ba0561..8687e9262 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -780,7 +780,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //--------------------------------------- // Initialisiere Leaflet-Karte // Rufe useBereicheMarkersLayer direkt auf - const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12"); + const [bereichUrl, setBereichUrl] = useState(null); + + useEffect(() => { + const urlParams = new URLSearchParams(window.location.search); // URL-Parameter parsen + const mValue = urlParams.get("m"); // Wert von "m" holen + setBereichUrl(`/api/talas_v5_DB/bereich/readBereich?m=${mValue || 12}`); // Fallback auf 12, falls "m" nicht definiert ist + }, []); + + // Bereichs-Marker basierend auf dynamischer URL laden + const bereicheMarkers = useBereicheMarkersLayer(map, oms, bereichUrl); + //const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12"); /* useEffect(() => { if (map && oms) { diff --git a/hooks/layers/useBereicheMarkersLayer.js b/hooks/layers/useBereicheMarkersLayer.js index f06195605..571a13d34 100644 --- a/hooks/layers/useBereicheMarkersLayer.js +++ b/hooks/layers/useBereicheMarkersLayer.js @@ -50,10 +50,19 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => { const data = await response.json(); const markers = data.map((item) => { - const marker = L.marker([item.x, item.y], { icon: customIcon }).bindPopup(` - ID Location: ${item.idLocation}
- ID Map: ${item.idMaps} - `); + const marker = L.marker([item.x, item.y], { icon: customIcon }); + + // Tooltip statt Popup + marker.bindTooltip( + `ID Location: ${item.idLocation}
+ ID Map: ${item.idMaps}`, + { + permanent: false, // Tooltip wird nur bei Mouseover angezeigt + direction: "top", // Position des Tooltips relativ zum Marker + offset: [0, -20], // Verschiebung für bessere Sichtbarkeit + } + ); + return marker; });