From aec3ecae9a75dc13a33270604199704926c4c071 Mon Sep 17 00:00:00 2001
From: Sirius DevOps <lance@siriusdevops.com>
Date: Mon, 24 Aug 2026 18:02:56 -0400
Subject: [PATCH] Map: FIRMS heatmap + camera thumbnail popups + unified layer
 panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Vendored leaflet.heat 0.2.0; fires overlay is now a real heatmap
  (L.heatLayer) with intensity driven by brightness or VIIRS confidence
  (color mode selector) and a since= time filter (6h/24h/48h/7d/30d/all).
- Camera markers now open popups with the live snapshot thumbnail proxied
  through GET /api/cameras/{id}/snapshot (backend TTL cache) + full
  metadata (vendor, device, discovery source, first/last seen, coords,
  source link); missing-snapshot cams show a placeholder instead of 404.
- New collapsible Layers panel (dark neon) over the map: per-layer
  visibility toggles, opacity sliders (basemap/fires/cameras), live
  counts legend, and a fire heat-intensity ramp that swaps for the
  confidence legend in confidence mode.
- Clamp currentBBox() to world bounds so /api/cameras doesn't 422 at low
  zoom (worldCopyJump spans multiple copies).
- Skip overlay reloads on moveend while a popup is open — popup autopan
  no longer rebuilds the marker group and closes the popup.
- Zoom control moved to top-right so it doesn't collide with the panel.
---
 app/static/index.html                     | 301 ++++++++++++++++++----
 app/static/vendor/leaflet/leaflet.heat.js |  11 +
 2 files changed, 266 insertions(+), 46 deletions(-)
 create mode 100644 app/static/vendor/leaflet/leaflet.heat.js

diff --git a/app/static/index.html b/app/static/index.html
index bffb987..88589d5 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -85,6 +85,59 @@
         .leaflet-popup-content { font-size: 0.82rem; }
         .leaflet-popup-close-button { color: var(--muted) !important; }
         .leaflet-overlay-pane svg { filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
+        /* ── Map layer control panel (dark neon) ─────────────────── */
+        #map-wrap { position: relative; }
+        #map { z-index: 0; }
+        #layer-panel {
+            position: absolute; top: 12px; left: 12px; z-index: 600;
+            width: 244px; max-height: calc(100% - 24px); overflow: hidden;
+            background: rgba(15,23,42,0.88); backdrop-filter: blur(6px);
+            border: 1px solid var(--border); border-radius: 10px;
+            box-shadow: 0 0 18px rgba(56,189,248,0.18), 0 0 2px rgba(56,189,248,0.5);
+            color: var(--text); font-size: 0.78rem; display: flex; flex-direction: column;
+        }
+        .lp-head {
+            display: flex; justify-content: space-between; align-items: center;
+            padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border);
+            font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
+            text-transform: uppercase; color: var(--accent);
+            text-shadow: 0 0 10px rgba(56,189,248,0.55); cursor: pointer; user-select: none;
+        }
+        .lp-head .lp-caret { color: var(--muted); font-size: 0.8rem; transition: transform .18s; }
+        #layer-panel.collapsed .lp-caret { transform: rotate(-90deg); }
+        .lp-body { padding: 0.55rem 0.7rem 0.65rem; display: flex; flex-direction: column; gap: 0.55rem; overflow-y: auto; }
+        #layer-panel.collapsed .lp-body { display: none; }
+        .lp-layer { display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border); }
+        .lp-layer:last-child { border-bottom: none; padding-bottom: 0; }
+        .lp-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
+        .lp-name { display: flex; align-items: center; gap: 0.42rem; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; }
+        .lp-name input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
+        .lp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+        .lp-dot.base { background: #38bdf8; box-shadow: 0 0 7px #38bdf8; }
+        .lp-dot.fires { background: #fb923c; box-shadow: 0 0 7px #fb923c; }
+        .lp-dot.cams { background: #4ade80; box-shadow: 0 0 7px #4ade80; }
+        .lp-count { font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--accent); }
+        .lp-sub { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
+        .lp-opacity { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
+        .lp-opacity input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; cursor: pointer; }
+        .lp-opacity b { color: var(--text); font-family: ui-monospace, monospace; font-weight: 400; min-width: 2.4em; text-align: right; }
+        .lp-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.4rem; font-size: 0.72rem; font-family: ui-monospace, monospace; color-scheme: dark; }
+        .lp-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 8px rgba(56,189,248,0.35); }
+        .lp-legend { border-top: 1px solid var(--border); padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
+        .lp-legend h4 { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
+        .lp-ramp { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #3b82f6, #f59e0b, #ef4444, #fde047); box-shadow: 0 0 8px rgba(251,146,60,0.35) inset; }
+        .lp-ramp-scale { display: flex; justify-content: space-between; font-size: 0.6rem; color: var(--muted); }
+        .lp-heat-legend { display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; color: var(--muted); gap: 0.5rem; }
+        .lp-heat-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 0.3rem; box-shadow: 0 0 6px currentColor; }
+        .lp-error { color: var(--red); font-size: 0.68rem; }
+        /* ── Camera popup thumbnail ───────────────────────────────── */
+        .cam-pop { min-width: 210px; max-width: 260px; }
+        .cam-pop .thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); margin: 0.3rem 0; box-shadow: 0 0 10px rgba(56,189,248,0.25); background: #0b1220; }
+        .cam-pop .thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.7rem; height: 80px; }
+        .cam-pop table { width: 100%; font-size: 0.72rem; border-collapse: collapse; }
+        .cam-pop td { padding: 0.12rem 0.2rem; vertical-align: top; }
+        .cam-pop td.k { color: var(--muted); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.04em; white-space: nowrap; width: 34%; }
+        .cam-pop a { color: var(--accent); word-break: break-all; }
     </style>
 </head>
 <body>
@@ -198,10 +251,10 @@
             <div class="key-grid" id="keys-grid"></div>
         </div>
 
-        <!-- Map (NASA GIBS satellite basemap) -->
+        <!-- Map (NASA GIBS satellite basemap + FIRMS heatmap + open cameras) -->
         <div class="section" id="tab-map" style="display:none">
             <h2>Global Satellite Map</h2>
-            <p class="sub" style="margin-bottom:0.75rem">NASA GIBS satellite basemap (the same tiles worldview.earthdata.nasa.gov renders). Pick a layer and date, then zoom/pan — fires and open cameras can be overlaid.</p>
+            <p class="sub" style="margin-bottom:0.75rem">NASA GIBS satellite basemap (the same tiles worldview.earthdata.nasa.gov renders). Pick a layer and date, then zoom/pan — fires and open cameras can be overlaid. Use the <b>Layers</b> panel to toggle feeds, adjust opacity, and filter fires by time.</p>
             <div class="map-toolbar">
                 <label>Layer
                     <select id="map-layer" onchange="mapLayerChanged()"></select>
@@ -212,12 +265,62 @@
                 <button class="btn" id="map-latest-btn" onclick="mapGoLatest()" style="display:none">Latest</button>
                 <button class="btn" id="map-7d-btn" onclick="mapGoDays(7)" style="display:none">-7d</button>
                 <button class="btn" id="map-30d-btn" onclick="mapGoDays(30)" style="display:none">-30d</button>
-                <button class="btn" id="map-fires-toggle" onclick="mapToggleFires()">● Fires</button>
-                <button class="btn" id="map-cams-toggle" onclick="mapToggleCams()">◉ Cameras</button>
                 <button class="btn" id="map-reset" onclick="mapResetView()">Reset view</button>
                 <div class="map-hint" id="map-hint"></div>
             </div>
-            <div id="map"></div>
+            <div id="map-wrap">
+                <div id="map"></div>
+                <div id="layer-panel">
+                    <div class="lp-head" onclick="toggleLayerPanel()">◈ Layers <span class="lp-caret">▼</span></div>
+                    <div class="lp-body">
+                        <div class="lp-layer">
+                            <div class="lp-row">
+                                <label class="lp-name"><input type="checkbox" id="lp-base-on" checked onchange="toggleBase()"> <span class="lp-dot base"></span> Basemap</label>
+                                <span class="lp-count" id="lp-base-count">GIBS</span>
+                            </div>
+                            <div class="lp-opacity">Opacity <input type="range" id="lp-base-opacity" min="5" max="100" value="100" oninput="setBaseOpacity(this.value)"><b id="lp-base-val">100%</b></div>
+                        </div>
+                        <div class="lp-layer">
+                            <div class="lp-row">
+                                <label class="lp-name"><input type="checkbox" id="lp-fires-on" checked onchange="toggleFires()"> <span class="lp-dot fires"></span> FIRMS Fires</label>
+                                <span class="lp-count" id="lp-fires-count">0</span>
+                            </div>
+                            <div class="lp-opacity">Opacity <input type="range" id="lp-fires-opacity" min="5" max="100" value="65" oninput="setFiresOpacity(this.value)"><b id="lp-fires-val">65%</b></div>
+                            <div class="lp-sub">
+                                <label style="display:flex;align-items:center;gap:0.35rem;font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;">Color
+                                    <select class="lp-select" id="lp-fires-color" onchange="setFiresColor()">
+                                        <option value="brightness">Brightness</option>
+                                        <option value="confidence">Confidence</option>
+                                    </select>
+                                </label>
+                                <label style="display:flex;align-items:center;gap:0.35rem;font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;">Since
+                                    <select class="lp-select" id="lp-fires-since" onchange="setFiresSince()">
+                                        <option value="">All time</option>
+                                        <option value="6h">Last 6h</option>
+                                        <option value="24h" selected>Last 24h</option>
+                                        <option value="48h">Last 48h</option>
+                                        <option value="7d">Last 7d</option>
+                                        <option value="30d">Last 30d</option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="lp-layer">
+                            <div class="lp-row">
+                                <label class="lp-name"><input type="checkbox" id="lp-cams-on" checked onchange="toggleCams()"> <span class="lp-dot cams"></span> Open Cameras</label>
+                                <span class="lp-count" id="lp-cams-count">0</span>
+                            </div>
+                            <div class="lp-opacity">Opacity <input type="range" id="lp-cams-opacity" min="5" max="100" value="100" oninput="setCamsOpacity(this.value)"><b id="lp-cams-val">100%</b></div>
+                        </div>
+                        <div class="lp-legend">
+                            <h4>Fire heat intensity</h4>
+                            <div class="lp-ramp"></div>
+                            <div class="lp-ramp-scale"><span>cool / low</span><span>hot / high</span></div>
+                            <div class="lp-heat-legend" id="lp-heat-legend"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <!-- Search Results -->
@@ -231,6 +334,7 @@
     </div>
 
 <script src="/static/vendor/leaflet/leaflet.js"></script>
+<script src="/static/vendor/leaflet/leaflet.heat.js"></script>
 <script>
 const API = '';
 
@@ -445,9 +549,11 @@ async function checkHealth() {
     }
 }
 
-// ── Map (NASA GIBS satellite basemap) ────────────────────────────────────
+// ── Map (NASA GIBS basemap + FIRMS heatmap + open cameras) ───────────────
 let map = null, mapLayer = null, mapInitStarted = false;
-let firesGroup = null, camsGroup = null, firesOn = false, camsOn = false;
+let firesHeat = null, camsGroup = null, firesOn = false, camsOn = false;
+let firesOpacity = 0.65, firesColor = 'brightness', firesSince = '24h';
+let camsOpacity = 1.0, baseOpacity = 1.0;
 let mapLayers = [];   // catalog from /api/map/layers
 let mapDomain = null; // time windows for current layer
 let mapLatest = null; // ISO date of most recent imagery
@@ -470,16 +576,32 @@ async function initMap() {
         if (preferred) sel.value = preferred.id;
         map = L.map('map', {
             center: [25, 10], zoom: 2,
-            zoomControl: true,
+            zoomControl: false,
             worldCopyJump: true,
             minZoom: 1,
             maxZoom: 12,
             attributionControl: true,
         });
+        L.control.zoom({ position: 'topright' }).addTo(map);
         map.attributionControl.setPrefix('');
-        map.on('moveend', () => { if (firesOn) loadFires(); if (camsOn) loadCams(); });
+        updateHeatLegend();
+        // Reload overlays when the user pans/zooms. Skip when a popup is open:
+        // opening a camera popup auto-pans the map to fit it, and that moveend
+        // must NOT rebuild the marker group under the open popup (which would
+        // close it). Leaflet closes popups on manual drag, so a live popup here
+        // means the move was autopan — safe to skip.
+        map.on('moveend', () => {
+            if (map._popup) return;
+            if (firesOn) loadFires();
+            if (camsOn) loadCams();
+        });
         // default selection = first layer
         await mapLayerChanged();
+        // Overlays default ON (checked in the layer panel)
+        firesOn = document.getElementById('lp-fires-on').checked;
+        camsOn = document.getElementById('lp-cams-on').checked;
+        if (firesOn) loadFires();
+        if (camsOn) loadCams();
     } catch(e) {
         hint.textContent = `Failed to load map layers: ${e.message || e}`;
         console.error('Map init failed', e);
@@ -589,50 +711,131 @@ function mapResetView() { if (map) map.setView([25, 10], 2); }
 
 function currentBBox() {
     const b = map.getBounds();
-    return `${b.getWest().toFixed(4)},${b.getSouth().toFixed(4)},${b.getEast().toFixed(4)},${b.getNorth().toFixed(4)}`;
+    // Clamp to world bounds: at low zoom with worldCopyJump the map spans
+    // multiple world copies, and /api/cameras rejects coords outside ±180/±90.
+    const west = Math.max(-180, Math.min(180, b.getWest()));
+    const east = Math.max(-180, Math.min(180, b.getEast()));
+    const south = Math.max(-90, Math.min(90, b.getSouth()));
+    const north = Math.max(-90, Math.min(90, b.getNorth()));
+    return `${west.toFixed(4)},${south.toFixed(4)},${east.toFixed(4)},${north.toFixed(4)}`;
 }
 
-async function mapToggleFires() {
-    firesOn = !firesOn;
-    document.getElementById('map-fires-toggle').classList.toggle('active', firesOn);
+function toggleLayerPanel() {
+    document.getElementById('layer-panel').classList.toggle('collapsed');
+}
+
+// ── Basemap visibility / opacity ─────────────────────────────────────────
+function toggleBase() {
+    const on = document.getElementById('lp-base-on').checked;
+    if (mapLayer) mapLayer.setOpacity(on ? baseOpacity : 0);
+}
+function setBaseOpacity(v) {
+    baseOpacity = v / 100;
+    document.getElementById('lp-base-val').textContent = `${Math.round(v)}%`;
+    if (mapLayer && document.getElementById('lp-base-on').checked) mapLayer.setOpacity(baseOpacity);
+}
+
+// ── FIRMS fire heatmap ───────────────────────────────────────────────────
+function firesIntensity(f) {
+    // Color-by mode drives the intensity fed to leaflet.heat:
+    //  * brightness — normalize bright_ti4 (~290–400K) into 0..1
+    //  * confidence — VIIRS confidence rank (l=0.35, n=0.6, h=1.0)
+    if (firesColor === 'confidence') {
+        return f.confidence === 'h' ? 1.0 : f.confidence === 'l' ? 0.35 : 0.6;
+    }
+    const b = f.brightness || 300;
+    return Math.max(0.05, Math.min(1, (b - 290) / 110));
+}
+function firesGradient() {
+    // Neon ramp that reads on the dark basemap; low→high intensity.
+    return firesColor === 'confidence'
+        ? { 0.2: '#3b82f6', 0.5: '#fbbf24', 0.75: '#fb923c', 1.0: '#ef4444' }
+        : { 0.1: '#2563eb', 0.4: '#38bdf8', 0.65: '#f59e0b', 0.85: '#ef4444', 1.0: '#fde047' };
+}
+function updateHeatLegend() {
+    const el = document.getElementById('lp-heat-legend');
+    if (firesColor === 'confidence') {
+        el.innerHTML = '<span><span class="sw" style="background:#fbbf24">l</span><span class="sw" style="background:#fb923c">n</span><span class="sw" style="background:#ef4444">h</span></span><span>VIIRS confidence</span>';
+    } else {
+        el.innerHTML = '<span>~290K</span><span>~400K</span>';
+    }
+}
+function sinceToISO(sel) {
+    if (!sel) return '';
+    const m = sel.match(/^(\d+)([hd])$/);
+    if (!m) return '';
+    const n = parseInt(m[1], 10) * (m[2] === 'h' ? 3600 : 86400) * 1000;
+    return new Date(Date.now() - n).toISOString();
+}
+async function toggleFires() {
+    firesOn = document.getElementById('lp-fires-on').checked;
     if (firesOn) await loadFires();
-    else if (firesGroup) { map.removeLayer(firesGroup); firesGroup = null; }
+    else if (firesHeat) { map.removeLayer(firesHeat); firesHeat = null; }
+    document.getElementById('lp-fires-count').textContent = '0';
+}
+function setFiresOpacity(v) {
+    firesOpacity = v / 100;
+    document.getElementById('lp-fires-val').textContent = `${Math.round(v)}%`;
+    if (firesHeat && firesHeat._canvas) firesHeat._canvas.style.opacity = firesOpacity;
+}
+function setFiresColor() {
+    firesColor = document.getElementById('lp-fires-color').value;
+    updateHeatLegend();
+    if (firesOn) loadFires();  // re-weight intensities
+}
+function setFiresSince() {
+    firesSince = document.getElementById('lp-fires-since').value;
+    if (firesOn) loadFires();
 }
-
 async function loadFires() {
     if (!map) return;
     try {
-        const r = await fetch(`${API}/api/fires?bbox=${currentBBox()}&limit=2000`);
+        let url = `${API}/api/fires?bbox=${currentBBox()}&limit=2000`;
+        const since = sinceToISO(firesSince);
+        if (since) url += `&since=${encodeURIComponent(since)}`;
+        const r = await fetch(url);
         const fires = await r.json();
-        if (firesGroup) map.removeLayer(firesGroup);
-        firesGroup = L.layerGroup(fires.map(f => {
-            const color = f.confidence === 'h' ? '#f87171'
-                : f.confidence === 'l' ? '#fbbf24' : '#fb923c';
-            return L.circleMarker([f.latitude, f.longitude], {
-                radius: Math.min(6, 2 + (f.brightness || 300) / 100),
-                color: color, weight: 1, fillColor: color, fillOpacity: 0.6,
-            }).bindPopup(
-                `<b>Fire hotspot</b><br>brightness: ${(f.brightness||0).toFixed(1)}K` +
-                `<br>FRP: ${(f.frp||0).toFixed(1)} MW<br>confidence: ${f.confidence}` +
-                `<br>sat: ${f.satellite} ${f.instrument || ''}<br>acquired: ${f.acq_time}`
-            );
-        }));
-        firesGroup.addTo(map);
+        if (firesHeat) map.removeLayer(firesHeat);
+        const pts = fires.map(f => [f.latitude, f.longitude, firesIntensity(f)]);
+        firesHeat = L.heatLayer(pts, {
+            radius: 22, blur: 20, maxZoom: 9, max: 1.0, minOpacity: 0.2,
+            gradient: firesGradient(),
+        }).addTo(map);
+        firesHeat._canvas.style.opacity = firesOpacity;
+        document.getElementById('lp-fires-count').textContent = fires.length.toLocaleString();
         document.getElementById('map-hint').textContent =
-            `${fires.length} fire hotspots in view`;
+            `${fires.length.toLocaleString()} fire hotspots in view` +
+            (since ? ` · since ${since.slice(0,16).replace('T',' ')}Z` : '');
     } catch(e) {
         document.getElementById('map-hint').textContent = `Fires load failed: ${e.message || e}`;
         console.error('Fires load failed', e);
     }
 }
 
-async function mapToggleCams() {
-    camsOn = !camsOn;
-    document.getElementById('map-cams-toggle').classList.toggle('active', camsOn);
+// ── Open IP cameras (thumbnail popups) ───────────────────────────────────
+async function toggleCams() {
+    camsOn = document.getElementById('lp-cams-on').checked;
     if (camsOn) await loadCams();
     else if (camsGroup) { map.removeLayer(camsGroup); camsGroup = null; }
+    document.getElementById('lp-cams-count').textContent = '0';
+}
+function setCamsOpacity(v) {
+    camsOpacity = v / 100;
+    document.getElementById('lp-cams-val').textContent = `${Math.round(v)}%`;
+    if (camsGroup) camsGroup.eachLayer(l => l.setOpacity && l.setOpacity(camsOpacity));
+}
+function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g,
+        c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+function camThumb(c) {
+    // Live snapshot proxied through the backend TTL cache. Only render the
+    // <img> when the camera actually has a snapshot URL (else the backend
+    // 404s); onerror swaps to a placeholder so a dead cam never breaks layout.
+    if (!c.snapshot_url) return '<div class="thumb placeholder">no snapshot available</div>';
+    const onerr = "this.classList.add('placeholder'); this.onerror=null; this.alt='snapshot unavailable'; this.removeAttribute('src');";
+    return `<img class="thumb" src="/api/cameras/${esc(c.id)}/snapshot" alt="live snapshot" loading="lazy" onerror="${onerr}">`;
 }
-
 async function loadCams() {
     if (!map) return;
     try {
@@ -642,22 +845,28 @@ async function loadCams() {
         camsGroup = L.layerGroup(cams.map(c => {
             const icon = L.divIcon({
                 className: '',
-                html: '<span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#38bdf8;box-shadow:0 0 8px #38bdf8;border:1px solid #0f172a;"></span>',
-                iconSize: [11, 11], iconAnchor: [5, 5],
+                html: '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80,0 0 2px #0f172a;border:1px solid #0f172a;"></span>',
+                iconSize: [12, 12], iconAnchor: [6, 6],
             });
-            const camLink = c.snapshot_url
-                ? `<br><a href="/api/cameras/${c.id}/snapshot" target="_blank">snapshot</a>`
-                : '';
             return L.marker([c.lat, c.lon], { icon })
-                .bindPopup(`<b>${c.location_name || 'Open camera'}</b>` +
-                    `<br>vendor: ${c.vendor || '?'} ${c.device_type || ''}` +
-                    `<br>src: ${c.discovery_source || '?'}` +
-                    (c.source_url ? `<br><a href="${c.source_url}" target="_blank" rel="noopener">source</a>` : '') +
-                    camLink);
+                .bindPopup(`<div class="cam-pop">` +
+                    `<b>${esc(c.location_name || 'Open camera')}</b>` +
+                    `${c.id ? camThumb(c) : '<div class="thumb placeholder">no snapshot</div>'}` +
+                    `<table>` +
+                    `<tr><td class="k">Vendor</td><td>${esc(c.vendor || '?')} ${esc(c.device_type || '')}</td></tr>` +
+                    `<tr><td class="k">Source</td><td>${esc(c.discovery_source || '?')}</td></tr>` +
+                    `<tr><td class="k">First seen</td><td>${esc((c.first_seen||'').slice(0,16).replace('T',' '))}</td></tr>` +
+                    `<tr><td class="k">Last seen</td><td>${esc((c.last_seen||'').slice(0,16).replace('T',' '))}</td></tr>` +
+                    `<tr><td class="k">Coords</td><td>${(c.lat!=null&&c.lon!=null) ? c.lat.toFixed(3)+', '+c.lon.toFixed(3) : 'unknown'}</td></tr>` +
+                    `</table>` +
+                    (c.source_url ? `<a href="${esc(c.source_url)}" target="_blank" rel="noopener">source page ↗</a>` : '') +
+                    `</div>`);
         }));
         camsGroup.addTo(map);
+        camsGroup.eachLayer(l => l.setOpacity && l.setOpacity(camsOpacity));
+        document.getElementById('lp-cams-count').textContent = cams.length.toLocaleString();
         document.getElementById('map-hint').textContent =
-            `${cams.length} open cameras in view`;
+            `${cams.length.toLocaleString()} open cameras in view`;
     } catch(e) {
         document.getElementById('map-hint').textContent = `Cameras load failed: ${e.message || e}`;
         console.error('Cameras load failed', e);
diff --git a/app/static/vendor/leaflet/leaflet.heat.js b/app/static/vendor/leaflet/leaflet.heat.js
new file mode 100644
index 0000000..aa8031a
--- /dev/null
+++ b/app/static/vendor/leaflet/leaflet.heat.js
@@ -0,0 +1,11 @@
+/*
+ (c) 2014, Vladimir Agafonkin
+ simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas
+ https://github.com/mourner/simpleheat
+*/
+!function(){"use strict";function t(i){return this instanceof t?(this._canvas=i="string"==typeof i?document.getElementById(i):i,this._ctx=i.getContext("2d"),this._width=i.width,this._height=i.height,this._max=1,void this.clear()):new t(i)}t.prototype={defaultRadius:25,defaultGradient:{.4:"blue",.6:"cyan",.7:"lime",.8:"yellow",1:"red"},data:function(t,i){return this._data=t,this},max:function(t){return this._max=t,this},add:function(t){return this._data.push(t),this},clear:function(){return this._data=[],this},radius:function(t,i){i=i||15;var a=this._circle=document.createElement("canvas"),s=a.getContext("2d"),e=this._r=t+i;return a.width=a.height=2*e,s.shadowOffsetX=s.shadowOffsetY=200,s.shadowBlur=i,s.shadowColor="black",s.beginPath(),s.arc(e-200,e-200,t,0,2*Math.PI,!0),s.closePath(),s.fill(),this},gradient:function(t){var i=document.createElement("canvas"),a=i.getContext("2d"),s=a.createLinearGradient(0,0,0,256);i.width=1,i.height=256;for(var e in t)s.addColorStop(e,t[e]);return a.fillStyle=s,a.fillRect(0,0,1,256),this._grad=a.getImageData(0,0,1,256).data,this},draw:function(t){this._circle||this.radius(this.defaultRadius),this._grad||this.gradient(this.defaultGradient);var i=this._ctx;i.clearRect(0,0,this._width,this._height);for(var a,s=0,e=this._data.length;e>s;s++)a=this._data[s],i.globalAlpha=Math.max(a[2]/this._max,t||.05),i.drawImage(this._circle,a[0]-this._r,a[1]-this._r);var n=i.getImageData(0,0,this._width,this._height);return this._colorize(n.data,this._grad),i.putImageData(n,0,0),this},_colorize:function(t,i){for(var a,s=3,e=t.length;e>s;s+=4)a=4*t[s],a&&(t[s-3]=i[a],t[s-2]=i[a+1],t[s-1]=i[a+2])}},window.simpleheat=t}(),/*
+ (c) 2014, Vladimir Agafonkin
+ Leaflet.heat, a tiny and fast heatmap plugin for Leaflet.
+ https://github.com/Leaflet/Leaflet.heat
+*/
+L.HeatLayer=(L.Layer?L.Layer:L.Class).extend({initialize:function(t,i){this._latlngs=t,L.setOptions(this,i)},setLatLngs:function(t){return this._latlngs=t,this.redraw()},addLatLng:function(t){return this._latlngs.push(t),this.redraw()},setOptions:function(t){return L.setOptions(this,t),this._heat&&this._updateOptions(),this.redraw()},redraw:function(){return!this._heat||this._frame||this._map._animating||(this._frame=L.Util.requestAnimFrame(this._redraw,this)),this},onAdd:function(t){this._map=t,this._canvas||this._initCanvas(),t._panes.overlayPane.appendChild(this._canvas),t.on("moveend",this._reset,this),t.options.zoomAnimation&&L.Browser.any3d&&t.on("zoomanim",this._animateZoom,this),this._reset()},onRemove:function(t){t.getPanes().overlayPane.removeChild(this._canvas),t.off("moveend",this._reset,this),t.options.zoomAnimation&&t.off("zoomanim",this._animateZoom,this)},addTo:function(t){return t.addLayer(this),this},_initCanvas:function(){var t=this._canvas=L.DomUtil.create("canvas","leaflet-heatmap-layer leaflet-layer"),i=L.DomUtil.testProp(["transformOrigin","WebkitTransformOrigin","msTransformOrigin"]);t.style[i]="50% 50%";var a=this._map.getSize();t.width=a.x,t.height=a.y;var s=this._map.options.zoomAnimation&&L.Browser.any3d;L.DomUtil.addClass(t,"leaflet-zoom-"+(s?"animated":"hide")),this._heat=simpleheat(t),this._updateOptions()},_updateOptions:function(){this._heat.radius(this.options.radius||this._heat.defaultRadius,this.options.blur),this.options.gradient&&this._heat.gradient(this.options.gradient),this.options.max&&this._heat.max(this.options.max)},_reset:function(){var t=this._map.containerPointToLayerPoint([0,0]);L.DomUtil.setPosition(this._canvas,t);var i=this._map.getSize();this._heat._width!==i.x&&(this._canvas.width=this._heat._width=i.x),this._heat._height!==i.y&&(this._canvas.height=this._heat._height=i.y),this._redraw()},_redraw:function(){var t,i,a,s,e,n,h,o,r,d=[],_=this._heat._r,l=this._map.getSize(),m=new L.Bounds(L.point([-_,-_]),l.add([_,_])),c=void 0===this.options.max?1:this.options.max,u=void 0===this.options.maxZoom?this._map.getMaxZoom():this.options.maxZoom,f=1/Math.pow(2,Math.max(0,Math.min(u-this._map.getZoom(),12))),g=_/2,p=[],v=this._map._getMapPanePos(),w=v.x%g,y=v.y%g;for(t=0,i=this._latlngs.length;i>t;t++)if(a=this._map.latLngToContainerPoint(this._latlngs[t]),m.contains(a)){e=Math.floor((a.x-w)/g)+2,n=Math.floor((a.y-y)/g)+2;var x=void 0!==this._latlngs[t].alt?this._latlngs[t].alt:void 0!==this._latlngs[t][2]?+this._latlngs[t][2]:1;r=x*f,p[n]=p[n]||[],s=p[n][e],s?(s[0]=(s[0]*s[2]+a.x*r)/(s[2]+r),s[1]=(s[1]*s[2]+a.y*r)/(s[2]+r),s[2]+=r):p[n][e]=[a.x,a.y,r]}for(t=0,i=p.length;i>t;t++)if(p[t])for(h=0,o=p[t].length;o>h;h++)s=p[t][h],s&&d.push([Math.round(s[0]),Math.round(s[1]),Math.min(s[2],c)]);this._heat.data(d).draw(this.options.minOpacity),this._frame=null},_animateZoom:function(t){var i=this._map.getZoomScale(t.zoom),a=this._map._getCenterOffset(t.center)._multiplyBy(-i).subtract(this._map._getMapPanePos());L.DomUtil.setTransform?L.DomUtil.setTransform(this._canvas,a,i):this._canvas.style[L.DomUtil.TRANSFORM]=L.DomUtil.getTranslateString(a)+" scale("+i+")"}}),L.heatLayer=function(t,i){return new L.HeatLayer(t,i)};
\ No newline at end of file