# 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