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

fix: simple colored circle pins, no transforms — 22px dot with emoji and white border

Browse Source
This commit is contained in:
Shawn
2026-05-23 00:33:53 -04:00
parent 71de462040
commit 384a0b842b
1 changed files with 6 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+6 -19
View File
@@ -800,20 +800,6 @@
.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;
@@ -4426,11 +4412,12 @@
var catColor = catEntry ? catEntry.color : '#6b7280';
var pinIcon = L.divIcon({
className: 'cat-pin-icon',
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],
html: '<div style="width:22px;height:22px;border-radius:50%;background:' + catColor +
';display:flex;align-items:center;justify-content:center;font-size:12px;' +
'box-shadow:0 2px 4px rgba(0,0,0,0.5);border:2px solid #fff;">' + icon + '</div>',
iconSize: [26, 26],
iconAnchor: [13, 13],
popupAnchor: [0, -15],
});
var marker = L.marker([a.latitude, a.longitude], { icon: pinIcon })
.addTo(map)