fix: revert chips to emoji, Snack pins use 🍿 fallback (img→emoji), bigger markers 28px

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 @@
        ═══════════════════════════════════════════════════════════════════════ -->
   <div id="tabMap" class="tab-panel">
     <div class="map-controls">
-      <span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">
+      <span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">🔥 Heatmap</span>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c-1.5 2.5-3 5-3 8a3 3 0 0 0 6 0c0-3-1.5-5.5-3-8z"/><path d="M12 14c-1.5 2.5-3 5-3 8a3 3 0 0 0 6 0c0-3-1.5-5.5-3-8z" opacity=".3"/></svg>
+      <span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">🏰 Parks ON</span>
-        <span class="chip-label">Heatmap</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>
-      <span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><rect x="8" y="8" width="8" height="8" rx="1.5" stroke-dasharray="3 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" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="7"/><line x1="12" y1="17" x2="12" y2="22"/><line x1="2" y1="12" x2="7" y2="12"/><line x1="17" y1="12" x2="22" y2="12"/></svg>
-        <span class="chip-label">My Location</span>
-      </span>
     </div>
     <div id="mapContainer"></div>
     <!-- Auto-visit status indicator -->
@@ -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 <img> tags, fall back to emoji
+            if (icon.indexOf('<img') !== -1) icon = '🍿';
             var popupHtml = '<b>' + esc(a.name) + '</b><br>' + esc(a.machine_id || '') +
               '<br><button class="btn btn-outline btn-sm" style="margin-top:6px;" ' +
               'onclick="switchTab(\'tabAssets\');viewAsset(' + a.id + ');">View Details</button>';
             var catColor = catEntry ? catEntry.color : '#6b7280';
             var pinIcon = L.divIcon({
               className: 'cat-pin-icon',
-              html: '<div style="width:22px;height:22px;border-radius:50%;background:' + catColor +
+              html: '<div style="width:28px;height:28px;border-radius:50%;background:' + catColor +
-                    ';display:flex;align-items:center;justify-content:center;font-size:12px;' +
+                    ';display:flex;align-items:center;justify-content:center;font-size:15px;' +
-                    'box-shadow:0 2px 4px rgba(0,0,0,0.5);border:2px solid #fff;">' + icon + '</div>',
+                    'box-shadow:0 2px 5px rgba(0,0,0,0.5);border:2px solid #fff;">' + icon + '</div>',
-              iconSize: [26, 26],
+              iconSize: [32, 32],
-              iconAnchor: [13, 13],
+              iconAnchor: [16, 16],
-              popupAnchor: [0, -15],
+              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();
     }