From 04bbd0b0af40efb25099e2ee9cfbb0df714cdf61 Mon Sep 17 00:00:00 2001
From: User <user@rpios.local>
Date: Sun, 1 Feb 2026 04:28:08 +0100
Subject: [PATCH] feat: show peer scanners on 3D map

- Added peer scanner markers to MapLibre 3D view
- Peer scanners shown with cyan icon and absolute position
- Styled with distinct color and shadow

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/rf_mapper/web/static/css/style.css | 13 ++++++++++
 src/rf_mapper/web/static/js/app.js     | 35 ++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/src/rf_mapper/web/static/css/style.css b/src/rf_mapper/web/static/css/style.css
index 2f80252..5acbdff 100644
--- a/src/rf_mapper/web/static/css/style.css
+++ b/src/rf_mapper/web/static/css/style.css
@@ -961,6 +961,19 @@ body {
     z-index: 100;
 }
 
+.marker-3d.peer-scanner .marker-icon {
+    background: #00c8ff;
+    box-shadow: 0 0 15px rgba(0, 200, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
+    border: 2px solid #ffffff;
+    width: 22px;
+    height: 22px;
+    z-index: 90;
+}
+
+.marker-3d.peer-scanner .marker-floor {
+    background: rgba(0, 200, 255, 0.9);
+}
+
 /* Floor Controls */
 .floor-section {
     display: block;
diff --git a/src/rf_mapper/web/static/js/app.js b/src/rf_mapper/web/static/js/app.js
index 0a17b2d..7264220 100644
--- a/src/rf_mapper/web/static/js/app.js
+++ b/src/rf_mapper/web/static/js/app.js
@@ -1445,6 +1445,41 @@ function update3DMarkers() {
     scannerMarker._deviceId = '__scanner__';
     map3dMarkers.push(scannerMarker);
 
+    // Add peer scanner markers (absolute positions)
+    fetch('/api/peers')
+        .then(r => r.json())
+        .then(data => {
+            (data.peers || []).forEach(peer => {
+                if (peer.latitude && peer.longitude) {
+                    const peerFloor = peer.floor ?? 0;
+                    const peerOffset = (peerFloor - groundFloor) * pixelsPerFloor;
+
+                    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}`;
+
+                    const peerMarker = new maplibregl.Marker({
+                        element: peerEl,
+                        offset: [0, -peerOffset]
+                    })
+                        .setLngLat([peer.longitude, peer.latitude])
+                        .setPopup(new maplibregl.Popup().setHTML(`
+                            <strong>📡 ${peer.name || peer.scanner_id}</strong><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>
+                        `))
+                        .addTo(map3d);
+
+                    peerMarker._deviceId = `__peer_${peer.scanner_id}__`;
+                    map3dMarkers.push(peerMarker);
+                }
+            });
+        })
+        .catch(err => console.log('[Peers] Error loading peers:', err));
+
     if (!scanData) return;
 
     const wifi = filters.wifi ? (scanData.wifi_networks || []) : [];