Phase 4 M2: Interactive Leaflet map with route polyline and entry markers

themes/intotheeast/templates/map.html.twig

@@ -0,0 +1,86 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% set tracker_page = grav.pages.find('/tracker') %}
+{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}
+
+{% set map_entries = [] %}
+{% for entry in all_entries %}
+    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
+        {% set hero_url = null %}
+        {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
+            {% set hero_url = entry.media[entry.header.hero_image].cropResize(240, 135).url %}
+        {% elseif entry.media.images|length > 0 %}
+            {% set hero_url = entry.media.images|first.cropResize(240, 135).url %}
+        {% endif %}
+        {% set map_entries = map_entries|merge([{
+            'lat': entry.header.lat|number_format(6, '.', ''),
+            'lng': entry.header.lng|number_format(6, '.', ''),
+            'title': entry.title,
+            'date': entry.date|date('d M Y'),
+            'url': entry.url,
+            'hero': hero_url
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+<div class="map-container" id="trip-map"></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 ENTRIES = {{ map_entries|json_encode|raw }};
+
+var map = L.map('trip-map', { minZoom: 2, maxZoom: 18 });
+
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+if (ENTRIES.length === 0) {
+    map.setView([20, 0], 2);
+    var emptyDiv = document.createElement('div');
+    emptyDiv.className = 'map-empty';
+    emptyDiv.textContent = 'No locations yet — entries with GPS will appear here.';
+    document.getElementById('trip-map').appendChild(emptyDiv);
+} else {
+    var latLngs = ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
+
+    // Route polyline
+    L.polyline(latLngs, { color: '#0066cc', weight: 3, opacity: 0.7 }).addTo(map);
+
+    // Markers
+    ENTRIES.forEach(function(entry, i) {
+        var isLatest = (i === ENTRIES.length - 1);
+        var size = isLatest ? 18 : 12;
+        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 4px rgba(0,0,0,0.4);' + (isLatest ? 'box-shadow:0 0 0 3px rgba(0,102,204,0.3),0 1px 4px rgba(0,0,0,0.4);' : '') + '"></div>',
+            iconSize: [size, size],
+            iconAnchor: [size/2, size/2],
+            popupAnchor: [0, -(size/2 + 4)]
+        });
+
+        var popupContent = '<div style="font-family:-apple-system,sans-serif;width:180px;">';
+        if (entry.hero) {
+            popupContent += '<img src="' + entry.hero + '" style="width:100%;height:100px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;" alt="">';
+        }
+        popupContent += '<div style="font-size:0.75rem;color:#666;margin-bottom:2px;">📅 ' + entry.date + '</div>';
+        popupContent += '<div style="font-weight:600;font-size:0.9rem;margin-bottom:8px;">' + entry.title + '</div>';
+        popupContent += '<a href="' + entry.url + '" style="color:#0066cc;font-size:0.85rem;text-decoration:none;">Read entry →</a>';
+        popupContent += '</div>';
+
+        L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
+            .addTo(map)
+            .bindPopup(popupContent, { maxWidth: 200 });
+    });
+
+    // Fit bounds with padding
+    var bounds = L.latLngBounds(latLngs);
+    map.fitBounds(bounds, { padding: [40, 40] });
+}
+</script>
+{% endblock %}

themes/intotheeast/templates/partials/base.html.twig

@@ -6,11 +6,13 @@
     <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
     <link rel="stylesheet" href="{{ url('theme://css/style.css') }}">
 </head>
-<body>
+<body class="{% if page.template == 'map' %}map-page{% endif %}">
     <header class="site-header">
         <a class="site-title" href="{{ base_url_absolute }}">{{ site.title }}</a>
         <nav class="site-nav">
             <a href="{{ base_url_absolute }}/tracker">Journal</a>
+            <a href="{{ base_url_absolute }}/map">Map</a>
+            <a href="{{ base_url_absolute }}/stats">Stats</a>
         </nav>
     </header>
     <main class="site-main">