trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add road type color mode to route visualization

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

82
openspec/specs/road-type-coloring/spec.md Normal file
View file

@ -0,0 +1,82 @@
## Purpose
Road type visualization for route planning. Extracts OSM highway classification from BRouter tiledesc data and provides a color mode that shows road type on both the map polyline and elevation chart.
## Requirements
### Requirement: Highway tag extraction from BRouter
The routing pipeline SHALL extract `highway=*` tags from BRouter tiledesc messages and include them in the enriched route data as a per-point `highways` array.
#### Scenario: Highway tags present in BRouter response
- **WHEN** BRouter returns a route with tiledesc messages containing `highway=*` in the WayTags column
- **THEN** the `EnrichedRoute` SHALL include a `highways` string array with one entry per coordinate point
#### Scenario: Highway tags missing from BRouter response
- **WHEN** BRouter returns a route without `highway=*` tags in WayTags
- **THEN** each entry in the `highways` array SHALL be `"unknown"`
#### Scenario: Highway data stored in Yjs
- **WHEN** a route is computed and enriched route data is received
- **THEN** the highway array SHALL be stored in Yjs `routeData` as a JSON-serialized string under the key `"highways"`
### Requirement: Road type color palette
The Planner SHALL define a color mapping for OSM highway classifications, grouped by road category.
#### Scenario: Major roads colored with warm tones
- **WHEN** a route segment has highway type `motorway`, `trunk`, or `primary`
- **THEN** the segment SHALL be colored in red/orange tones
#### Scenario: Urban roads colored with neutral tones
- **WHEN** a route segment has highway type `secondary`, `tertiary`, `residential`, or `unclassified`
- **THEN** the segment SHALL be colored in gray/blue tones
#### Scenario: Paths and cycling infrastructure colored with green tones
- **WHEN** a route segment has highway type `cycleway`, `path`, `footway`, `track`, or `bridleway`
- **THEN** the segment SHALL be colored in green tones
#### Scenario: Unknown highway type
- **WHEN** a route segment has an unrecognized or missing highway value
- **THEN** the segment SHALL be colored with a neutral default color
### Requirement: Road type map polyline coloring
The Planner map SHALL color the route polyline by highway classification when road type mode is active.
#### Scenario: Road type coloring on map
- **WHEN** the color mode is set to "highway"
- **THEN** the route polyline on the map SHALL be colored segment-by-segment using the road type color palette
#### Scenario: Fallback when highway data unavailable
- **WHEN** the color mode is set to "highway" but no highway data is available
- **THEN** the route SHALL fall back to plain color mode
### Requirement: Road type elevation chart coloring
The elevation chart SHALL color segments by highway classification when road type mode is active.
#### Scenario: Road type chart rendering
- **WHEN** the color mode is set to "highway"
- **THEN** the elevation chart line and fill segments SHALL be colored using the road type color palette, matching the map polyline
### Requirement: Road type legend
The elevation chart SHALL display a legend for road type mode showing the highway types present in the route.
#### Scenario: Road type legend display
- **WHEN** the color mode is "highway" and highway data is available
- **THEN** a legend SHALL show colored swatches with highway type labels for the types present in the current route, up to 6 entries with a "+N" overflow indicator
### Requirement: Road type hover information
The elevation chart hover label SHALL include the highway type when in road type mode.
#### Scenario: Road type hover label
- **WHEN** hovering the elevation chart in "highway" mode
- **THEN** the label SHALL show elevation, distance, and highway type name (e.g., "340m · 12.3km · cycleway")
### Requirement: Road type i18n
All user-facing strings for the road type color mode SHALL be translated in English and German.
#### Scenario: English labels
- **WHEN** the app language is English
- **THEN** the color mode dropdown SHALL show "Road Type" and the chart title SHALL show "Road Type Profile"
#### Scenario: German labels
- **WHEN** the app language is German
- **THEN** the color mode dropdown SHALL show "Straßentyp" and the chart title SHALL show "Straßentypenprofil"

22
openspec/specs/route-coloring/spec.md
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")