From 1251086b69174ad9890b2586102fb1a0d757db8b Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Thu, 18 Jun 2026 01:13:47 +0200
Subject: [PATCH] Phase 4 M4: Mini-map on tracker feed with route line and
 entry navigation

---
 .../intotheeast/templates/tracker.html.twig   | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/themes/intotheeast/templates/tracker.html.twig b/themes/intotheeast/templates/tracker.html.twig
index 0ef7e00..a25f324 100644
--- a/themes/intotheeast/templates/tracker.html.twig
+++ b/themes/intotheeast/templates/tracker.html.twig
@@ -1,8 +1,67 @@
 {% extends 'default.html.twig' %}
 
 {% block content %}
+{% set entries = page.children %}
+
+{# Collect GPS entries for mini-map #}
+{% set map_entries = [] %}
+{% for entry in entries %}
+    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
+        {% set map_entries = map_entries|merge([{
+            'lat': entry.header.lat,
+            'lng': entry.header.lng,
+            'title': entry.title,
+            'url': entry.url
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+{% if map_entries|length > 0 %}
+<div class="feed-map-wrap">
+    <div class="feed-map" id="feed-map"></div>
+    <a class="feed-map-link" href="{{ base_url_absolute }}/map">View full map →</a>
+</div>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
+<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
+<script>
+var FEED_ENTRIES = {{ map_entries|json_encode|raw }};
+
+var map = L.map('feed-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+
+var latLngs = FEED_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
+
+if (latLngs.length > 1) {
+    L.polyline(latLngs, { color: '#0066cc', weight: 3, opacity: 0.7 }).addTo(map);
+}
+
+FEED_ENTRIES.forEach(function(entry, i) {
+    var isLatest = (i === FEED_ENTRIES.length - 1);
+    var size = isLatest ? 16 : 10;
+    var color = isLatest ? '#0044aa' : '#0066cc';
+    var icon = L.divIcon({
+        className: '',
+        html: '<div style="width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.35);cursor:pointer;"></div>',
+        iconSize: [size, size],
+        iconAnchor: [size/2, size/2]
+    });
+    L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
+        .addTo(map)
+        .on('click', function() { window.location = entry.url; });
+});
+
+if (latLngs.length === 1) {
+    map.setView(latLngs[0], 10);
+} else {
+    map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
+}
+</script>
+{% endif %}
+
 <div class="feed">
-    {% set entries = page.children %}
     {% if entries|length > 0 %}
         {% for entry in entries %}
         <article class="entry-card">