feat: apply GPX connector algorithm to dailies feed mini-map

themes/intotheeast/templates/dailies.html.twig

@@ -23,11 +23,21 @@
             'lng': item.page.header.lng,
             'title': item.page.title,
             'slug': item.page.slug,
-            'url': item.page.url
+            'url': item.page.url,
+            'force_connect': item.page.header.force_connect ? true : false
         }]) %}
     {% endif %}
 {% endfor %}
 
+{# Collect GPX URLs from parent trip page for connector algorithm #}
+{% set trip_page = page.parent() %}
+{% set gpx_urls = [] %}
+{% for name, media in trip_page.media.all %}
+    {% if name|split('.')|last == 'gpx' %}
+        {% set gpx_urls = gpx_urls|merge([trip_page.url ~ '/' ~ name]) %}
+    {% endif %}
+{% endfor %}
+
 {% if map_entries|length > 0 %}
 <div class="feed-map-wrap">
     <div class="feed-map" id="feed-map"></div>
@@ -36,9 +46,11 @@
 
 <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 FEED_ENTRIES = {{ map_entries|json_encode|raw }};
+var GPX_URLS     = {{ gpx_urls|json_encode|raw }};
 
 var feedMap = new maplibregl.Map({
     container: 'feed-map',
@@ -49,12 +61,10 @@ var feedMap = new maplibregl.Map({
 
 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);
@@ -69,13 +79,29 @@ feedMap.on('load', function () {
         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 });
+        feedMap.jumpTo({ center: [parseFloat(FEED_ENTRIES[0].lng), parseFloat(FEED_ENTRIES[0].lat)], zoom: 10 });
     } else {
         feedMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
     }
+
+    Promise.all(GPX_URLS.map(function (url, idx) {
+        return fetch(url)
+            .then(function (r) { return r.text(); })
+            .then(function (text) {
+                var xml     = new DOMParser().parseFromString(text, 'text/xml');
+                var geojson = toGeoJSON.gpx(xml);
+                return MapUtils.extractTrackpoints(geojson);
+            })
+            .catch(function (err) {
+                console.warn('GPX load failed (feed-map):', url, err);
+                return [];
+            });
+    })).then(function (allTrackpoints) {
+        var validTrackpoints = allTrackpoints.filter(function (tp) { return tp.length > 0; });
+        var segments = MapUtils.buildJourneySegments(FEED_ENTRIES, validTrackpoints, 10);
+        MapUtils.addJourneySegments(feedMap, segments, 'feed-journey');
+    });
 });
 </script>
 {% endif %}