Load GPX file as points in Leaflet

Question

I have a simple Leaflet map and would like to add a GPX file coming from a Garmin device. I use omnivore plugin and by default it gets a line. How could I represent points in each coordinate instead of a line?

var map = L.map('map').setView([41.39742, 2.16328], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 25,
        attribution:'Map data &copy; <ahref="http://openstreetmap.org">OpenStreetMap'
    }).addTo(map);


var gpxURL = './gpx/Track_PESCA1-19 071255.gpx';
var gpx = omnivore.gpx(gpxURL).addTo(map);

Answer 1

I use omnivore plugin and by default it gets a line.

LineString is the only thing it can produce (see https://github.com/mapbox/togeojson#gpx-feature-support, omnivore is built upon togeojson), but no one prevents you from creating your own layer utilizing Custom Layers and L.geoJson onEachFeature option in the following way:

var pointFeatures = [];

var customLayer = L.geoJson(null, {
    onEachFeature: function (feature, layer) {
        feature.geometry.coordinates.forEach(c => pointFeatures.push({
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [c[0], c[1]]
            }
        }));
    },
});

var runLayer = omnivore.gpx('run.gpx', null, customLayer)
    .on('ready', function() {
        var geojson = {
            "type": "FeatureCollection",
            "features": pointFeatures
        };
        L.geoJson(geojson).addTo(map);      
    });

Here is a working demo for which I reworked this example: http://anatolysukhanov.com/stackoverflow/leaflet/omnivore.html