Fix overlapping Distance/Area text; label each segment's own length
CI / check (push) Successful in 45s
CI / deploy (push) Successful in 14s

The measure panel's mode buttons sit inside a maplibregl-ctrl-group
container (for the ruler button's own 29x29 sizing) — its global
"button" rule reaches them too, clipping "Distance"/"Area" into a
fixed 29px square with zero padding instead of sizing to fit the
text. Fixed by upping specificity (".measure-panel .measure-panel__mode")
rather than fighting the cascade with !important.

In distance mode, each segment between two clicked points now shows
its own length at its midpoint, not just the running total in the
panel — a symbol layer keyed off the existing source, filtered apart
from the vertex circles by a new "role" property.

Verified both in a real browser (panel no longer overlaps; two
638m segments rendered and labeled correctly summing to the panel's
1.28km total).
This commit is contained in:
randy committed 2026-09-07 23:05:54 +02:00
1 parent 12635a48c3
commit 24b6180c03
3 files changed
+83 -6

No files matched your search

+23
View File
@@ -172,6 +172,29 @@ from an unmerged upstream branch and patched for a MapLibre API break
(it targeted MapLibre ~2.4's public `map.transform`, since removed) —
see `docs/third-party-notices.adoc` for the exact patch.
=== Measuring distance and area
`MeasureControl` (`public/js/measure.js`) opens a small floating
panel next to its ruler button (mirroring NPS's own Area/Distance
ruler) with Distance/Area mode buttons, a live result, and Clear —
its buttons needed `.measure-panel <selector>` (not just the bare
class) to outrank `.maplibregl-ctrl-group button`'s own 29×29px/
zero-padding rule, which otherwise clips "Distance"/"Area" into
overlapping text (the container is a `maplibregl-ctrl-group` for the
ruler button's own sizing, and that rule reaches every button nested
inside it, panel included). Clicking the map adds a vertex; distance
sums haversine segment lengths, area uses the spherical-excess
polygon formula (Chamberlain & Duquette — the same one turf.js's
`area()` uses) rather than a flat shoelace, since a flat approximation
drifts at the scale a park boundary can reach. In distance mode, each
individual segment also gets its own label at its midpoint (a `symbol`
layer keyed off a `role: "segment-label"` property, filtered apart
from the draggable vertex points, which share the same source but
`role: "vertex"`) — the running total in the panel doesn't say how
long any one leg was on its own. Area mode has no equivalent yet;
a polygon's edges are its perimeter, not a path, so the same treatment
may not even read the same way there.
=== Debug inspector (Alt+click)
Alt+click anywhere on the map opens a popup listing every rendered