trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
trails/openspec/changes/journal-route-previews/proposal.md
Ullrich Schäfer 6aac8bd885
Add map previews to journal route and activity pages 
- Route/activity list pages: map thumbnails with route drawn on OSM tiles
- Route/activity detail pages: interactive Leaflet map with zoom controls
- Server: expose GeoJSON from PostGIS via ST_AsGeoJSON (simplified for lists)
- RouteMapThumbnail component: shared, supports thumbnail and interactive modes
- Placeholder shown for routes/activities without geometry
- Archive journal-route-previews change, sync specs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 09:42:07 +01:00

1.7 KiB
Raw Blame History

Why

The journal's route and activity pages show only text (name, distance, elevation) with no visual representation of the route. Users can't tell routes apart without clicking into each one. Every other route planning app shows a map preview — it's table-stakes UX.

The PostGIS geom column is already populated, and @trails-cool/map provides MapView + RouteLayer components. The infrastructure exists, just needs wiring up.

What Changes

  • Route/activity list pages: Add static map thumbnails with the route drawn, alongside existing stats
  • Route/activity detail pages: Add interactive Leaflet map with the route displayed (read-only, uses MapView + RouteLayer)
  • Server: Expose route geometry as GeoJSON via ST_AsGeoJSON() in loaders
  • Shared: No new packages — reuse @trails-cool/map

Capabilities

New Capabilities

  • route-preview: Map previews on journal list and detail pages (static thumbnails on lists, interactive maps on detail)

Modified Capabilities

  • route-management: Loaders now return GeoJSON geometry for rendering
  • map-display: @trails-cool/map components used in the journal app (previously planner-only)

Impact

  • apps/journal/app/routes/routes._index.tsx — add map thumbnails to route cards
  • apps/journal/app/routes/routes.$id.tsx — add interactive map to detail page
  • apps/journal/app/routes/activities._index.tsx — add map thumbnails to activity cards
  • apps/journal/app/routes/activities.$id.tsx — add interactive map to detail page
  • apps/journal/app/lib/routes.server.ts — expose GeoJSON from PostGIS
  • apps/journal/app/lib/activities.server.ts — expose GeoJSON from PostGIS