Fix: Markers priority and bounce

components/MapComponent.js

@@ -344,6 +344,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
             : `img/icons/marker-icon-${station.Icon}.png`;
 
+          const priority = determinePriority(iconPath);
+          const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
+
+          /* console.log(
+              `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
+            ); */
+
           const marker = L.marker([station.X, station.Y], {
             icon: L.icon({
               iconUrl: iconPath,
@@ -351,17 +358,37 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
               iconAnchor: [12, 41],
               popupAnchor: [1, -34],
             }),
-            areaName: station.Area_Name,
+            areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
             link: station.Link,
+            zIndexOffset: zIndexOffset,
             bounceOnAdd: !!statis,
           });
 
+          if (statis) {
+            marker.on("add", () => marker.bounce(3));
+          }
+
+          const statusInfo = statusResponse.Statis.filter(
+            (status) => status.IdLD === station.IdLD
+          )
+            .reverse()
+            .map(
+              (status) => `
+                <div class="flex items-center my-1">
+                  <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
+                  ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
+                </div>
+              `
+            )
+            .join("");
+
           marker.bindPopup(`
-              <div class="bg-white rounded-lg">
+              <div class=" bg-white rounded-lg ">
                 <h3 class="text-lg font-semibold text-gray-900">${station.LD_Name}</h3>
                 <p class="text-gray-800"><strong>Gerät:</strong> ${station.Device}</p>
                 <p class="text-gray-800"><strong>Zone:</strong> ${station.Area_Short} (${station.Area_Name})</p>
                 <p class="text-gray-800"><strong>Standort:</strong> ${station.Location_Short} (${station.Location_Name})</p>
+                <div class="mt-2">${statusInfo}</div>
               </div>
             `);
           return marker;