diff --git a/themes/intotheeast/templates/map.html.twig b/themes/intotheeast/templates/map.html.twig
index ed9e6c2..dd32fcd 100644
--- a/themes/intotheeast/templates/map.html.twig
+++ b/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 ────────────────────────────────────────── */
- MapUtils.addJourneyLine(map, coords, 'journey');
-
- /* ── Fit bounds ──────────────────────────────────────────── */
+ /* ── 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');
+ });
});
{% endblock %}