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).

public/js/measure.js

@@ -4,6 +4,7 @@ const SOURCE_ID = "measure";
 const LINE_LAYER_ID = "measure-line";
 const FILL_LAYER_ID = "measure-fill";
 const POINT_LAYER_ID = "measure-points";
+const SEGMENT_LABEL_LAYER_ID = "measure-segment-labels";
 const EARTH_RADIUS_M = 6378137; // WGS84 equatorial radius, matches turf.js's area formula
 
 // A distance/area measuring tool, matching the ruler button in NPS's own
@@ -118,15 +119,31 @@ export class MeasureControl {
       id: POINT_LAYER_ID,
       type: "circle",
       source: SOURCE_ID,
-      filter: ["==", "$type", "Point"],
+      filter: ["all", ["==", "$type", "Point"], ["==", ["get", "role"], "vertex"]],
       paint: { "circle-radius": 4, "circle-color": "#fff", "circle-stroke-color": "#1e5fbf", "circle-stroke-width": 2 },
     });
+    // Distance mode only (see _render) — each segment's own length, not
+    // just the running total, matching how a typical measure tool
+    // (Google Maps, QGIS) labels every leg of a multi-point line.
+    this._map.addLayer({
+      id: SEGMENT_LABEL_LAYER_ID,
+      type: "symbol",
+      source: SOURCE_ID,
+      filter: ["==", ["get", "role"], "segment-label"],
+      layout: {
+        "text-field": ["get", "label"],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 11,
+        "text-allow-overlap": true,
+      },
+      paint: { "text-color": "#1e5fbf", "text-halo-color": "#fff", "text-halo-width": 1.5 },
+    });
 
     this._render();
   }
 
   _removeLayers() {
-    [FILL_LAYER_ID, LINE_LAYER_ID, POINT_LAYER_ID].forEach((id) => {
+    [FILL_LAYER_ID, LINE_LAYER_ID, POINT_LAYER_ID, SEGMENT_LABEL_LAYER_ID].forEach((id) => {
       if (this._map.getLayer(id)) this._map.removeLayer(id);
     });
     if (this._map.getSource(SOURCE_ID)) this._map.removeSource(SOURCE_ID);
@@ -136,13 +153,31 @@ export class MeasureControl {
     const source = this._map.getSource(SOURCE_ID);
     if (!source) return;
 
-    const pointFeatures = this._points.map((coord) => ({ type: "Feature", geometry: { type: "Point", coordinates: coord } }));
+    const pointFeatures = this._points.map((coord) => ({
+      type: "Feature",
+      properties: { role: "vertex" },
+      geometry: { type: "Point", coordinates: coord },
+    }));
     const shapeFeature =
       this._mode === "area"
         ? this._points.length >= 3 && { type: "Feature", geometry: { type: "Polygon", coordinates: [[...this._points, this._points[0]]] } }
         : this._points.length >= 2 && { type: "Feature", geometry: { type: "LineString", coordinates: this._points } };
+    // Area mode has no equivalent yet — only asked for distance's own
+    // per-leg labels, and a polygon's edges read differently (perimeter
+    // segments, not a path) if this ever extends there.
+    const segmentLabels =
+      this._mode === "distance"
+        ? this._points.slice(1).map((point, i) => ({
+            type: "Feature",
+            properties: { role: "segment-label", label: formatDistance(haversine(this._points[i], point)) },
+            geometry: { type: "Point", coordinates: midpoint(this._points[i], point) },
+          }))
+        : [];
 
-    source.setData({ type: "FeatureCollection", features: shapeFeature ? [shapeFeature, ...pointFeatures] : pointFeatures });
+    source.setData({
+      type: "FeatureCollection",
+      features: [...(shapeFeature ? [shapeFeature] : []), ...pointFeatures, ...segmentLabels],
+    });
 
     this._result.textContent = this._mode === "area" ? formatArea(polygonArea(this._points)) : formatDistance(lineLength(this._points));
   }
@@ -166,6 +201,13 @@ function lineLength(points) {
   return total;
 }
 
+// A plain coordinate average, not the geodesic midpoint — this only
+// positions a text label, and the two differ by nothing worth computing a
+// great-circle formula for at the segment lengths this tool measures.
+function midpoint([lng1, lat1], [lng2, lat2]) {
+  return [(lng1 + lng2) / 2, (lat1 + lat2) / 2];
+}
+
 // Spherical polygon area (Chamberlain & Duquette, 2007) — the same formula
 // turf.js's area() uses. A flat shoelace formula would drift noticeably at
 // the scale a park boundary can reach; this accounts for the sphere.