From 50163536e343d3d85a12bd184786e5d30448e733 Mon Sep 17 00:00:00 2001
From: kianiadee <kianiadee@gmail.com>
Date: Fri, 5 Jun 2026 22:45:41 +0300
Subject: [PATCH] fix(markers): stop wiping MapLibre's marker class (markers
 stacked in flow)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-setting el.className each render dropped the maplibregl-marker class
(position:absolute), so live markers fell into document flow and stacked
+32px each — vehicles drifted south, worse when zoomed out, dragging their
plate labels with them. Use classList (preserve maplibregl-marker) and wrap
pin+plate in a .veh-inner positioning context so a class change can't reflow.

Verified: every marker now projects to dX=0,dY=0 on its coordinate.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 index.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 941353f..36c251d 100644
--- a/index.html
+++ b/index.html
@@ -176,7 +176,12 @@
   }
 
   /* ── Live vehicle DOM marker (locked look) ─────────────────────────── */
-  .veh-marker { position: relative; cursor: pointer; will-change: transform; }
+  /* NOTE: never set position on .veh-marker — MapLibre's own .maplibregl-marker
+     class supplies position:absolute and drives placement. The plate's
+     positioning context is the inner wrapper below, so a class change can't
+     reflow the markers. */
+  .veh-marker { cursor: pointer; will-change: transform; }
+  .veh-inner { position: relative; width: 32px; height: 32px; }
   .veh-pin {
     width: 32px; height: 32px; border-radius: 50%;
     background: var(--c, var(--parked));
@@ -507,7 +512,7 @@ function upsertLiveMarker(p, coords, feature) {
   if (!m) {
     const el = document.createElement('div');
     el.className = 'veh-marker';
-    el.innerHTML = `<div class="veh-pin"><span class="glyph"></span></div><div class="veh-plate"></div>`;
+    el.innerHTML = `<div class="veh-inner"><div class="veh-pin"><span class="glyph"></span></div><div class="veh-plate"></div></div>`;
     el.addEventListener('mouseenter', () => { cancelPopupClose(); openPopupImei = p.imei; const f = currentLiveFeature(p.imei); if (f) showLivePopup(f); });
     el.addEventListener('mouseleave', () => { if (!popupStuck) schedulePopupClose(); });
     el.addEventListener('click', e => {
@@ -520,9 +525,13 @@ function upsertLiveMarker(p, coords, feature) {
   } else {
     m.setLngLat(coords);
   }
-  // Style the (possibly reused) element to current state
+  // Style the (possibly reused) element to current state. Use classList so we
+  // never wipe MapLibre's own `maplibregl-marker` class (doing so dropped
+  // position:absolute and made markers stack in document flow — FIX).
   const el = m.getElement();
-  el.className = 'veh-marker ' + state;
+  el.classList.add('veh-marker');
+  el.classList.remove('active', 'parked', 'offline');
+  el.classList.add(state);
   const pin = el.querySelector('.veh-pin');
   pin.style.setProperty('--c', color);
   const glyph = el.querySelector('.glyph');