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 documentation, in GPX Data example (https://openlayers.org/en/latest/examples/gpx.html?q=data) that seems to be pretty straightforward to do with an url.

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'https://openlayers.org/en/v4.6.5/examples/data/gpx/fells_loop.gpx',
      format: new ol.format.GPX()
    }),
    style: function(feature) {
      return style[feature.getGeometry().getType()];
    }
  });

My question is, instead of setting url option, what option I need to set in ol.source.Vector object to load a local GPX file? Thanks in advance.

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)