Tooltip für GMA mit Tailwind style

components/MapComponent.js

@@ -655,7 +655,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [map, locations, onLocationUpdate]); // Dieser Effekt läuft, wenn `map`, `locations` oder `onLocationUpdate` sich ändern
 
-
   function parsePoint(position) {
     const [longitude, latitude] = position.slice(6, -1).split(" ");
     return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
@@ -953,10 +952,70 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //--------------------------------------------------------------------------------
   useEffect(() => {
     if (map && gmaMarkers.length) {
+      // Filtern des Arrays um nur "GMA" Messungen zu erhalten
+      const gmaMeasurements = GisStationsMeasurements.filter(
+        (m) => m.Gr === "GMA"
+      );
+      let area_name = "";
+      let measurements = {};
+
+      gmaMeasurements.forEach((m) => {
+        console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`);
+        area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array
+        measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt
+      });
+
+      // Zugriff auf die Werte über die Codes
+      let measurementLT = measurements["LT"];
+      let measurementFTP = measurements["FTP"];
+      let measurementGT = measurements["GT"];
+      let measurementRLF = measurements["RLF"];
+
+      console.log(
+        "area_name",
+        area_name,
+        "------measurementLT",
+        measurements.LT,
+        "-------measurementFBT",
+        measurements.FBT,
+        "------measurementGT",
+        measurements.GT,
+        "------measurementRLF",
+        measurements.RLF
+      );
+      console.log("measurements", measurements);
       gmaMarkers.forEach((marker) => {
         marker.addTo(map);
         oms.addMarker(marker);
 
+        // Tooltip beim Überfahren mit der Maus anzeigen
+        marker.bindTooltip(
+          `
+            <div class="p-2  rounded-xl bg-opacity-70">
+              <div class="font-bold text-sm text-gray-700">
+                <span>${area_name}</span> 
+              </div>
+              <div class="font-bold text-sm text-gray-700 mt-1">
+                <span>LT : ${measurements.LT} °C</span> 
+              </div>
+              <div class="font-bold text-sm text-gray-700 mt-1">
+                <span>FBT : ${measurements.FBT} °C</span> 
+              </div>
+              <div class="font-bold text-sm text-gray-700 mt-1">
+                <span>GT : ${measurements.GT === 'nicht ermittelbar' ? measurements.GT : `${measurements.GT} °C`}</span> 
+              </div>
+              <div class="font-bold text-sm text-gray-700 mt-1">
+                <span>RLF : ${measurements.RLF} %</span> 
+              </div>
+            </div>
+          `,
+          {
+            permanent: true, // true würde den Tooltip immer anzeigen
+            direction: "auto", // oder 'top', 'bottom', 'left', 'right'
+          }
+        );
+        
+
         // Popup beim Überfahren mit der Maus öffnen und schließen
         marker.on("mouseover", function () {
           this.openPopup();
@@ -967,9 +1026,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(GMA);
     }
-  }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken
 
   console.log("gmaMarkers", gmaMarkers);
+
   //-------------------------------------------
   //--------------------------------------------------------------------------------
   useEffect(() => {