From aef5ec216b54e537aef10954e3eb3d5781773ae9 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 19 Dec 2024 14:24:44 +0100
Subject: [PATCH] =?UTF-8?q?Flexibilit=C3=A4t:=20Der=20Wert=20f=C3=BCr=20m?=
 =?UTF-8?q?=20ist=20jetzt=20dynamisch=20und=20h=C3=A4ngt=20von=20der=20akt?=
 =?UTF-8?q?uellen=20URL=20ab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js              | 12 +++++++++++-
 hooks/layers/useBereicheMarkersLayer.js | 17 +++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

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(`
-            <strong>ID Location:</strong> ${item.idLocation} <br />
-            <strong>ID Map:</strong> ${item.idMaps}
-          `);
+          const marker = L.marker([item.x, item.y], { icon: customIcon });
+
+          // Tooltip statt Popup
+          marker.bindTooltip(
+            `<strong>ID Location:</strong> ${item.idLocation} <br />
+             <strong>ID Map:</strong> ${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;
         });