trails/openspec/specs/map-display/spec.md

ADDED Requirements

Requirement: Map rendering with OSM tiles

The Planner and Journal SHALL render interactive maps using Leaflet with OpenStreetMap tiles as the default base layer.

Scenario: Default map view

• WHEN a user opens the Planner or a route view in the Journal
• THEN an interactive map is displayed with OpenStreetMap tiles centered on the route or a default location (Germany)

Requirement: Base layer switching

The map SHALL support switching between multiple base tile layers.

Scenario: Switch to OpenTopoMap

• WHEN a user selects "OpenTopoMap" from the layer switcher
• THEN the map tiles change to topographic tiles from OpenTopoMap

Scenario: Available base layers

• WHEN a user opens the layer switcher
• THEN the options include OpenStreetMap, OpenTopoMap, and CyclOSM

Requirement: Waypoint editing on map

The Planner map SHALL allow users to add, move, and delete waypoints by interacting with the map.

Scenario: Add waypoint by clicking

• WHEN a user clicks on the map
• THEN a new waypoint is added at the clicked location and synced via Yjs

Scenario: Move waypoint by dragging

• WHEN a user drags an existing waypoint marker
• THEN the waypoint coordinates update and sync via Yjs

Scenario: Delete waypoint

• WHEN a user right-clicks a waypoint and selects "Delete"
• THEN the waypoint is removed and the change syncs via Yjs

Requirement: Route visualization

The map SHALL display the computed route as an interactive, optionally color-coded polyline on the map.

Scenario: Display route

• WHEN BRouter returns a route GeoJSON
• THEN the route is rendered as a polyline on the map, colored according to the active color mode

Scenario: Route updates on waypoint change

• WHEN a waypoint is added, moved, or deleted
• THEN the route polyline updates after BRouter recomputes the route

Scenario: Ghost marker on hover

• WHEN the cursor is within 15 pixels of the route polyline
• THEN a transient ghost marker appears at the nearest route point, which can be clicked or dragged to insert a waypoint (see route-splitting and route-drag-reshape specs)

Requirement: Elevation profile display

The Planner SHALL display an elevation profile chart for the current route.

Scenario: Show elevation profile

• WHEN a route is computed
• THEN an elevation profile chart is displayed below the map showing distance vs elevation with total ascent/descent statistics

Requirement: Planner home page

The Planner home page SHALL provide a clear call-to-action to create a new planning session and a link back to the home page from within sessions.

Scenario: Home page CTA

• WHEN a user visits the Planner home page
• THEN a prominent "Start Planning" button is visible that links to /new

Scenario: Session home link

• WHEN a user is in a planning session
• THEN the header contains a link back to the Planner home page

Requirement: Map cursor rendering

Other participants' cursors on the map SHALL be clearly visible with proper styling.

Scenario: Cursor appearance

• WHEN another participant moves their mouse on the map
• THEN a colored pointer icon with their name tag appears at the cursor position

Scenario: Cursor does not obscure map controls

• WHEN cursors are rendered
• THEN they appear below map controls (zoom, layer switcher) in z-index

Requirement: Map components used in journal app

The @trails-cool/map package's MapView and RouteLayer components SHALL be used in the journal app for route previews, in addition to the planner.

Scenario: Journal uses shared map components

• WHEN the journal renders a route map preview or detail map
• THEN it uses MapView and RouteLayer from @trails-cool/map
• AND no map code is duplicated between planner and journal

Requirement: Map polygon drawing

The Planner map SHALL support drawing and displaying no-go area polygons.

Scenario: Polygon tool

• WHEN a user activates the no-go area tool
• THEN they can draw a polygon by clicking points on the map

Scenario: Polygon display

• WHEN no-go areas exist in the session
• THEN they are rendered as semi-transparent red polygons on the map