Two-way trail marker/list selection on geography map #83

New Issue

2026-05-06T21:23:48Z

spikerj commented

2026-05-06 21:23:48 +00:00

Summary

Add two-way binding between map cluster markers and the trail list sidebar in the geography explorer's state trail view.

Problem

Previously, clicking a trail name in the right-hand list would center the map and render the trail's GeoJSON line — but clicking a single marker on the map did nothing beyond showing a popup. There was no way to go from map → list.

Solution

`CountryMapComponent`

Added trailMarkerClicked output that emits the trailId when a single cluster marker is clicked
Each marker in renderClusterMarkers now has a click handler using the existing ClusterMarkerData.trailId field

`StateTrailViewComponent`

Added onMarkerClicked(trailId) handler that:
- Selects the trail (sets selectedTrailId signal)
- Fetches and renders the trail's geometry on the map
- Scrolls the sidebar list to the matching trail card with smooth animation
Extracted shared showTrailGeometry() method used by both list-click and marker-click paths
Added data-trail-id attribute on each mat-card for scroll targeting via scrollIntoView()

Behavior

List → Map: Click card → pan map + show trail line (existing, unchanged)
Map → List: Click single marker → show trail line + scroll sidebar to card + highlight selection (new)
Click again on either side to deselect/clear (toggle behavior preserved)

Files Changed

country-map.component.ts — added output + marker click handler
state-trail-view.component.ts — added onMarkerClicked, showTrailGeometry, scrollToTrailCard
state-trail-view.component.html — wired (trailMarkerClicked) output + data-trail-id attribute

## Summary Add two-way binding between map cluster markers and the trail list sidebar in the geography explorer's state trail view. ## Problem Previously, clicking a trail name in the right-hand list would center the map and render the trail's GeoJSON line — but clicking a single marker on the map did nothing beyond showing a popup. There was no way to go from map → list. ## Solution ### `CountryMapComponent` - Added `trailMarkerClicked` output that emits the `trailId` when a single cluster marker is clicked - Each marker in `renderClusterMarkers` now has a click handler using the existing `ClusterMarkerData.trailId` field ### `StateTrailViewComponent` - Added `onMarkerClicked(trailId)` handler that: - Selects the trail (sets `selectedTrailId` signal) - Fetches and renders the trail's geometry on the map - Scrolls the sidebar list to the matching trail card with smooth animation - Extracted shared `showTrailGeometry()` method used by both list-click and marker-click paths - Added `data-trail-id` attribute on each `mat-card` for scroll targeting via `scrollIntoView()` ### Behavior - **List → Map**: Click card → pan map + show trail line (existing, unchanged) - **Map → List**: Click single marker → show trail line + scroll sidebar to card + highlight selection (new) - Click again on either side to deselect/clear (toggle behavior preserved) ## Files Changed - `country-map.component.ts` — added output + marker click handler - `state-trail-view.component.ts` — added `onMarkerClicked`, `showTrailGeometry`, `scrollToTrailCard` - `state-trail-view.component.html` — wired `(trailMarkerClicked)` output + `data-trail-id` attribute

spikerj closed this issue

2026-05-06 21:23:51 +00:00

spikerj referenced this issue

2026-06-28 21:37:30 +00:00

[Enhancement] Remove deprecated /api/CSharpCodeRunner alias route (follow-up to #285) #286

spikerj referenced this issue

2026-06-30 14:54:52 +00:00

[Enhancement] Rename CSharpCodeRunnerController to a language-agnostic name #285

spikerj referenced this issue

2026-07-05 06:46:23 +00:00

[CI] SonarQube Scan workflow red on every spikersoft-angular run — CE task fails server-side during report processing #344

Sign in to join this conversation.