feat: use buildJourneySegments in map.html.twig — suppress connectors covered by GPX

themes/intotheeast/templates/map.html.twig

@@ -27,7 +27,8 @@
             'title': entry.title,
             'date': entry.date|date('d M Y'),
             'url': entry.url,
-            'hero': hero_url
+            'hero': hero_url,
+            'force_connect': entry.header.force_connect ? true : false
         }]) %}
     {% endif %}
 {% endfor %}
@@ -60,34 +61,14 @@ if (ENTRIES.length === 0) {
 }
 
 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); });
-    });
-
     if (ENTRIES.length === 0) return;
 
-    /* ── Markers ─────────────────────────────────────────────── */
+    /* ── Markers + bounds ──────────────────────────────────────── */
     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);
@@ -102,15 +83,38 @@ map.on('load', function () {
         new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
     });
 
-    /* ── Journey line ────────────────────────────────────────── */
+    /* ── Fit bounds ─────────────────────────────────────────────── */
-    MapUtils.addJourneyLine(map, coords, 'journey');
-
-    /* ── Fit bounds ──────────────────────────────────────────── */
     if (ENTRIES.length === 1) {
-        map.jumpTo({ center: coords[0], zoom: 10 });
+        map.jumpTo({ center: [parseFloat(ENTRIES[0].lng), parseFloat(ENTRIES[0].lat)], zoom: 10 });
     } else {
         map.fitBounds(bounds, { padding: 100, maxZoom: 11 });
     }
+
+    /* ── GPX tracks + journey segments ─────────────────────────── */
+    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);
+                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 }
+                });
+                return MapUtils.extractTrackpoints(geojson);
+            })
+            .catch(function (err) {
+                console.warn('GPX load failed:', url, err);
+                return [];
+            });
+    })).then(function (allTrackpoints) {
+        var validTrackpoints = allTrackpoints.filter(function (tp) { return tp.length > 0; });
+        var segments = MapUtils.buildJourneySegments(ENTRIES, validTrackpoints, 10);
+        MapUtils.addJourneySegments(map, segments, 'journey');
+    });
 });
 </script>
 {% endblock %}