diff --git a/themes/intotheeast/js/maplibre-utils.js b/themes/intotheeast/js/maplibre-utils.js index 41e5e12..fb51707 100644 --- a/themes/intotheeast/js/maplibre-utils.js +++ b/themes/intotheeast/js/maplibre-utils.js @@ -283,6 +283,42 @@ }); } + /* + * Fetch GPX files, render their raw tracks, then draw journey connector lines + * only between entries not covered by any GPX file (connector suppression). + * + * gpxUrls: array of GPX file URLs to fetch + * entries: [{lat, lng, force_connect?}, ...] in chronological order + * gpxSourcePrefix: source/layer ID prefix for raw GPX tracks (e.g. 'gpx', 'home-gpx') + * journeySourceId: base source ID for connector segments (e.g. 'journey', 'home-journey') + * + * When gpxUrls is empty, Promise.all resolves immediately → no GPX layers, + * buildJourneySegments draws a full connector line between all entries. + */ + function renderGpxJourney(map, gpxUrls, entries, gpxSourcePrefix, journeySourceId) { + Promise.all(gpxUrls.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 = gpxSourcePrefix + '-' + 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': ACCENT, 'line-width': 2, 'line-opacity': 0.7 } + }); + return extractTrackpoints(geojson); + }) + .catch(function (err) { console.warn('GPX load failed:', url, err); return []; }); + })).then(function (allTrackpoints) { + var valid = allTrackpoints.filter(function (tp) { return tp.length > 0; }); + var segments = buildJourneySegments(entries, valid, 10); + addJourneySegments(map, segments, journeySourceId); + }); + } + global.MapUtils = { MAP_STYLE: MAP_STYLE, ACCENT: ACCENT, @@ -290,6 +326,7 @@ addJourneySegments: addJourneySegments, buildJourneySegments: buildJourneySegments, extractTrackpoints: extractTrackpoints, + renderGpxJourney: renderGpxJourney, createDotMarker: createDotMarker, createStoryMarker: createStoryMarker }; diff --git a/themes/intotheeast/templates/home.html.twig b/themes/intotheeast/templates/home.html.twig index 1c2137f..d8f2c09 100644 --- a/themes/intotheeast/templates/home.html.twig +++ b/themes/intotheeast/templates/home.html.twig @@ -184,9 +184,6 @@ homeMap.on('load', function () { new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap); }); - /* Draw simple journey line immediately; replaced below if GPX is present */ - MapUtils.addJourneyLine(homeMap, coords, 'home-journey'); - if (HOME_ENTRIES.length === 1) { homeMap.jumpTo({ center: coords[0], zoom: 10 }); } else { @@ -195,31 +192,7 @@ homeMap.on('load', function () { setTimeout(function () { homeMap.resize(); }, 100); - if (HOME_GPX_URLS.length > 0) { - Promise.all(HOME_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 = 'home-gpx-' + idx; - homeMap.addSource(sid, { type: 'geojson', data: geojson }); - homeMap.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) { - if (homeMap.getLayer('home-journey')) homeMap.removeLayer('home-journey'); - if (homeMap.getSource('home-journey')) homeMap.removeSource('home-journey'); - var valid = allTrackpoints.filter(function (tp) { return tp.length > 0; }); - var segments = MapUtils.buildJourneySegments(HOME_ENTRIES, valid, 10); - MapUtils.addJourneySegments(homeMap, segments, 'home-journey'); - }); - } + MapUtils.renderGpxJourney(homeMap, HOME_GPX_URLS, HOME_ENTRIES, 'home-gpx', 'home-journey'); }); {% endif %} diff --git a/themes/intotheeast/templates/map.html.twig b/themes/intotheeast/templates/map.html.twig index 0dd10ca..322fe24 100644 --- a/themes/intotheeast/templates/map.html.twig +++ b/themes/intotheeast/templates/map.html.twig @@ -92,30 +92,7 @@ map.on('load', function () { } /* ── 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'); - }); + MapUtils.renderGpxJourney(map, GPX_URLS, ENTRIES, 'gpx', 'journey'); }); {% endblock %}