47 lines
1.9 KiB
HTML
47 lines
1.9 KiB
HTML
{% extends "default.html" %}
|
|
|
|
{% block content %}
|
|
<div id="map" class="w-full" style="height: 50rem"></div>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
|
|
<script>
|
|
var map = L.map('map').setView(new L.LatLng(46.498, 2.197), 7);
|
|
|
|
var googleSat = L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
|
|
maxZoom: 20,
|
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
|
}).addTo(map);
|
|
|
|
function loadGPX(trace, color, popup) {
|
|
new L.GPX('/traces/' + trace, {
|
|
async: true,
|
|
marker_options: {
|
|
iconSize: [11, 15],
|
|
shadowSize: [16.6, 16.6],
|
|
iconAnchor: [5.3, 15],
|
|
shadowAnchor: [5.3, 15.6],
|
|
startIconUrl: '/images/pin-icon-start.png',
|
|
endIconUrl: '/images/pin-icon-end.png',
|
|
shadowUrl: '/images/pin-shadow.png',
|
|
},
|
|
polyline_options: {
|
|
color: color,
|
|
opacity: 1,
|
|
weight: 4,
|
|
lineCap: 'round'
|
|
}
|
|
}).on('addpoint', function(e) {
|
|
e.target.bindPopup(popup)
|
|
}).addTo(map)
|
|
}
|
|
|
|
{% for trip in trips %}
|
|
{% for trace in trip.traces %}
|
|
loadGPX('{{ trace.path | safe }}', '{{ trip.color }}', "<b>{{ trip.type_as_string }} {{ trip.name }} de {{ trip.date }}</b><br>Distance : {{ trip.distance_format }}<br>Dénivelé: +{{ trip.elevation_positive_format }} | -{{ trip.elevation_negative_format }}<br><br><b>Segment {{ trace.name }}</b><br>Distance : {{ trace.distance_format }}<br>Dénivelé: +{{ trace.elevation_positive_format }} | -{{ trace.elevation_negative_format }}");
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</script>
|
|
{% endblock content %}
|