m038
0bb3b3bcce
Moved from user/ repo: milestone specs, design spec, QA docs, research, posting pipeline, bugs log, UI redesign plan. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3.2 KiB
Milestone 4 Spec — Mini-Map on Tracker Feed
Goal: Embed a compact interactive map above the entry feed on the tracker page, showing recent entry positions and the current location, giving readers immediate spatial context.
User Stories
- As a reader landing on the tracker feed, I want to immediately see where Mischa currently is without having to navigate to the full map page.
- As a reader, I want to click a marker on the mini-map and jump to that entry.
- As a traveler (Mischa), I want the feed page to feel like a live travel dashboard, not just a blog list.
Feature Details
4.1 — Mini-Map Placement
Where: At the top of tracker.html.twig, before the entry card list.
Height: 240px on mobile, 320px on desktop.
Width: Full width of content column (max 680px).
Tile layer: Same OpenStreetMap tiles as Milestone 2.
No duplicate Leaflet load: Leaflet is already loaded on the map page; on the tracker page, load it only if needed. Check with if (typeof L === 'undefined') before initializing. (In practice, the CSS and JS are loaded unconditionally from the same CDN — caching handles it.)
4.2 — What's Shown
- All entries with GPS shown as small markers (not just recent 10 — the map auto-fits to bounds)
- Route line connecting them in chronological order (same style as Milestone 2)
- Most recent marker highlighted (larger, brighter)
- No popups by default — tapping a marker links directly to the entry (no popup intermediary for the mini-map, keeps it fast)
- Map auto-fits bounds to all markers; if only 1 marker, zoom to 10
4.3 — Interaction
- Tap/click marker → navigate to entry URL directly
- Map is pannable and zoomable (same touch handling as M2)
- "View full map →" link below the mini-map → navigates to
/map
4.4 — Entry Data
Same JSON serialization as Milestone 2 (embed TRACKER_ENTRIES in the Twig template). This can reuse the same data variable name if both map and tracker pages use the same template pattern.
4.5 — Empty State
If no entries have GPS coordinates:
- Mini-map hidden entirely (don't show an empty world map on the feed page)
- Entry list still shows normally
Out of Scope (Milestone 4)
- Clustering markers at low zoom
- Filtering by date
- Satellite/terrain tile layers
- Search on the mini-map
Acceptance Criteria
- Mini-map appears above entry cards on the tracker feed page
- All entries with valid lat/lng appear as markers on the mini-map
- Route line connects markers in date order
- Most recent marker is visually distinct
- Clicking/tapping a marker navigates directly to that entry
- "View full map →" link appears below the mini-map and routes to
/map - If no entries have GPS, mini-map is hidden and entry list shows normally
- Mini-map is pannable and zoomable by touch on mobile
- Mini-map does not block page scrolling on mobile (map is fixed height, not full-screen)
Design Notes
- Mini-map border-radius should match the card design (8px)
- Light 1px border or subtle shadow to separate from content
- "View full map →" in small muted text, right-aligned
- Keep the mini-map lightweight: same Leaflet instance, no additional plugins