From 558687051e9ed23d140e5565577404fdff430b76 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sat, 21 Mar 2026 03:33:17 +0000
Subject: [PATCH] feat: label deconfliction on route view markers

---
 public/index.html |  2 +-
 public/map.js     | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3d7b8492..5023ac7f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,7 +83,7 @@
   <script src="app.js?v=1774052279"></script>
   <script src="home.js?v=1774042199"></script>
   <script src="packets.js?v=1774059825"></script>
-  <script src="map.js?v=1774059825" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="map.js?v=1774259525" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774050030" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774083660" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="traces.js?v=1774048777" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/map.js b/public/map.js
index a0bb8fa0..730b77db 100644
--- a/public/map.js
+++ b/public/map.js
@@ -297,6 +297,7 @@
     }
 
     // Add numbered markers at each hop
+    var labelItems = [];
     positions.forEach((p, i) => {
       const isOrigin = i === 0 && p.isOrigin;
       const isLast = i === positions.length - 1 && positions.length > 1;
@@ -305,7 +306,6 @@
       const label = isOrigin ? 'Sender' : isLast ? 'Last Hop' : `Hop ${isOrigin ? i : i}`;
 
       if (isOrigin) {
-        // Double-ring origin marker
         L.circleMarker([p.lat, p.lon], {
           radius: radius + 4, fillColor: 'transparent', fillOpacity: 0, color: '#06b6d4', weight: 2, opacity: 0.6
         }).addTo(routeLayer);
@@ -316,8 +316,6 @@
         fillOpacity: 0.9, color: '#fff', weight: 2
       }).addTo(routeLayer);
 
-      marker.bindTooltip(`${i + 1}. ${p.name}`, { permanent: true, direction: 'top', className: 'route-tooltip' });
-
       const popupHtml = `<div style="font-size:12px;min-width:160px">
         <div style="font-weight:700;margin-bottom:4px">${label}: ${safeEsc(p.name)}</div>
         <div style="color:#9ca3af;font-size:11px;margin-bottom:4px">${p.role || 'unknown'}</div>
@@ -326,6 +324,19 @@
         ${p.pubkey ? `<div style="margin-top:6px"><a href="#/nodes/${p.pubkey}" style="color:var(--accent);font-size:11px">View Node →</a></div>` : ''}
       </div>`;
       marker.bindPopup(popupHtml, { className: 'route-popup' });
+
+      labelItems.push({ latLng: L.latLng(p.lat, p.lon), isLabel: true, text: `${i + 1}. ${p.name}` });
+    });
+
+    // Deconflict labels so overlapping hop names spread out
+    deconflictLabels(labelItems, map);
+    labelItems.forEach(function (m) {
+      var pos = m.adjustedLatLng || m.latLng;
+      var icon = L.divIcon({ className: 'route-tooltip', html: m.text, iconSize: [null, null], iconAnchor: [0, 0] });
+      L.marker(pos, { icon: icon, interactive: false }).addTo(routeLayer);
+      if (m.offset > 2) {
+        L.polyline([m.latLng, pos], { weight: 1, color: '#475569', opacity: 0.5, dashArray: '3 3' }).addTo(routeLayer);
+      }
     });
 
     // Fit map to route