i have coded for me a little OL script to display GPX Routes in a OSM map. That works so far, even with a little gimmick. What I miss is a continuous distance. So from trkpt 0 to trkpt 1 + (trkpt 1 to trkpt 2) + (trkpt 2 to trkpt 3) ... For the gimmick I use the array keys. Each array key is an (internal) point where data is calculated. In Openlayers is an array with all coordinates + the elevation. I would like to extend this array by the distance. Whether the array values should be the continuous distance or that from last-trkpt to next-trkpt, I would have to think twice. Maybe a value with last-trkpt to next-trkpt is probably better.

Please test by yourself possible "duplicates" before you vote my question as such.

Please a solution without OL npm. I use only the ol.css and ol.js v5.3.0.

HTML:

<input type="file" id="files" name="files[]" >
<div id="map" class="map"></div>

Javascript:

var gpxFormat = new ol.format.GPX();
var gpxFeatures;
var coordsarray = [];
var GPXgeometry = [];
function handleFileSelect(evt) {

gpxLayer.getSource().clear();

var files = evt.target.files;

var output = [];
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.readAsText(files[i], "UTF-8");
reader.onload = function (evt) {
gpxFeatures = gpxFormat.readFeatures(evt.target.result,{
dataProjection:'EPSG:4326',
featureProjection:'EPSG:3857'
});
gpxLayer.getSource().addFeatures(gpxFeatures);

var features = gpxLayer.getSource().getFeatures();
features.forEach(function(feature) {
GPXgeometry = feature.getGeometry();
coordsarray = feature.getGeometry().getCoordinates();
});

//--- ??? Start

var i = 0;
var distance = 0;
coordsarray[0][i].push(distance):

// for ???

var lat0 = coordsarray[0][i][0];
var lon0 = coordsarray[0][i][1];
var latlon0 = [lat0, lon0];
i++;
var lat1 = coordsarray[0][i][0];
var lon1 = coordsarray[0][i][1];
var latlon1 = [lat1, lon1];

// calculate distance
// ???

coordsarray[0][i].push(distance):
i--;

//--- ??? End

}


var gpxLayer = new ol.layer.Vector({
source: new ol.source.Vector({

})
});


var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
gpxLayer
]
});

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Example of var coordsarray:

console.log(coordsarray[0][0][0]); // -37937.014545402875
console.log(coordsarray[0][0][1]); // 5354259.990656373
console.log(coordsarray[0][0][2]); // 188.5
console.log(coordsarray[0][1][0]); // -37936.012669985736
console.log(coordsarray[0][1][1]); // 5354231.092259876
console.log(coordsarray[0][1][2]); // 188.5