feat: clearer map control icons with SVG + label spans, replace emoji chips

static/index.html

@@ -787,18 +787,23 @@
       border-radius: var(--radius);
     /* Map controls bar */
     .map-controls {
-      display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
+      display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center;
     }
     .map-chip {
+      display: inline-flex; align-items: center; gap: 5px;
       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: 14px; height: 14px; 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.heat-on svg { color: #000; }
     .map-chip.park-on { background: var(--accent); border-color: var(--accent); color: #fff; }
+    .map-chip.park-on svg { color: #fff; }
     .park-label-icon { pointer-events: none !important; background: transparent !important; border: none !important; }
     .leaflet-popup-content-wrapper {
       background: var(--card) !important;
@@ -1319,9 +1324,18 @@
        ═══════════════════════════════════════════════════════════════════════ -->
   <div id="tabMap" class="tab-panel">
     <div class="map-controls">
-      <span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">🔥 Heatmap</span>
-      <span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">🏰 Parks ON</span>
-      <span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">◎ My GPS</span>
+      <span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2c-1.5 2-3 4-3 7a3 3 0 0 0 6 0c0-3-1.5-5-3-7z"/><path d="M12 13c-1.5 2-3 4-3 7a3 3 0 0 0 6 0c0-3-1.5-5-3-7z" opacity="0.5"/><path d="M7 11c-1 2-2 4-2 6a2 2 0 0 0 4 0c0-2-1-4-2-6z" opacity="0.3"/></svg>
+        <span class="chip-label">Heatmap</span>
+      </span>
+      <span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="10" height="10" rx="1" stroke-dasharray="2 2"/></svg>
+        <span class="chip-label">Parks ON</span>
+      </span>
+      <span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
+        <span class="chip-label">My Location</span>
+      </span>
     </div>
     <div id="mapContainer"></div>
     <!-- Auto-visit status indicator -->
@@ -3351,13 +3365,14 @@
     function toggleParkOutlines() {
       parkOutlinesVisible = !parkOutlinesVisible;
       const chip = document.getElementById('chipParkOutlines');
+      const label = chip.querySelector('.chip-label');
       if (parkOutlinesVisible) {
         chip.classList.add('park-on');
-        chip.textContent = '🏰 Parks ON';
+        if (label) label.textContent = 'Parks ON';
         drawParkOutlines();
       } else {
         chip.classList.remove('park-on');
-        chip.textContent = '🏰 Parks';
+        if (label) label.textContent = 'Parks';
         if (parkOutlineGroup) map.removeLayer(parkOutlineGroup);
         parkOutlineGroup = null;
       }
@@ -4405,11 +4420,12 @@
     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');
-        chip.textContent = '🔥 Heatmap';
+        if (label) label.textContent = 'Heatmap';
         if (heatLayer) map.removeLayer(heatLayer);
         heatLayer = null;
         return;
@@ -4417,7 +4433,7 @@
 
       heatVisible = true;
       chip.classList.add('heat-on');
-      chip.textContent = '🔥 Heatmap ON';
+      if (label) label.textContent = 'Heatmap ON';
       await loadHeatmapData();
     }