From 0401e45ea45f92dd039d82b52a43d07cf0598a8c Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Sat, 23 May 2026 00:27:54 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20category-based=20icon=20pins=20on=20map?=
 =?UTF-8?q?=20=E2=80=94=20=F0=9F=A5=A4=F0=9F=8D=94=F0=9F=94=A7=20etc=20ins?=
 =?UTF-8?q?tead=20of=20blue=20dots?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/index.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/static/index.html b/static/index.html
index 61026fc..b3e1c94 100644
--- a/static/index.html
+++ b/static/index.html
@@ -804,6 +804,7 @@
     .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; }
+    .cat-pin-icon { background: transparent !important; border: none !important; box-shadow: none !important; }
     .park-label-icon { pointer-events: none !important; background: transparent !important; border: none !important; }
     .leaflet-popup-content-wrapper {
       background: var(--card) !important;
@@ -4397,7 +4398,18 @@
             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 marker = L.marker([a.latitude, a.longitude])
+            var catColor = catEntry ? catEntry.color : '#6b7280';
+            var pinIcon = L.divIcon({
+              className: 'cat-pin-icon',
+              html: '<div style="background:' + catColor + '22;color:' + catColor +
+                    ';border:2px solid ' + catColor + ';width:36px;height:36px;border-radius:50%;' +
+                    'display:flex;align-items:center;justify-content:center;font-size:18px;' +
+                    'box-shadow:0 2px 8px rgba(0,0,0,0.4);">' + icon + '</div>',
+              iconSize: [36, 36],
+              iconAnchor: [18, 18],
+              popupAnchor: [0, -20],
+            });
+            var marker = L.marker([a.latitude, a.longitude], { icon: pinIcon })
               .addTo(map)
               .bindPopup(popupHtml);
             window._assetPins.push(marker);