Make Measure's vertices draggable and deletable

Drag: mousedown on a vertex circle calls event.preventDefault() (the
documented way to opt a gesture out of MapLibre's own drag-to-pan),
then a map-wide mousemove/mouseup follows the cursor and updates that
point's coordinates live. Delete: clicking a vertex selects it (shown
larger/yellow); Delete or Backspace removes it, guarded against
eating a keystroke meant for an actual text input on the page.

A vertex's own mousedown sets a one-shot flag so the same click
doesn't also fall through to the generic map-click handler and add a
brand new point on top of it.

public/js/measure.js

@@ -21,6 +21,9 @@ export class MeasureControl {
     this._mode = "distance";
     this._active = false;
     this._points = [];
+    this._selectedIndex = null; // which vertex Delete/Backspace acts on
+    this._draggingIndex = null;
+    this._suppressNextClick = false; // a mousedown on a vertex already handled this click; don't also add a new point
   }
 
   onAdd(map) {
@@ -67,11 +70,72 @@ export class MeasureControl {
 
     this._onClick = (event) => {
       if (!this._active || this._noteForm.isOpen) return;
+      // A mousedown on an existing vertex (below) already selected/started
+      // dragging it — without this, that same click would also land here
+      // and add a brand new point right on top of it.
+      if (this._suppressNextClick) {
+        this._suppressNextClick = false;
+        return;
+      }
+      this._selectedIndex = null;
       this._points.push([event.lngLat.lng, event.lngLat.lat]);
       this._render();
     };
     map.on("click", this._onClick);
 
+    // Vertex drag: mousedown on a point starts it, a map-wide mousemove
+    // follows the cursor while dragging, mouseup anywhere ends it — not
+    // scoped to the layer since the cursor is very likely to leave the
+    // (few-pixel) vertex circle mid-drag. preventDefault on the mousedown
+    // is what stops MapLibre's own drag-to-pan from also engaging for the
+    // same gesture (its documented way to opt out per-interaction).
+    this._onVertexMouseDown = (event) => {
+      if (!this._active || this._noteForm.isOpen) return;
+      const index = event.features[0]?.properties?.index;
+      if (index === undefined) return;
+      event.preventDefault();
+      this._draggingIndex = index;
+      this._selectedIndex = index;
+      this._suppressNextClick = true;
+      this._map.getCanvas().style.cursor = "grabbing";
+      this._render();
+    };
+    map.on("mousedown", POINT_LAYER_ID, this._onVertexMouseDown);
+
+    this._onMouseMove = (event) => {
+      if (this._draggingIndex === null) return;
+      this._points[this._draggingIndex] = [event.lngLat.lng, event.lngLat.lat];
+      this._render();
+    };
+    map.on("mousemove", this._onMouseMove);
+
+    this._onMouseUp = () => {
+      if (this._draggingIndex === null) return;
+      this._draggingIndex = null;
+      this._map.getCanvas().style.cursor = this._active ? "crosshair" : "";
+    };
+    map.on("mouseup", this._onMouseUp);
+
+    map.on("mouseenter", POINT_LAYER_ID, () => {
+      if (this._draggingIndex === null) this._map.getCanvas().style.cursor = "grab";
+    });
+    map.on("mouseleave", POINT_LAYER_ID, () => {
+      if (this._draggingIndex === null) this._map.getCanvas().style.cursor = this._active ? "crosshair" : "";
+    });
+
+    this._onKeyDown = (event) => {
+      if (!this._active || this._selectedIndex === null) return;
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      // Don't eat Backspace while the note-text form (or anything else on
+      // the page) actually has focus for typing.
+      if (["INPUT", "TEXTAREA"].includes(document.activeElement?.tagName)) return;
+      event.preventDefault();
+      this._points.splice(this._selectedIndex, 1);
+      this._selectedIndex = null;
+      this._render();
+    };
+    document.addEventListener("keydown", this._onKeyDown);
+
     // setStyle() (switching Online/Offline) tears down all sources/layers —
     // same re-add-on-reload pattern as radar.js/gpx.js.
     map.on("style.load", () => {
@@ -83,6 +147,10 @@ export class MeasureControl {
 
   onRemove() {
     this._map.off("click", this._onClick);
+    this._map.off("mousedown", POINT_LAYER_ID, this._onVertexMouseDown);
+    this._map.off("mousemove", this._onMouseMove);
+    this._map.off("mouseup", this._onMouseUp);
+    document.removeEventListener("keydown", this._onKeyDown);
     this._removeLayers();
     this._container.remove();
   }
@@ -129,11 +197,14 @@ export class MeasureControl {
       button.classList.toggle("active", button.dataset.mode === mode);
     });
     this._points = [];
+    this._selectedIndex = null;
     this._render();
   }
 
   _clear() {
     this._points = [];
+    this._selectedIndex = null;
+    this._draggingIndex = null;
     this._render();
   }
 
@@ -167,7 +238,12 @@ export class MeasureControl {
       type: "circle",
       source: SOURCE_ID,
       filter: ["==", ["get", "role"], "vertex"],
-      paint: { "circle-radius": 4, "circle-color": "#fff", "circle-stroke-color": "#1e5fbf", "circle-stroke-width": 2 },
+      paint: {
+        "circle-radius": ["case", ["get", "selected"], 6, 4],
+        "circle-color": ["case", ["get", "selected"], "#ffd43b", "#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
@@ -200,9 +276,9 @@ export class MeasureControl {
     const source = this._map.getSource(SOURCE_ID);
     if (!source) return;
 
-    const pointFeatures = this._points.map((coord) => ({
+    const pointFeatures = this._points.map((coord, index) => ({
       type: "Feature",
-      properties: { role: "vertex" },
+      properties: { role: "vertex", index, selected: index === this._selectedIndex },
       geometry: { type: "Point", coordinates: coord },
     }));
     const geometry = this._currentShapeGeometry();