shawn/canteen-asset-tracker
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: teardrop pin markers (smaller, 24px) with category emoji on white dot

Browse Source
This commit is contained in:
Shawn
2026-05-23 00:31:46 -04:00
parent 26311e7fe6
commit 71de462040
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+19 -7
View File
@@ -800,6 +800,20 @@
.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; }
.cat-pin-icon { background: transparent !important; border: none !important; box-shadow: none !important; }
.map-pin {
width: 22px; height: 22px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
display: flex; align-items: center; justify-content: center;
}
.map-pin-inner {
width: 16px; height: 16px;
border-radius: 50%;
transform: rotate(45deg);
display: flex; align-items: center; justify-content: center;
font-size: 10px; line-height: 1;
}
.park-label-icon { pointer-events: none !important; background: transparent !important; border: none !important; }
.leaflet-popup-content-wrapper {
background: var(--card) !important;
@@ -4412,13 +4426,11 @@
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],
html: '<div class="map-pin" style="background:' + catColor + ';">' +
'<div class="map-pin-inner" style="background:#fff;">' + icon + '</div></div>',
iconSize: [24, 32],
iconAnchor: [12, 32],
popupAnchor: [0, -34],
});
var marker = L.marker([a.latitude, a.longitude], { icon: pinIcon })
.addTo(map)