35 lines
1.5 KiB
HTML
35 lines
1.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Route — AHDX{% endblock %}
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.css') }}">
|
|
{% endblock %}
|
|
{% block body %}
|
|
<a href="{{ url_for('routes') }}">← Routes</a>
|
|
<h1>{{ route['filename'] }}</h1>
|
|
<p class="muted">{{ (route['start_date'] or '')[:19] }} · {{ route['point_count'] }} points</p>
|
|
|
|
<div class="card" style="padding: 0; overflow: hidden;">
|
|
<div id="map" style="height: 460px;"></div>
|
|
</div>
|
|
<p class="muted">Track is from your data. Map tiles come from OpenStreetMap over the network.</p>
|
|
|
|
<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.js') }}"></script>
|
|
<script>
|
|
// [lat, lon] pairs, which is the order Leaflet wants.
|
|
const PTS = {{ points|tojson }};
|
|
(function () {
|
|
const box = document.getElementById("map");
|
|
if (!PTS.length) { box.innerHTML = "<p class='muted' style='padding:16px;'>No GPS points in this route.</p>"; return; }
|
|
const map = L.map(box);
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19,
|
|
attribution: "© OpenStreetMap contributors",
|
|
}).addTo(map);
|
|
const line = L.polyline(PTS, { color: "#0a84ff", weight: 4 }).addTo(map);
|
|
map.fitBounds(line.getBounds(), { padding: [20, 20] });
|
|
L.circleMarker(PTS[0], { radius: 6, color: "#2e7d32", fillOpacity: 1 }).addTo(map).bindTooltip("Start");
|
|
L.circleMarker(PTS[PTS.length - 1], { radius: 6, color: "#c0392b", fillOpacity: 1 }).addTo(map).bindTooltip("End");
|
|
})();
|
|
</script>
|
|
{% endblock %}
|