[templates] Fix leaflet issues and add to trails

vrobbler/templates/scrobbles/scrobble_detail.html

@@ -7,6 +7,7 @@
 {% block title %}{{object.name}}{% endblock %}
 
 {% block head_extra %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
 
         dl { border:none; }
@@ -21,6 +22,10 @@
             min-height: 1em;
             border: none;
         }
+        #map {
+            height: 400px;
+            border-radius: 4px;
+        }
         </style>
 {% endblock %}
 
@@ -90,6 +95,12 @@
 <p>{{ object.logdata.description }}</p>
 {% endif %}
 
+{% if object.media_type == "Trail" and object.gpx_file %}
+<div class="mb-3">
+    <div id="map"></div>
+</div>
+{% endif %}
+
 <p>
     Tags: 
     {% if object.tags.all %}
@@ -206,4 +217,27 @@
 
 {% endblock %}
 
-{% block extra_js %}{{ block.super }}{{ log_form.media }}{% endblock %}
+{% block extra_js %}
+{{ block.super }}
+{{ log_form.media }}
+{% if object.media_type == "Trail" and object.gpx_file %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.2.0/gpx.min.js"></script>
+<script>
+var map = L.map('map');
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    referrerPolicy: 'origin'
+}).addTo(map);
+var gpx = new L.GPX("{{ object.gpx_file.url|escapejs }}", {
+    async: true,
+    polyline_options: { color: '#e74c3c' }
+});
+gpx.on('loaded', function(e) {
+    map.fitBounds(e.target.getBounds());
+});
+gpx.addTo(map);
+</script>
+{% endif %}
+{% endblock %}