trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
trails/openspec/changes/archive/2026-04-12-elevation-map-interaction/tasks.md
Ullrich Schäfer 471ecb2309
Archive elevation-map-interaction, sync spec to main 
Synced new spec (chart ↔ map interaction, mobile touch, iOS safe area,
responsive header) to openspec/specs/elevation-map-interaction/.

All 4 artifacts complete. All 14 tasks complete.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-12 19:43:03 +02:00

1.4 KiB
Raw Permalink Blame History

1. Route Hover → Chart Highlight

  • 1.1 Add invisible interactive overlay polyline on the route in PlannerMap for hover detection (avoids adding listeners to every ColoredRoute segment)
  • 1.2 On polyline hover, find closest route coordinate index and compute cumulative distance
  • 1.3 Pass highlightChartDistance up from PlannerMap to SessionView
  • 1.4 Accept highlightDistance prop in ElevationChart, find closest point by distance, draw crosshair

2. Chart Click → Map Pan

  • 2.1 Add click handler to ElevationChart canvas — convert x-position to route coordinate
  • 2.2 Call onClickPosition([lat, lon]) callback to pan the map
  • 2.3 Wire the callback through SessionView to call map.panTo() via the exposed map ref

3. Chart Drag-Select → Map Zoom

  • 3.1 Add mousedown/mousemove/mouseup handlers for drag selection on ElevationChart canvas
  • 3.2 Draw semi-transparent overlay rectangle during drag
  • 3.3 On mouseup, compute bounding box of route coordinates in the selected distance range
  • 3.4 Call onDragSelect(bounds) callback to zoom the map via map.fitBounds()
  • 3.5 Show "Reset zoom" button after drag-zoom, clicking it returns to full route bounds

4. Testing

  • 4.1 E2E test: hover chart → map dot appears (existing, verify still works)
  • 4.2 E2E test: click chart → map pans (verify map center changes)