feat: add GPX route rendering to trip map via leaflet-gpx
Adds leaflet-gpx@2.1.2 CDN script to map template, collects *.gpx media files from the trip page, and renders them as teal polylines beneath entry pins. Also fixes user/config/media.yaml to use the required types: key so Grav's Media class correctly discovers .gpx files. Map remains functional when no GPX files are present.
This commit is contained in:
+2
-2
@@ -1,4 +1,4 @@
|
||||
gpx:
|
||||
types:
|
||||
gpx:
|
||||
type: file
|
||||
extensions: ['gpx']
|
||||
mime: application/gpx+xml
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
{% 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 %}
|
||||
@@ -28,6 +36,7 @@
|
||||
|
||||
<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 }};
|
||||
@@ -38,6 +47,16 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).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');
|
||||
|
||||
Reference in New Issue
Block a user