layouts: map: Make tracks downloadable

layouts/shortcodes/leaflet-map.html

@@ -8,7 +8,7 @@ Syntax summary:
 
 		{{< leaflet-marker lat=FLOAT lon=FLOAT >}}
 
-		{{< leaflet-track path="URL" >}}
+		{{< leaflet-track path="URL" title="STRING" downloadable=BOOL >}}
 
 		{{< leaflet-scale >}}
 
@@ -81,6 +81,11 @@ Track options:
 
 	path:
 		Absolute or relative path of the .gpx file to render as a track.
+	title:
+		Name of the track, used e.g. to render the 'Download GPX' button when multiple tracks are present.
+	downloadable:
+		Boolean value indicating whether there should be a 'Download GPX' button for this track.
+		Optional, defaults to true.
 
 Scale options:
 
@@ -126,6 +131,8 @@ Elevation profile options:
 	<div id="map_backdrop_{{ $uniqueId }}" class="map-backdrop"></div>
 	<div id="map_attribution_{{ $uniqueId }}" class="map-attribution"></div>
 </div>
+<div id="map_track_downloads_{{ $uniqueId }}">
+</div>
 
 <script>
 	var map_options_{{ $uniqueId }} = {
@@ -197,5 +204,26 @@ Elevation profile options:
 			const backdrop = L.DomUtil.get('map_backdrop_{{ $uniqueId }}');
 			backdrop.addEventListener('click', ev => { map.restore(); });
 		}
+
+		// Create a download button for every downloadable track
+		for (const track of map_options_{{ $uniqueId }}.tracks)
+		{
+			if (!track.downloadable)
+				continue;
+
+			const a = L.DomUtil.create(
+				'a',
+				'me-2 mb-2',
+				L.DomUtil.get('map_track_downloads_{{ $uniqueId }}')
+			);
+			a.setAttribute('href', track.source);
+			const button = L.DomUtil.create(
+				'button',
+				// Note that the following classes must be part of the safelist in hugo-theme-gallery-flex's tailwind.config.js:
+				'py-2.5 px-5 me-2 mb-2 text-sm font-medium rounded-lg border focus:outline-none focus:z-10 focus:ring-4 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700',
+				a
+			);
+			button.innerHTML = track.title ? `Download GPX (${track.title})` : 'Download GPX';
+		}
 	});
 </script>