How load local gpx file in a openLayer map?

Question

I think than the title is pretty clear, I am using openLayer library(v4.6.5) and I am trying to load a local GPX file in my map when the page is loaded. In the official document

Answer 1

Solution 1

Just use the drag & drop component provided within OpenLayers library. Demo at https://openlayers.org/en/latest/examples/drag-and-drop.html (drag and drop a GPX to test)

Solution 2

If you want/need to do things manually, you need to remove the URL reference and the format.

Then, you get GPS file content when you do a drag and drop (or another action) then parse it with

var GPXfeatures = (new ol.format.GPX()).readFeatures('yourGPXstring', {featureProjection: 'EPSG:3857'})

Then you add the features to the source with

vector.getSource().addFeatures(GPXfeatures)