Add road type color mode to route visualization

Extract highway=* tags from BRouter tiledesc messages alongside surface
data and add a new "Road Type" color mode that colors the route polyline
and elevation chart by OSM highway classification (cycleway, residential,
path, etc.). Includes color palette, legend, hover labels, i18n (EN+DE),
unit tests for tag extraction, and E2E tests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-11 03:41:49 +02:00
parent f4f0cbc4c8
commit 1e2f6beded
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
18 changed files with 690 additions and 21 deletions

View file

@ -1,6 +1,6 @@
## Purpose
Multi-mode route visualization (plain, elevation gradient, surface type, grade) with session-synced color mode selection. Both the route polyline on the map and the elevation chart reflect the selected color mode.
Multi-mode route visualization (plain, elevation gradient, surface type, grade, road type) with session-synced color mode selection. Both the route polyline on the map and the elevation chart reflect the selected color mode.
## Requirements
@ -27,6 +27,14 @@ The Planner SHALL support multiple route color modes that visualize per-point da
- **WHEN** a user selects the "Grade" color mode
- **THEN** the route polyline is colored by steepness: green (<3%), yellow (<6%), orange (<10%), red (<15%), dark red (15%+)
#### Scenario: Road type color mode
- **WHEN** a user selects the "Road Type" color mode and highway data is available from BRouter tiledesc
- **THEN** the route polyline is colored by OSM highway classification using the road type color palette
#### Scenario: Road type data unavailable
- **WHEN** a user selects "Road Type" color mode but BRouter did not return highway data
- **THEN** the route falls back to plain color mode
### Requirement: Color mode toggle
The Planner SHALL provide a UI control to switch between route color modes.
@ -34,6 +42,10 @@ The Planner SHALL provide a UI control to switch between route color modes.
- **WHEN** a route is displayed
- **THEN** a color mode select dropdown is visible inline with the elevation chart title
#### Scenario: Road type option in toggle
- **WHEN** the color mode dropdown is displayed
- **THEN** it SHALL include a "Road Type" option alongside Plain, Elevation, Surface, and Grade
#### Scenario: Color mode persists in session
- **WHEN** a user changes the color mode
- **THEN** the selection is stored in the Yjs routeData map and synced to all participants
@ -72,6 +84,10 @@ The elevation chart SHALL display a legend matching the active color mode.
- **WHEN** the color mode is "Surface"
- **THEN** the legend shows the surface types present in the route with colored swatches
#### Scenario: Road type legend
- **WHEN** the color mode is "Road Type"
- **THEN** the legend shows the highway types present in the route with colored swatches, up to 6 entries
### Requirement: Contextual hover information
The elevation chart hover label SHALL show mode-specific information.
@ -82,3 +98,7 @@ The elevation chart hover label SHALL show mode-specific information.
#### Scenario: Surface hover
- **WHEN** hovering the chart in "Surface" mode
- **THEN** the label shows elevation, distance, and surface type name (e.g. "340m · 12.3km · asphalt")
#### Scenario: Road type hover
- **WHEN** hovering the chart in "Road Type" mode
- **THEN** the label shows elevation, distance, and highway type name (e.g. "340m · 12.3km · cycleway")