Fix overlapping Distance/Area text; label each segment's own length
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:
1 parent
12635a48c3
commit
24b6180c03
3 files changed
+83
-6
No files matched your search
@@ -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
|
||||
|
||||
Reference in new issue
Block a user