feat: map measuring tape (#452)

[fatherlinux]

Summary

• Adds a two-point measuring tape to the map, resolving the "how far apart are these POIs?" problem from [Feature]: Map Scale Key #452.
• A ruler toggle joins the existing top-left control cluster (zoom / locate / satellite / measure).
• Activating it drops two draggable endpoints A and B straddling the viewport center, joined by a dashed line with a live distance label.
• Endpoints are anchored to lat/lng — they stay glued through zoom/pan; distance is geodesic (map.distance) and only changes when an endpoint moves.
• Label shows imperial primary (ft / mi) with metric secondary (m / km), shrink-wrapped and centered on the midpoint.
• Toggling off removes all layers; toggling on resets to center.

Frontend-only: frontend/src/components/Map.jsx + frontend/src/App.css. No backend or DB changes. Spec/plan under .specify/specs/032-measure-tape/.

Closes #452

Test plan

• ./run.sh build passes (frontend compiles in-image)
• Human-verified locally on :8082 — toggle, drag, live distance, zoom/pan stability, toggle-off cleanup, units, label sizing
• Playwright smoke suite (./run.sh test, run on deploy)

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request implements a map measuring tape feature that allows users to measure the distance between two draggable endpoints on the map. It adds a toggle button to the map controls, introduces the MeasureTape component to manage the markers, polyline, and distance tooltip, and includes the necessary styling and specification documents. The review feedback highlights two key improvements: refactoring the ZoomLocateControl component's effect hook with a ref to prevent unnecessary re-renders when toggle states change, and disabling click propagation on the measurement handles to prevent unintended map zoom and POI deselection.

[gemini-code-assist]

The ZoomLocateControl is currently recreated and re-added to the map every time measureMode or useSatellite changes because they are included in the useEffect dependency array. This causes the entire control cluster to flash and re-render in the DOM, which can disrupt accessibility (focus states) and degrade performance.

To prevent this, you can store the toggle callbacks in a useRef and keep the control's creation effect stable by only depending on map and handleLocate.

Here is how you can refactor it:

  const callbacksRef = useRef({ onSatelliteToggle, onMeasureToggle });
  useEffect(() => {
    callbacksRef.current = { onSatelliteToggle, onMeasureToggle };
  });

  useEffect(() => {
    // ... inside ZoomLocateControlClass onAdd:
    L.DomEvent.on(satelliteToggle, 'click', function(e) {
      L.DomEvent.preventDefault(e);
      if (callbacksRef.current.onSatelliteToggle) {
        callbacksRef.current.onSatelliteToggle();
      }
    });

    L.DomEvent.on(measure, 'click', function(e) {
      L.DomEvent.preventDefault(e);
      if (callbacksRef.current.onMeasureToggle) {
        callbacksRef.current.onMeasureToggle();
      }
    });
    // ...
  }, [map, handleLocate]);

[gemini-code-assist]

Clicking or double-clicking on the measurement handles (A and B) will propagate to the map. This causes the active POI in the sidebar to be deselected (via the map's click handler) and the map to zoom in (via double-click).

To prevent this, disable click propagation on the marker DOM elements once they are added to the map.

Suggested change

	const markerA = L.marker(startA, { draggable: true, icon: makeHandle('A'), zIndexOffset: 1200, keyboard: false }).addTo(map);
	const markerB = L.marker(startB, { draggable: true, icon: makeHandle('B'), zIndexOffset: 1200, keyboard: false }).addTo(map);
	const markerA = L.marker(startA, { draggable: true, icon: makeHandle('A'), zIndexOffset: 1200, keyboard: false }).addTo(map);
	const markerB = L.marker(startB, { draggable: true, icon: makeHandle('B'), zIndexOffset: 1200, keyboard: false }).addTo(map);
	if (markerA._icon) L.DomEvent.disableClickPropagation(markerA._icon);
	if (markerB._icon) L.DomEvent.disableClickPropagation(markerB._icon);