92 lines
3.2 KiB
Markdown
92 lines
3.2 KiB
Markdown
# 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
|
|
|
|
1. Mini-map appears above entry cards on the tracker feed page
|
|
2. All entries with valid lat/lng appear as markers on the mini-map
|
|
3. Route line connects markers in date order
|
|
4. Most recent marker is visually distinct
|
|
5. Clicking/tapping a marker navigates directly to that entry
|
|
6. "View full map →" link appears below the mini-map and routes to `/map`
|
|
7. If no entries have GPS, mini-map is hidden and entry list shows normally
|
|
8. Mini-map is pannable and zoomable by touch on mobile
|
|
9. 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
|