Card in z-index=50 (Dropdown menu) und map z-index=0 mit Tailwind

components/MapComponent.js

@@ -10,6 +10,7 @@ import "leaflet.smooth_marker_bouncing";
 //import { OverlappingMarkerSpiderfier } from "../lib/OverlappingMarkerSpiderfier.js";
 //import { OverlappingMarkerSpiderfier } from "../public/js/OverlappingMarkerSpiderfier.js";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
+import DataSheet from "../components/DataSheet";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
@@ -635,17 +636,77 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         ${station.Location_Short} (${station.Location_Name})<br>
         ${statusInfo}<br>
       `);
+      let LocID = station.IdLocation;
+      marker
+        .bindTooltip(
+          `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${LocID}</div>`,
+          {
+            permanent: true,
+            direction: "right",
+            opacity: 0,
+            offset: L.point({ x: 10, y: 0 }),
+          }
+        )
+        .addTo(GMA);
     });
   }, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
 
+  //------------------------------------------
+  let uniqueIdLDsData = [];
+  let Tooltip = [];
+
+  for (let index = 0; index < uniqueIdLDsData.length; index++) {
+    let element = uniqueIdLDsData[index].split(",");
+    let lat = element[0];
+    let lng = element[1];
+    let ID = element[2];
+    let IdLD = element[3];
+    let LocID = element[4];
+
+    Tooltip[LocID] = L.marker([lat, lng], { icon: invisibleMarker })
+      .bindTooltip(
+        '<div id="tip-' +
+          LocID +
+          '">' +
+          '<div id="areaname' +
+          LocID +
+          '" style="font-weight:700;font-size:0.9rem">---</div>' +
+          '<div id="value1-' +
+          LocID +
+          '" style="font-weight:700;color:blue">---</div>' +
+          '<div id="value2-' +
+          LocID +
+          '" style="font-weight:700;color:red">---</div>' +
+          '<div id="value3-' +
+          LocID +
+          '" style="font-weight:700;color:#ECC5C0">---</div>' +
+          '<div id="value4-' +
+          LocID +
+          '" style="font-weight:700;color:green">---</div>' +
+          "</div>",
+        {
+          permanent: true,
+          direction: "right",
+          opacity: 0,
+          offset: L.point({ x: 10, y: 0 }),
+        }
+      )
+      .openTooltip()
+      .addTo(GMA);
+  }
+
   //------------------------------------------
 
   return (
-    <div
-      id="map"
-      ref={mapRef}
-      style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
-    ></div>
+    <>
+      <DataSheet className="z-50" />
+      <div
+        id="map"
+        ref={mapRef}
+        className="z-0"
+        style={{ height: "100vh", width: "100vw" }}
+      ></div>
+    </>
   );
 };