From b431cfc0acfd9bafd8d193178202ed205df95ff1 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 21:49:52 +0200
Subject: [PATCH] feat: migrate mini-map and home map to MapLibre GL

---
 .../intotheeast/templates/dailies.html.twig   | 71 +++++++++---------
 themes/intotheeast/templates/home.html.twig   | 74 ++++++++++---------
 2 files changed, 73 insertions(+), 72 deletions(-)

diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig
index cd57fdb..9f5f2fd 100644
--- a/themes/intotheeast/templates/dailies.html.twig
+++ b/themes/intotheeast/templates/dailies.html.twig
@@ -34,47 +34,46 @@
     <a class="feed-map-link" href="{{ page.parent().url }}/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>
+<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="{{ url('theme://js/maplibre-utils.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}.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);
-
-var latLngs = FEED_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
-
-if (latLngs.length > 1) {
-    L.polyline(latLngs, { color: '#1F6B5A', 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 ? '#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' }); }
-        });
+var feedMap = new maplibregl.Map({
+    container: 'feed-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    cooperativeGestures: true
 });
 
-if (latLngs.length === 1) {
-    map.setView(latLngs[0], 10);
-} else {
-    map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
-}
-setTimeout(function() { map.invalidateSize(); }, 100);
+feedMap.on('load', function () {
+    var bounds = new maplibregl.LngLatBounds();
+    var coords = [];
+
+    FEED_ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === FEED_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 () {
+            window.location.href = entry.url;
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
+    });
+
+    MapUtils.addJourneyLine(feedMap, coords, 'feed-journey');
+
+    if (FEED_ENTRIES.length === 1) {
+        feedMap.jumpTo({ center: coords[0], zoom: 10 });
+    } else {
+        feedMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
+    }
+});
 </script>
 {% endif %}
 
diff --git a/themes/intotheeast/templates/home.html.twig b/themes/intotheeast/templates/home.html.twig
index 9e011ad..cc55050 100644
--- a/themes/intotheeast/templates/home.html.twig
+++ b/themes/intotheeast/templates/home.html.twig
@@ -123,47 +123,49 @@
 </div>
 
 {% if map_entries|length > 0 %}
-<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>
+<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="{{ url('theme://js/maplibre-utils.js') }}"></script>
 <script>
 var HOME_ENTRIES = {{ map_entries|json_encode|raw }};
 
-var map = L.map('home-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);
-
-var latLngs = HOME_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
-
-if (latLngs.length > 1) {
-    L.polyline(latLngs, { color: '#2A8C73', weight: 3, opacity: 0.7 }).addTo(map);
-}
-
-HOME_ENTRIES.forEach(function(entry, i) {
-    var isLatest = (i === HOME_ENTRIES.length - 1);
-    var size = isLatest ? 16 : 10;
-    var color = isLatest ? '#155244' : '#2A8C73';
-    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' }); }
-        });
+var homeMap = new maplibregl.Map({
+    container: 'home-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    cooperativeGestures: true
 });
 
-if (latLngs.length === 1) {
-    map.setView(latLngs[0], 10);
-} else {
-    map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
-}
-setTimeout(function() { map.invalidateSize(); }, 100);
+homeMap.on('load', function () {
+    var bounds = new maplibregl.LngLatBounds();
+    var coords = [];
+
+    HOME_ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === HOME_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(homeMap);
+    });
+
+    MapUtils.addJourneyLine(homeMap, coords, 'home-journey');
+
+    if (HOME_ENTRIES.length === 1) {
+        homeMap.jumpTo({ center: coords[0], zoom: 10 });
+    } else {
+        homeMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
+    }
+
+    setTimeout(function () { homeMap.resize(); }, 100);
+});
 </script>
 {% endif %}
 {% endblock %}