feat: use buildJourneySegments in map.html.twig — suppress connectors covered by GPX
This commit is contained in:
@@ -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');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user