Extract coordinates from .gpx file with OpenLayers (or any other JS library)?

Question

I have a simple drag and drop event assigned to my OpenLayers map. This allows me to take a .gpx file, drag & drop it on top of my map which results in the route being visualized on the map.

The code looks like this (taken from the official OpenLayers examples docs):

import 'ol/ol.css';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Map from 'ol/Map';
import View from 'ol/View';
import {GPX, GeoJSON, IGC, KML, TopoJSON} from 'ol/format';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {Vector as VectorSource, XYZ} from 'ol/source';

const key = 'Get your own API key at https://www.maptiler.com/cloud/';
const attributions =
  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

const map = new Map({
  layers: [
    new TileLayer({
      source: new XYZ({
        attributions: attributions,
        url:
          'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
        maxZoom: 20,
      }),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

const extractStyles = document.getElementById('extractstyles');
let dragAndDropInteraction;

function setInteraction() {
  if (dragAndDropInteraction) {
    map.removeInteraction(dragAndDropInteraction);
  }
  dragAndDropInteraction = new DragAndDrop({
    formatConstructors: [
      GPX,
      GeoJSON,
      IGC,
      // use constructed format to set options
      new KML({extractStyles: extractStyles.checked}),
      TopoJSON,
    ],
  });
  dragAndDropInteraction.on('addfeatures', function (event) {
    const vectorSource = new VectorSource({
      features: event.features,
    });
    map.addLayer(
      new VectorLayer({
        source: vectorSource,
      })
    );
    map.getView().fit(vectorSource.getExtent());
  });
  map.addInteraction(dragAndDropInteraction);
}
setInteraction();

My question is: how can I get an array of all of the coordinates from the .gpx file? Is there a JS library that would allow me to extract the lat and long from the .gpx file in-browser, without having to send the xml to the server for processing?

An ideal output would look like this: {[lat, lon], [lat, lon], [lat, lon]}

Answer 1

You can get coordinates from feature geometry with the .getCoordinates() method, and you can get feature geometry from feature with the .getGeometry() method.

To get all arrays of coordinates to a global variable allCoords, you just have to add some code to dragAndDropInteraction.on event processing function.

Relevant part of the code could look something like this:

var allCoords;

dragAndDropInteraction.on('addfeatures', function (event) {
  allCoords = [];
  event.features.forEach(function(feature) {
     var featureCoords = feature.getGeometry().getCoordinates();
     featureCoords.forEach(function(sectionCoords) {
       allCoords.push(sectionCoords);
     });
  });
  .
  .
  .
});

This way allCoords would contain coordinates in the map projection, which in this case is Web Mercator, i.e. 'EPSG:3857'.

If you want to get coordinates in [lon, lat] format, conversion with the ol.proj.toLonLat method is needed:

var allCoords;

dragAndDropInteraction.on('addfeatures', function (event) {
  allCoords = [];
  event.features.forEach(function(feature) {
     var featureCoords = feature.getGeometry().getCoordinates();
     featureCoords.forEach(function(sectionCoords) {
       for (var i = 0; i < sectionCoords.length; i++) {
         sectionCoords[i] = ol.proj.toLonLat(sectionCoords[i]);
       }
       allCoords.push(sectionCoords);
     });
  });
  .
  .
  .
});