From 7e469d6a0a12f27b480f604cc781a599f90be6e9 Mon Sep 17 00:00:00 2001
From: User <user@rpios.local>
Date: Sun, 1 Feb 2026 11:54:53 +0100
Subject: [PATCH] fix: consolidate scanner display with capabilities

Show each scanner as a single marker with WiFi/Bluetooth capabilities
listed in the popup, instead of separate entries per capability.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/rf_mapper/web/static/js/app.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/rf_mapper/web/static/js/app.js b/src/rf_mapper/web/static/js/app.js
index f2c03c4..9f4c3bf 100644
--- a/src/rf_mapper/web/static/js/app.js
+++ b/src/rf_mapper/web/static/js/app.js
@@ -953,7 +953,7 @@ function updateMapMarkers() {
             iconSize: [24, 24],
             iconAnchor: [12, 12]
         })
-    }).addTo(map).bindPopup(`📍 ${localScannerName}`);
+    }).addTo(map).bindPopup(`<strong>📍 ${escapeHtml(localScannerName)}</strong><br><span style="color:#4dabf7;">WiFi</span> · <span style="color:#9b59b6;">Bluetooth</span>`);
     markers.push(centerMarker);
 
     // Add peer scanner markers (async, won't block)
@@ -962,6 +962,7 @@ function updateMapMarkers() {
         .then(data => {
             (data.peers || []).forEach(peer => {
                 if (peer.latitude && peer.longitude) {
+                    const peerName = peer.name || peer.scanner_id;
                     const peerIcon = `
                         <div style="position:relative;width:20px;height:20px;">
                             <svg viewBox="0 0 24 24" style="width:20px;height:20px;filter:drop-shadow(0 0 3px rgba(0,200,255,0.8));">
@@ -975,7 +976,7 @@ function updateMapMarkers() {
                             iconSize: [20, 20],
                             iconAnchor: [10, 10]
                         })
-                    }).addTo(map).bindPopup(`📡 ${peer.name || peer.scanner_id}<br>Floor: ${peer.floor ?? '?'}`);
+                    }).addTo(map).bindPopup(`<strong>📡 ${escapeHtml(peerName)}</strong><br><span style="color:#4dabf7;">WiFi</span> · <span style="color:#9b59b6;">Bluetooth</span><br>Floor: ${peer.floor ?? '?'}`);
                     markers.push(peerMarker);
                 }
             });
@@ -1859,10 +1860,10 @@ function update3DMarkers() {
         .setLngLat([lon, lat])
         .setPopup(new maplibregl.Popup().setHTML(`
             <strong>📍 ${escapeHtml(scannerName)}</strong><br>
+            <span style="color:#4dabf7;">WiFi</span> · <span style="color:#9b59b6;">Bluetooth</span><br>
             Floor: ${scannerFloor}<br>
-            Lat: ${lat.toFixed(6)}<br>
-            Lon: ${lon.toFixed(6)}<br>
-            <div style="font-size:0.7rem;color:#888;margin-top:4px;">Drag marker to reposition</div>
+            <span style="font-size:0.8rem;color:#888;">${lat.toFixed(6)}, ${lon.toFixed(6)}</span>
+            <div style="font-size:0.7rem;color:#666;margin-top:4px;">Drag to reposition</div>
         `))
         .addTo(map3d);
 
@@ -1879,11 +1880,12 @@ function update3DMarkers() {
                 if (peer.latitude && peer.longitude) {
                     const peerFloor = peer.floor ?? 0;
                     const peerOffset = (peerFloor - groundFloor) * pixelsPerFloor;
+                    const peerName = peer.name || peer.scanner_id;
 
                     const peerEl = document.createElement('div');
                     peerEl.className = 'marker-3d peer-scanner';
                     peerEl.innerHTML = `<div class="marker-icon">📡</div><div class="marker-floor">F${peerFloor}</div>`;
-                    peerEl.title = `${peer.name || peer.scanner_id} - Floor ${peerFloor}`;
+                    peerEl.title = `${peerName} - Floor ${peerFloor}`;
 
                     const peerMarker = new maplibregl.Marker({
                         element: peerEl,
@@ -1891,11 +1893,10 @@ function update3DMarkers() {
                     })
                         .setLngLat([peer.longitude, peer.latitude])
                         .setPopup(new maplibregl.Popup().setHTML(`
-                            <strong>📡 ${peer.name || peer.scanner_id}</strong><br>
+                            <strong>📡 ${escapeHtml(peerName)}</strong><br>
+                            <span style="color:#4dabf7;">WiFi</span> · <span style="color:#9b59b6;">Bluetooth</span><br>
                             Floor: ${peerFloor}<br>
-                            Lat: ${peer.latitude.toFixed(6)}<br>
-                            Lon: ${peer.longitude.toFixed(6)}<br>
-                            <div style="font-size:0.7rem;color:#888;margin-top:4px;">Peer scanner (read-only)</div>
+                            <span style="font-size:0.8rem;color:#888;">${peer.latitude.toFixed(6)}, ${peer.longitude.toFixed(6)}</span>
                         `))
                         .addTo(map3d);