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>
This commit is contained in:
User
2026-02-01 04:28:08 +01:00
parent 8e25bf8871
commit 04bbd0b0af
2 changed files with 48 additions and 0 deletions

View File

@@ -961,6 +961,19 @@ body {
z-index: 100; 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 Controls */
.floor-section { .floor-section {
display: block; display: block;

View File

@@ -1445,6 +1445,41 @@ function update3DMarkers() {
scannerMarker._deviceId = '__scanner__'; scannerMarker._deviceId = '__scanner__';
map3dMarkers.push(scannerMarker); 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; if (!scanData) return;
const wifi = filters.wifi ? (scanData.wifi_networks || []) : []; const wifi = filters.wifi ? (scanData.wifi_networks || []) : [];