From a363052f5fb7ec538df203d57f42385fca825294 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 21:57:12 +0200
Subject: [PATCH] feat: migrate trip overview map to MapLibre GL (removes last
 Leaflet reference)

---
 themes/intotheeast/templates/trip.html.twig | 98 ++++++++++++---------
 1 file changed, 58 insertions(+), 40 deletions(-)

diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 96fe4fb..28b6da6 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -202,54 +202,72 @@
     </div>
 </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 TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
 var GPX_URLS = {{ gpx_urls|json_encode|raw }};
 
-var map = L.map('trip-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
-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_URLS.forEach(function(url) {
-    new L.GPX(url, {
-        async: true,
-        polyline_options: { color: '#1F6B5A', weight: 2, opacity: 0.6 },
-        marker_options: { startIconUrl: null, endIconUrl: null, shadowUrl: null }
-    }).addTo(map);
+var tripMap = new maplibregl.Map({
+    container: 'trip-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    cooperativeGestures: true
 });
 
-if (TRIP_ENTRIES.length === 0) {
-    map.setView([20, 0], 2);
-} else {
-    var latLngs = TRIP_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
-    L.polyline(latLngs, { color: '#2A8C73', weight: 3, opacity: 0.7 }).addTo(map);
-
-    TRIP_ENTRIES.forEach(function(entry, i) {
-        var isLatest = (i === TRIP_ENTRIES.length - 1);
-        var size = isLatest ? 16 : 10;
-        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 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() {
-                var card = document.getElementById('entry-' + entry.slug);
-                if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
-            });
+tripMap.on('load', function () {
+    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;
+                tripMap.addSource(sid, { type: 'geojson', data: geojson });
+                tripMap.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); });
     });
 
-    map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
-}
-setTimeout(function() { map.invalidateSize(); }, 100);
+    if (TRIP_ENTRIES.length === 0) {
+        tripMap.jumpTo({ center: [0, 20], zoom: 2 });
+        return;
+    }
+
+    var bounds = new maplibregl.LngLatBounds();
+    var coords = [];
+
+    TRIP_ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === TRIP_ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        coords.push(lngLat);
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(isLatest);
+        el.addEventListener('click', function () {
+            var card = document.getElementById('entry-' + entry.slug);
+            if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
+    });
+
+    MapUtils.addJourneyLine(tripMap, coords, 'trip-journey');
+
+    if (TRIP_ENTRIES.length === 1) {
+        tripMap.jumpTo({ center: coords[0], zoom: 10 });
+    } else {
+        tripMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
+    }
+});
+setTimeout(function () { tripMap.resize(); }, 100);
 
 (function() {
     var filterBtns = document.querySelectorAll('.trip-filter-btn');