trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
trails/openspec/changes/elevation-map-interaction/tasks.md
Ullrich Schäfer 3345ef127e
Add bidirectional elevation chart ↔ map interaction 
Three new interactions:

1. Route hover → chart: Invisible interactive polyline (weight 20,
   opacity 0) detects mouse hover on the route, computes cumulative
   distance, and highlights the corresponding position on the chart.

2. Chart click → map pan: Clicking the elevation chart pans the map
   to center on that point along the route. Uses 5px threshold to
   distinguish from drag.

3. Chart drag-select → map zoom: Dragging a range on the chart shows
   a blue selection overlay, then zooms the map to fit the route
   coordinates in that range. "Reset zoom" button appears to restore
   the full route view.

State flow avoids feedback loops: external highlights (from map hover)
set the chart crosshair without re-emitting onHover back to the map.

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

1.4 KiB
Raw 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)