m038
eafc431e0e
Replaces the boolean toggle with a select field offering:
on — connect all consecutive entries (chronological line)
manual — force_connect entries only (user-controlled connections)
intelligent_gpx — suppress connectors where GPX covers both endpoints;
force_connect overrides (original smart logic, restored)
off — no connectors at all; force_connect also ignored
buildJourneySegments gains an optional trackpointsPerFile param used
only by intelligent_gpx mode. renderGpxJourney extracts trackpoints
only when connectMode is intelligent_gpx. dailies.html.twig falls
back from intelligent_gpx → on (mini-map has no GPX tracks to
suppress against).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
101 lines
4.3 KiB
Twig
101 lines
4.3 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 USE_GPX = {{ trip_page.header.use_gpx ?? true ? 'true' : 'false' }};
|
|
var AUTOCONNECT = "{{ trip_page.header.autoconnect ?? 'on' }}";
|
|
|
|
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 ─────────────────────────── */
|
|
MapUtils.renderGpxJourney(map, USE_GPX ? GPX_URLS : [], ENTRIES, 'gpx', 'journey', { connectMode: AUTOCONNECT });
|
|
});
|
|
</script>
|
|
{% endblock %}
|