Ensure routers render above other node types (#169)

web/views/index.erb

@@ -557,6 +557,18 @@
       ROUTER: '#E88B94'
     });
 
+    const roleRenderOrder = Object.freeze({
+      CLIENT: 1,
+      CLIENT_HIDDEN: 2,
+      CLIENT_MUTE: 3,
+      TRACKER: 4,
+      SENSOR: 5,
+      LOST_AND_FOUND: 6,
+      REPEATER: 7,
+      ROUTER_LATE: 8,
+      ROUTER: 9
+    });
+
     const activeRoleFilters = new Set();
     const legendRoleButtons = new Map();
 
@@ -579,6 +591,12 @@
       return roleColors[key] || roleColors.CLIENT || '#3388ff';
     }
 
+    function getRoleRenderPriority(role) {
+      const key = getRoleKey(role);
+      const priority = roleRenderOrder[key];
+      return typeof priority === 'number' ? priority : 0;
+    }
+
     // --- Map setup ---
     const map = L.map('map', { worldCopyJump: true });
     const TILE_LAYER_URL = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
@@ -1224,7 +1242,17 @@
     function renderMap(nodes, nowSec) {
       markersLayer.clearLayers();
       const pts = [];
-      for (const n of nodes) {
+      const nodesByRenderOrder = nodes
+        .map((node, index) => ({ node, index }))
+        .sort((a, b) => {
+          const orderA = getRoleRenderPriority(a.node && a.node.role);
+          const orderB = getRoleRenderPriority(b.node && b.node.role);
+          if (orderA !== orderB) return orderA - orderB;
+          return a.index - b.index;
+        })
+        .map(entry => entry.node);
+
+      for (const n of nodesByRenderOrder) {
         const latRaw = n.latitude, lonRaw = n.longitude;
         if (latRaw == null || latRaw === '' || lonRaw == null || lonRaw === '') continue;
         const lat = Number(latRaw), lon = Number(lonRaw);