Tooltip für GMA mit Tailwind style

components/MapComponent.js

@@ -552,7 +552,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map]);
   //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt
   // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
-/*   useEffect(() => {
+  /*   useEffect(() => {
     // Remove old markers
     if (map) {
       // Entfernen der alten DBLayer und Erstellung einer neuen
@@ -614,7 +614,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       // Sicherstellen, dass die alte dbLayer entfernt wird
       map.removeLayer(poiLayerRef.current);
       poiLayerRef.current = new L.LayerGroup().addTo(map);
-  
+
       locations.forEach((location) => {
         const { latitude, longitude } = parsePoint(location.position);
         const marker = L.marker([latitude, longitude], {
@@ -627,20 +627,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           draggable: true,
           id: location.idPoi,
         });
-  
+
         // Popup binden, aber nicht automatisch öffnen
         marker.bindPopup(
           `<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
         );
-  
+
         // Event-Handler für Mouseover und Mouseout hinzufügen
-        marker.on("mouseover", function() {
+        marker.on("mouseover", function () {
           this.openPopup();
         });
-        marker.on("mouseout", function() {
+        marker.on("mouseout", function () {
           this.closePopup();
         });
-  
+
         marker.on("dragend", function (e) {
           const newLat = e.target.getLatLng().lat;
           const newLng = e.target.getLatLng().lng;
@@ -649,12 +649,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             onLocationUpdate(markerId, newLat, newLng);
           });
         });
-  
+
         marker.addTo(poiLayerRef.current);
       });
     }
   }, [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(" ");
@@ -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(() => {
@@ -1339,7 +1399,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, dauzMarkers, mapLayersVisibility.DAUZ]);
 
   //------------------------------------------ */
-    //------------------------------------------ */
+  //------------------------------------------ */
   // Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem
 
   useEffect(() => {
@@ -1356,7 +1416,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);
 
   //------------------------------------------ */
-      //------------------------------------------ */
+  //------------------------------------------ */
   // Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen
 
   useEffect(() => {