107 lines
4.5 KiB
Twig
107 lines
4.5 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
|
|
}]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<div class="map-container" id="trip-map"></div>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.1.2/gpx.min.js"></script>
|
|
|
|
<script>
|
|
var ENTRIES = {{ map_entries|json_encode|raw }};
|
|
|
|
var map = L.map('trip-map', { minZoom: 2, maxZoom: 18 });
|
|
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
|
maxZoom: 20,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
|
|
}).addTo(map);
|
|
|
|
// GPX route tracks
|
|
const gpxUrls = {{ gpx_urls|json_encode|raw }};
|
|
gpxUrls.forEach(url => {
|
|
new L.GPX(url, {
|
|
async: true,
|
|
polyline_options: { color: '#1F6B5A', weight: 2, opacity: 0.7 },
|
|
marker_options: { startIconUrl: null, endIconUrl: null, shadowUrl: null }
|
|
}).addTo(map);
|
|
});
|
|
|
|
if (ENTRIES.length === 0) {
|
|
map.setView([20, 0], 2);
|
|
var emptyDiv = document.createElement('div');
|
|
emptyDiv.className = 'map-empty';
|
|
emptyDiv.textContent = 'No locations yet — entries with GPS will appear here.';
|
|
document.getElementById('trip-map').appendChild(emptyDiv);
|
|
} else {
|
|
var latLngs = ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
|
|
|
|
// Route polyline
|
|
L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map);
|
|
|
|
// Markers
|
|
ENTRIES.forEach(function(entry, i) {
|
|
var isLatest = (i === ENTRIES.length - 1);
|
|
var size = isLatest ? 18 : 12;
|
|
var color = isLatest ? '#155244' : '#1F6B5A';
|
|
|
|
var icon = L.divIcon({
|
|
className: '',
|
|
html: '<div style="width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,0.4);' + (isLatest ? 'box-shadow:0 0 0 3px rgba(31,107,90,0.3),0 1px 4px rgba(0,0,0,0.4);' : '') + '"></div>',
|
|
iconSize: [size, size],
|
|
iconAnchor: [size/2, size/2],
|
|
popupAnchor: [0, -(size/2 + 4)]
|
|
});
|
|
|
|
var popupContent = '<div style="font-family:-apple-system,sans-serif;width:180px;">';
|
|
if (entry.hero) {
|
|
popupContent += '<img src="' + entry.hero + '" style="width:100%;height:100px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;" alt="">';
|
|
}
|
|
popupContent += '<div style="font-size:0.75rem;color:#666;margin-bottom:2px;">📅 ' + entry.date + '</div>';
|
|
popupContent += '<div style="font-weight:600;font-size:0.9rem;margin-bottom:8px;">' + entry.title + '</div>';
|
|
popupContent += '<a href="' + entry.url + '" style="color:#1F6B5A;font-size:0.85rem;text-decoration:none;">Read entry →</a>';
|
|
popupContent += '</div>';
|
|
|
|
L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
|
|
.addTo(map)
|
|
.bindPopup(popupContent, { maxWidth: 200 });
|
|
});
|
|
|
|
// Fit bounds with padding
|
|
var bounds = L.latLngBounds(latLngs);
|
|
map.fitBounds(bounds, { padding: [40, 40] });
|
|
}
|
|
</script>
|
|
{% endblock %}
|