Fix day label positioning above overnight marker

Use iconSize + iconAnchor instead of CSS transform to position the
day label pill above the waypoint marker. The label was overlapping
the marker because translate(-50%, -30px) didn't clear the 24px icon.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-11 00:30:15 +02:00
parent cd180bc13b
commit 83a416b6c9
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9

View file

@ -38,9 +38,9 @@ function dayLabelIcon(dayNumber: number, distanceKm: string): L.DivIcon {
padding:2px 8px;border-radius:12px;
font-size:11px;font-weight:600;white-space:nowrap;
box-shadow:0 1px 4px rgba(0,0,0,0.15);
transform:translate(-50%,-30px);
">Day ${dayNumber} · ${distanceKm} km</div>`,
iconSize: [0, 0],
iconSize: [120, 20],
iconAnchor: [60, 44],
});
}