One problem is how to actually get the GPX data into the HTML/javascript.
Rather than mess about with XML parsers I would feed my GPX file into an on-line utility that converts the XML into a JSON object (e.g. https://codebeautify.org/xmltojson). Save this into its own javascript file and edit this file to put “gpj =” at the start and a semicolon “;” at the end. Include this script file as the first javascript file in the HTML, then you can access the object simply as “gpj” in your own javascript file. e.g.
<xml version="1.0" encoding="UTF-8">
<gpx version="1.0">
<name>Example</name>
<wpt lat="48.1234" lon="8.1234">
<ele>2372</ele>
<name>LAGORETICO</name>
</wpt>
<trk>
<name>Example</name>
<number>1</number>
<trkseg>
<trkpt lat="48.2345" lon="8.2345">
<ele>2376</ele>
<time>2017-10-14T10:09:57Z</time>
</trkpt>
<trkpt lat="48.3456" lon="8.3456">
<ele>2375</ele>
<time>2017-10-14T10:10:557Z</time>
</trkpt>
</trkseg>
</trk>
</gpx>
after running it through the online converter and editing it you save it to the file "gpj.js":
var gpj = {
"xml": {
"gpx": {
"name": "Example",
"wpt": {
"ele": "2372",
"name": "LAGORETICO",
"_lat": "48.1234",
"_lon": "8.1234"
},
"trk": {
"name": "Example",
"number": "1",
"trkseg": {
"trkpt": [
{
"ele": "2376",
"time": "2017-10-14T10:09:57Z",
"_lat": "48.2345",
"_lon": "8.2345"
},
{
"ele": "2375",
"time": "2017-10-14T10:10:557Z",
"_lat": "48.3456",
"_lon": "8.3456"
}
]
}
},
"_version": "1.0"
},
"_version": "1.0",
"_encoding": "UTF-8"
}
};
Then you can process this with javascript and HTML e.g.:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GPX JSON demo</title>
<script src="gpj.js"></script>
</head>
<body>
<h1>Print the trkpt data below</h1>
<div id='viewer'>
</div>
<script>
var viewer = document.getElementById("viewer");
var info = '';
console.log(gpj);
gpj.xml.gpx.trk.trkseg.trkpt.forEach(myFunction);
viewer.innerHTML = info;
function myFunction(item, index)
{
info += '<p>' +
'ele = ' + item.ele + '<br>' +
'time = ' + item.time + '<br>' +
'lat= ' + item._lat + '<br>' +
'lon = ' + item._lon + '</p>';
}
</script>
</body>
</html>
This produces the following webpage:
Print the trkpt data below
ele = 2376
time = 2017-10-14T10:09:57Z
lat= 48.2345
lon = 8.2345
ele = 2375
time = 2017-10-14T10:10:557Z
lat= 48.3456
lon = 8.3456