From cc8118b85ae821615e5decad0c6eeccf0a5ddfe1 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Wed, 18 Mar 2026 22:53:02 +0000
Subject: [PATCH] =?UTF-8?q?Fix=20route=20overlay=20disappearing=20on=20zoo?=
 =?UTF-8?q?m/pan=20=E2=80=94=20use=20separate=20routeLayer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Route markers and polyline were on markerLayer, which gets cleared
by renderMarkers() on any filter/zoom change. Now uses dedicated
routeLayer that persists independently.
---
 public/map.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/public/map.js b/public/map.js
index edb11295..91b6b0a9 100644
--- a/public/map.js
+++ b/public/map.js
@@ -3,6 +3,7 @@
 
 (function () {
   let map = null;
+  let routeLayer = null;
   let markerLayer = null;
   let clusterGroup = null;
   let nodes = [];
@@ -68,6 +69,7 @@
     }).addTo(map);
 
     markerLayer = L.layerGroup().addTo(map);
+    routeLayer = L.layerGroup().addTo(map);
 
     // Fix map size on SPA load
     setTimeout(() => map.invalidateSize(), 100);
@@ -121,7 +123,7 @@
       // Draw route polyline
       L.polyline(coords, {
         color: '#f59e0b', weight: 3, opacity: 0.8, dashArray: '8 4'
-      }).addTo(markerLayer);
+      }).addTo(routeLayer);
     }
 
     // Add numbered markers at each hop
@@ -129,7 +131,7 @@
       L.circleMarker([p.lat, p.lon], {
         radius: 10, fillColor: i === 0 ? '#22c55e' : i === positions.length - 1 ? '#ef4444' : '#f59e0b',
         fillOpacity: 0.9, color: '#fff', weight: 2
-      }).addTo(markerLayer).bindTooltip(`${i + 1}. ${p.name}`, { permanent: true, direction: 'top', className: 'route-tooltip' });
+      }).addTo(routeLayer).bindTooltip(`${i + 1}. ${p.name}`, { permanent: true, direction: 'top', className: 'route-tooltip' });
     });
 
     // Fit map to route
@@ -272,6 +274,7 @@
       map = null;
     }
     markerLayer = null;
+    routeLayer = null;
     if (heatLayer) { heatLayer = null; }
   }