From 86997cb878972474b1a41fa8a5574c5ab1652854 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 01:38:36 +0200
Subject: [PATCH] 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.
---
 config/media.yaml                          |  4 ++--
 themes/intotheeast/templates/map.html.twig | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/config/media.yaml b/config/media.yaml
index d27ee85..c8c8836 100644
--- a/config/media.yaml
+++ b/config/media.yaml
@@ -1,4 +1,4 @@
-gpx:
+types:
+  gpx:
     type: file
-    extensions: ['gpx']
     mime: application/gpx+xml
diff --git a/themes/intotheeast/templates/map.html.twig b/themes/intotheeast/templates/map.html.twig
index 0c13960..2ab9765 100644
--- a/themes/intotheeast/templates/map.html.twig
+++ b/themes/intotheeast/templates/map.html.twig
@@ -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');