Skip to content

Instantly share code, notes, and snippets.

@henrik242

henrik242/display-gpx-track.html

Last active August 19, 2023 20:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save henrik242/84ad80dd2170385fe819df1d40224cc4 to your computer and use it in GitHub Desktop.
Save henrik242/84ad80dd2170385fe819df1d40224cc4 to your computer and use it in GitHub Desktop.
Download ZIP
Displays a GPX track as a HTML page using Leaflet, leaflet.hotline and GPXParser
Raw
display-gpx-track.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GPX track</title>
<script src="//polyfill.io/v3/polyfill.min.js?features=document.querySelector%2CArray.prototype.at"></script>
<script src="//cdn.jsdelivr.net/gh/Luuka/GPXParser.js/dist/GPXParser.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/iosphere/Leaflet.hotline/dist/leaflet.hotline.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.css" />
<style>
h2 {
font-family: sans-serif;
}
#map {
height: 85vh;
width: 99vw;
}
</style>
</head>
<body>
<h2 id="lastUpdate"></h2>
<div id="map"></div>
<script>
let tagmap = L.map("map");
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19,
}).addTo(tagmap);
function drawTrack(track) {
let z = 0;
let coordinates = track.points.map((p) => [p.lat.toFixed(5), p.lon.toFixed(5), z++]);
let polyline = L.hotline(coordinates, {
min: 0,
max: z,
weight: 5,
palette: {
0.0: "#008800",
0.5: "#ffff00",
1.0: "#ff0000",
},
outlineColor: "#000000",
outlineWidth: 1,
}).addTo(tagmap);
L.circle(coordinates.at(-1), { radius: 5 }).addTo(tagmap);
// zoom the map to the polyline
tagmap.fitBounds(polyline.getBounds());
}
let url_string = window.location.href;
let url = new URL(url_string);
let trackPath = url.searchParams.get("track");
if (!trackPath) {
trackPath = "data/data.gpx";
}
fetch(trackPath)
.then(function (response) {
return response.text();
})
.then(function (gpxData) {
let gpx = new gpxParser();
gpx.parse(gpxData);
drawTrack(gpx.tracks[0]);
document.getElementById("lastUpdate").innerText = gpx.tracks[0].points.at(-1).time.toLocaleString();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment