diff --git a/static/index.html b/static/index.html index ce1c471..57a704d 100644 --- a/static/index.html +++ b/static/index.html @@ -787,18 +787,15 @@ border-radius: var(--radius); /* Map controls bar */ .map-controls { - display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; + display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .map-chip { - display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--card2); color: var(--text2); cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; - user-select: none; } - .map-chip svg { width: 13px; height: 13px; flex-shrink: 0; } .map-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .map-chip.heat-on { background: var(--amber); border-color: var(--amber); color: #000; } .map-chip.park-on { background: var(--accent); border-color: var(--accent); color: #fff; } @@ -1339,18 +1336,9 @@ ═══════════════════════════════════════════════════════════════════════ -->
- - - Heatmap - - - - Parks ON - - - - My Location - + 🔥 Heatmap + 🏰 Parks ON + ◎ My GPS
@@ -3390,14 +3378,13 @@ function toggleParkOutlines() { parkOutlinesVisible = !parkOutlinesVisible; const chip = document.getElementById('chipParkOutlines'); - const label = chip.querySelector('.chip-label'); if (parkOutlinesVisible) { chip.classList.add('park-on'); - if (label) label.textContent = 'Parks ON'; + chip.textContent = '🏰 Parks ON'; drawParkOutlines(); } else { chip.classList.remove('park-on'); - if (label) label.textContent = 'Parks'; + chip.textContent = '🏰 Parks'; if (parkOutlineGroup) map.removeLayer(parkOutlineGroup); parkOutlineGroup = null; } @@ -4419,18 +4406,20 @@ if (a.latitude != null && a.longitude != null) { var catEntry = CATEGORY_MAP[a.category]; var icon = catEntry ? catEntry.icon : (a.category ? a.category.charAt(0).toUpperCase() : '📦'); + // Map pins can't render tags, fall back to emoji + if (icon.indexOf('
' + esc(a.machine_id || '') + '
'; var catColor = catEntry ? catEntry.color : '#6b7280'; var pinIcon = L.divIcon({ className: 'cat-pin-icon', - html: '
' + icon + '
', - iconSize: [26, 26], - iconAnchor: [13, 13], - popupAnchor: [0, -15], + html: '
' + icon + '
', + iconSize: [32, 32], + iconAnchor: [16, 16], + popupAnchor: [0, -18], }); var marker = L.marker([a.latitude, a.longitude], { icon: pinIcon }) .addTo(map) @@ -4455,12 +4444,11 @@ async function toggleHeatmap() { if (!map) return; const chip = document.getElementById('chipHeat'); - const label = chip.querySelector('.chip-label'); if (heatVisible) { heatVisible = false; chip.classList.remove('heat-on'); - if (label) label.textContent = 'Heatmap'; + chip.textContent = '🔥 Heatmap'; if (heatLayer) map.removeLayer(heatLayer); heatLayer = null; return; @@ -4468,7 +4456,7 @@ heatVisible = true; chip.classList.add('heat-on'); - if (label) label.textContent = 'Heatmap ON'; + chip.textContent = '🔥 Heatmap ON'; await loadHeatmapData(); }