From 87a782ae126225c2405a293be46980f66a8ae592 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 21:46:23 +0200
Subject: [PATCH] feat: migrate full map page to MapLibre GL with animated
 journey line

---
 themes/intotheeast/templates/map.html.twig | 133 ++++++++++++---------
 1 file changed, 74 insertions(+), 59 deletions(-)

diff --git a/themes/intotheeast/templates/map.html.twig b/themes/intotheeast/templates/map.html.twig
index 1901756..19333a4 100644
--- a/themes/intotheeast/templates/map.html.twig
+++ b/themes/intotheeast/templates/map.html.twig
@@ -34,73 +34,88 @@
 
 <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 src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.1.2/gpx.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
 
 <script>
-var ENTRIES = {{ map_entries|json_encode|raw }};
+var ENTRIES  = {{ map_entries|json_encode|raw }};
+var GPX_URLS = {{ gpx_urls|json_encode|raw }};
 
-var map = L.map('trip-map', { minZoom: 2, maxZoom: 18 });
-
-L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
-    maxZoom: 20,
-    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
-}).addTo(map);
-
-// GPX route tracks
-const gpxUrls = {{ gpx_urls|json_encode|raw }};
-gpxUrls.forEach(url => {
-    new L.GPX(url, {
-        async: true,
-        polyline_options: { color: '#1F6B5A', weight: 2, opacity: 0.7 },
-        marker_options: { startIconUrl: null, endIconUrl: null, shadowUrl: null }
-    }).addTo(map);
+var map = new maplibregl.Map({
+    container: 'trip-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2
 });
 
+map.addControl(new maplibregl.NavigationControl(), 'top-right');
+
 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)]; });
+    var empty = document.createElement('div');
+    empty.className = 'map-empty';
+    empty.textContent = 'No locations yet — entries with GPS will appear here.';
+    document.getElementById('trip-map').appendChild(empty);
+}
 
-    // Route polyline
-    L.polyline(latLngs, { color: '#1F6B5A', 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 ? '#155244' : '#1F6B5A';
-
-        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(31,107,90,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:#1F6B5A;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 });
+map.on('load', function () {
+    /* ── GPX tracks ──────────────────────────────────────────── */
+    GPX_URLS.forEach(function (url, idx) {
+        fetch(url)
+            .then(function (r) { return r.text(); })
+            .then(function (text) {
+                var xml     = new DOMParser().parseFromString(text, 'text/xml');
+                var geojson = toGeoJSON.gpx(xml);
+                var sid     = 'gpx-' + idx;
+                map.addSource(sid, { type: 'geojson', data: geojson });
+                map.addLayer({
+                    id: sid + '-line', type: 'line', source: sid,
+                    layout: { 'line-join': 'round', 'line-cap': 'round' },
+                    paint:  { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
+                });
+            })
+            .catch(function (err) { console.warn('GPX load failed:', url, err); });
     });
 
-    // Fit bounds with padding
-    var bounds = L.latLngBounds(latLngs);
-    map.fitBounds(bounds, { padding: [40, 40] });
-}
+    if (ENTRIES.length === 0) return;
+
+    /* ── Markers ─────────────────────────────────────────────── */
+    var bounds = new maplibregl.LngLatBounds();
+    var coords = [];
+
+    ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        coords.push(lngLat);
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(isLatest);
+
+        var popupHtml = '<div style="min-width:160px;max-width:200px;">';
+        if (entry.hero) {
+            popupHtml += '<img src="' + entry.hero + '" alt="" style="width:100%;height:80px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;">';
+        }
+        popupHtml += '<div style="font-size:0.75rem;color:var(--color-ink-muted);margin-bottom:2px;">📅 ' + entry.date + '</div>';
+        popupHtml += '<div style="font-weight:600;font-size:0.9rem;margin-bottom:8px;color:var(--color-ink);">' + entry.title + '</div>';
+        popupHtml += '<a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.85rem;text-decoration:none;">Read entry →</a>';
+        popupHtml += '</div>';
+
+        new maplibregl.Marker({ element: el })
+            .setLngLat(lngLat)
+            .setPopup(new maplibregl.Popup({ offset: 10, maxWidth: '220px' }).setHTML(popupHtml))
+            .addTo(map);
+    });
+
+    /* ── Journey line ────────────────────────────────────────── */
+    MapUtils.addJourneyLine(map, coords, 'journey');
+
+    /* ── Fit bounds ──────────────────────────────────────────── */
+    if (ENTRIES.length === 1) {
+        map.jumpTo({ center: coords[0], zoom: 10 });
+    } else {
+        map.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+});
 </script>
 {% endblock %}