122 lines
5.2 KiB
Twig
122 lines
5.2 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
|
|
|
{% block content %}
|
|
{% set trip_page = page.parent() %}
|
|
{% set tracker_page = grav.pages.find(page.parent().route ~ '/dailies') %}
|
|
{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}
|
|
|
|
{% 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 %}
|
|
|
|
{% set map_entries = [] %}
|
|
{% for entry in all_entries %}
|
|
{% if entry.header.lat is not empty and entry.header.lng is not empty %}
|
|
{% set hero_url = null %}
|
|
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
|
{% set hero_url = entry.media[entry.header.hero_image].cropResize(240, 135).url %}
|
|
{% elseif entry.media.images|length > 0 %}
|
|
{% set hero_url = entry.media.images|first.cropResize(240, 135).url %}
|
|
{% endif %}
|
|
{% set map_entries = map_entries|merge([{
|
|
'lat': entry.header.lat|number_format(6, '.', ''),
|
|
'lng': entry.header.lng|number_format(6, '.', ''),
|
|
'title': entry.title,
|
|
'date': entry.date|date('d M Y'),
|
|
'url': entry.url,
|
|
'hero': hero_url,
|
|
'force_connect': entry.header.force_connect ? true : false,
|
|
'transport_mode': entry.header.transport_mode ? entry.header.transport_mode : null
|
|
}]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<div class="map-container" id="trip-map"></div>
|
|
|
|
<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 ENTRIES = {{ map_entries|json_encode|raw }};
|
|
var GPX_URLS = {{ gpx_urls|json_encode|raw }};
|
|
|
|
var map = new maplibregl.Map({
|
|
container: 'trip-map',
|
|
style: MapUtils.MAP_STYLE,
|
|
center: [20, 20],
|
|
zoom: 2
|
|
});
|
|
|
|
map.addControl(new maplibregl.NavigationControl(), 'top-right');
|
|
|
|
if (ENTRIES.length === 0) {
|
|
var empty = document.createElement('div');
|
|
empty.className = 'map-empty';
|
|
empty.textContent = 'No locations yet — entries with GPS will appear here.';
|
|
document.getElementById('trip-map').appendChild(empty);
|
|
}
|
|
|
|
map.on('load', function () {
|
|
if (ENTRIES.length === 0) return;
|
|
|
|
/* ── Markers + bounds ──────────────────────────────────────── */
|
|
var bounds = new maplibregl.LngLatBounds();
|
|
|
|
ENTRIES.forEach(function (entry, i) {
|
|
var isLatest = (i === ENTRIES.length - 1);
|
|
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
|
bounds.extend(lngLat);
|
|
|
|
var el = MapUtils.createDotMarker(isLatest);
|
|
el.dataset.url = entry.url;
|
|
var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
|
|
.setLngLat(lngLat)
|
|
.setHTML('<span class="map-tip">' + entry.title + '</span>');
|
|
el.addEventListener('mouseenter', function () { popup.addTo(map); });
|
|
el.addEventListener('mouseleave', function () { popup.remove(); });
|
|
el.addEventListener('click', function () { window.location.href = entry.url; });
|
|
|
|
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
|
|
});
|
|
|
|
/* ── Fit bounds ─────────────────────────────────────────────── */
|
|
if (ENTRIES.length === 1) {
|
|
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 %}
|