map-badge-v2.html

@@ -14,51 +14,7 @@
     .custom-marker-wrapper {
       position: relative;
       width: 48px;
-      height: 62px; /* Increased to accommodate pointer shape */
+      height: 48px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .custom-marker-position-circle {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-      z-index: 1;
-    }
-
-    .custom-marker-profile-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 48px;
-      height: 54px;
-      z-index: 2;
-    }
-
-    .custom-marker-image-container {
-      width: 48px;
-      height: 54px;
-      position: relative;
-    }
-
-    .custom-marker-image-container::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-top: 8px solid var(--border-color, #757575);
-      z-index: 1;
     }
 
     .custom-marker-image {
@@ -80,7 +36,6 @@
       font-size: 12px;
       color: white;
       box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-      z-index: 3;
     }
 
     #refresh-button {
@@ -300,19 +255,14 @@ function createMarkerHTML(personState, activityState, pictureUrl) {
 
   return `
     <div class="custom-marker-wrapper">
-      <div class="custom-marker-profile-wrapper">
+      <img
-        <div class="custom-marker-image-container" style="--border-color: ${zoneConfig.color};">
+        src="${pictureUrl}"
-          <img
+        class="custom-marker-image"
-            src="${pictureUrl}"
+        style="border: 3px solid ${zoneConfig.color}"
-            class="custom-marker-image"
+        onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22><circle cx=%2224%22 cy=%2224%22 r=%2220%22 fill=%22%23cccccc%22/></svg>'">
-            style="border: 3px solid ${zoneConfig.color}"
+      <div class="custom-marker-badge" style="background: ${activityConfig.color}; color: white;">
-            onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22><circle cx=%2224%22 cy=%2224%22 r=%2220%22 fill=%22%23cccccc%22/></svg>'">
+        <i class="mdi ${activityConfig.icon}"></i>
-        </div>
-        <div class="custom-marker-badge" style="background: ${activityConfig.color}; color: white;">
-          <i class="mdi ${activityConfig.icon}"></i>
-        </div>
       </div>
-      <div class="custom-marker-position-circle" style="background: #76D4C3; border: 2px solid ${zoneConfig.color};"></div>
     </div>
   `;
 }
@@ -359,9 +309,9 @@ function updateMarkerOSM(entityId, data, lat, lon, personState, activityState, p
     markers[entityId].setIcon(L.divIcon({
       className: 'custom-leaflet-marker',
       html: iconHtml,
-      iconSize: [48, 62],
+      iconSize: [48, 48],
-      iconAnchor: [24, 62],
+      iconAnchor: [24, 48],
-      popupAnchor: [0, -62]
+      popupAnchor: [0, -48]
     }));
   } else {
     // Create new marker
@@ -369,9 +319,9 @@ function updateMarkerOSM(entityId, data, lat, lon, personState, activityState, p
     const icon = L.divIcon({
       className: 'custom-leaflet-marker',
       html: iconHtml,
-      iconSize: [48, 62],
+      iconSize: [48, 48],
-      iconAnchor: [24, 62],
+      iconAnchor: [24, 48],
-      popupAnchor: [0, -62]
+      popupAnchor: [0, -48]
     });
 
     const marker = L.marker([lat, lon], { icon: icon }).addTo(map);
@@ -436,7 +386,7 @@ function updateMarkerGoogle(entityId, data, lat, lon, personState, activityState
 
         const div = this.div;
         div.style.left = (pos.x - 24) + 'px'; // Center horizontally (48px / 2)
-        div.style.top = (pos.y - 62) + 'px'; // Position above point (62px total height)
+        div.style.top = (pos.y - 48) + 'px'; // Position above point
       }
 
       onRemove() {