Loading multiple gpx files

[Raruto]

Hi @serako,

for when you will have some time (after #6), could you provide to everyone else a simple and concrete example of how to view/load multiple GPX files using the same elevation chart diagram? (so as to insert it among the other examples of this library...)

Thanks in advance,
Raruto

[serako]

I will prepare a nice example in the week.

Now for you see how i do .
this code is generate with hugo shortcode and i construct it for multiple map in a same page. that why ou see map1 el1 and counterMap! and the construct array is not traditional!

var map1 = L.map('map1', {
  zoomControl: false,
  fullscreenControl: true
});

var el1 = L.control.elevation(elOptions());
el1.addTo(map1);

var traces1 = [];

traces1.push({});

traces1[traces1.length - 1].color_trace = "#3490dc";
traces1[traces1.length - 1].file_name = "45214.gpx";

traces1.push({});

traces1[traces1.length - 1].color_trace = "#f6993f";
traces1[traces1.length - 1].file_name = "47528.gpx";

var indexDefaultTrace = 3;
indexDefaultTrace = indexDefaultTrace > (traces1.length - 1) ? 0 : indexDefaultTrace; //this variable declared before else the gpx is traces1[0]

traces1.forEach(function(item, index, array) {

  item.index = index;

  var gpx = '/topos/traces/' + item.file_name;

  item.gpx = new L.GPX(gpx, {
    async: true,
    index: index,
    marker_options: {
      startIconUrl: '/images/markers/pin-icon-start.png',
      endIconUrl: '/images/markers/pin-icon-end.png',
      shadowUrl: '/images/markers/pin-shadow.png',
    },
    polyline_options: {
      color: item.color_trace,
      opacity: 0.75,
      weight: 3,
      lineCap: 'square',
    }
  });

  item.gpx.on('loaded', function(e) {
    map1.fitBounds(e.target.getBounds());
    if (index == indexDefaultTrace) {
      setElevationTrace(e, traces1, el1, 1);
    }
  })

  item.gpx.on("addline", function(e) {
    item.line = e.line;
  })

  item.gpx.on("click", function(e) {
    switchElevationTrace(e, traces1, el1, 1);
  });

  item.gpx.addTo(map1);

});

function switchElevationTrace(e, traces, el, counterMap) {

  traces[el.index].gpx.setStyle({ // modif ancienne trace mise en elevation
    color: traces[el.index].color_trace,
    weight: 2,
    opacity: 0.5,
  });

  el.clear();

  setElevationTrace(e, traces, el, counterMap);

}


function setElevationTrace(e, traces, el, counterMap) {

  el.index = e.target.options.index;

  el.addData(traces[el.index].line);

  traces[e.target.options.index].gpx.setStyle({ //style trace elevation
    color: 'red',
    weight: 4,
    opacity: 0.5,
  });

  refreshTraceInfo(e.target, counterMap);

}

function refreshTraceInfo(gpx, counterMap) {

  var q = document.querySelector.bind(document);

  //initialise
  q('#totlen' + counterMap + ' .summaryvalue').innerHTML = 0 + " km";
  q('#maxele' + counterMap + ' .summaryvalue').innerHTML = 0 + " m";
  q('#minele' + counterMap + ' .summaryvalue').innerHTML = 0 + " m";

  q('#totlen' + counterMap + ' .summaryvalue').innerHTML = (gpx.get_distance() / 1000).toFixed(2) + " km";
  q('#maxele' + counterMap + ' .summaryvalue').innerHTML = gpx.get_elevation_max().toFixed(0) + " m";
  q('#minele' + counterMap + ' .summaryvalue').innerHTML = gpx.get_elevation_min().toFixed(0) + " m";

}

function elOptions() {

  var options = {
    position: "bottomleft",
    theme: "lime-theme", //default: lime-theme
    width: 600,
    height: 175,
    margins: {
      top: 10,
      right: 20,
      bottom: 30,
      left: 50
    },
    useHeightIndicator: true, //if false a marker is drawn at map position
    interpolation: d3.curveLinear, //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate
    hoverNumber: {
      decimalsX: 3, //decimals on distance (always in km)
      decimalsY: 0, //deciamls on height (always in m)
      formatter: undefined //custom formatter function may be injected
    },
    xTicks: undefined, //number of ticks in x axis, calculated by default according to width
    yTicks: undefined, //number of ticks on y axis, calculated by default according to height
    collapsed: true, //collapsed mode, show chart on click or mouseover
    detachedView: false,
    responsiveView: true
  };

  return options;
}

[serako]

Hi!
Example toggle track based on your last example but :

• with all track
• with legend
• fit.bounds on all track

example.zip

[Raruto]

Hi Serako,
here is another fairly complete example (based on version 0.3.0, introducing the following helper class: libs/leaflet-gpxgroup.js

[serako]

Beautiful! I dream this 👍
I do a little test with your last example, for more nice :

• the selected track move up on Z.
• I think the color after deselected must retreive the old color.
• the legend must change the color of the track selected.
• the 1,2,3... marker on track must do optional (perhaps you do, i have not lot of time, i don't search in code!)

for very very more nice :

• if you have a poi , and the poi is associed with a pictures (on his option), and when you near(optional circle tolerance in meter) than the elevation indicator or your locate position, you show the picture few secondes (time delay in option)

I will see some point on list this week-end!

[Raruto]

• the selected track move up on Z.

in version 0.3.3 i've added a layer.bringToFront() mechanism

• I think the color after deselected must retreive the old color.

you can deselect a track by clicking on it (otherwise, restoring it on the 'mouseout' event, you would never be easily able to hover/select a track)

• the legend must change the color of the track selected.

i think that there was a bug in the document.querySelector(".chart-placeholder");

• the 1,2,3... marker on track must do optional (perhaps you do, i have not lot of time, i don't search in code!)

now you can disabling it by passing distanceMarkers: false or simply not loading the leaflet-distance-marker.js script (here it is an example)

---

• if you have a poi , and the poi is associed with a pictures (on his option), and when you near (optional circle tolerance in meter) than the elevation indicator or your locate position, you show the picture few secondes (time delay in option)

Although I have never tested it, the leaflet-gpx.js class should natively support GPX Waypoints. If you have some suggestion or additions to make to the leaflet-gpxgroup.js class, then let me know..

[dingdawn]

Hi,
Great work but is there a way to load a gpx by default ?
Regards

[Raruto]

A little bit hackish, but it should do the job...

// Add your GPX tracks
var tracks = [
  "tracks/20130922.gpx",
  "tracks/20131006.gpx",
  ...
];

// Handle your GPX routes
var routes = L.gpxGroup( tracks, { ... } );

// Preload a default chart / track.
routes.once( 'loaded', function( e ) {

  // Select a default track ( 0 = first element ).
  var i = 0; // ALTERNATIVE: tracks.indexOf( "tracks/20130922.gpx" );
  var route = this._routes[Object.keys( this._routes )[i]];

  // Select chart.
  this.setSelection( route );

  // Highlight polyline.
  route.eachLayer( function( layer ) {
    if ( layer instanceof L.Polyline ) this.highlight( route, layer );
  }, this );

  // Update legend.
  if ( this.options.legend ) {
    ( async ( id ) => {
      while( !L.DomUtil.get( id ) ) await new Promise( r => setTimeout( r, 500 ) );
      L.DomUtil.get( id ).parentNode.previousSibling.click();
    })( 'legend_' + route._leaflet_id );
  }

});

Have a nice day,
Raruto

[dingdawn]

A little bit hackish, but it should do the job...

Thank you so much. It works perfectly!
Regards

[mbprevot]

Is it possible to upload a local file and have it added to existing tracks?
Thanks in advance

[Raruto]

You can use the Leaflet.FileLayer plugin for loading a local gpx file, after that you can try adding it with the addTrack() function (minor changes needed, i think...).

If you will be able to do that, could you provide an example file that we can add it among the other examples of this library?

Kindly,
Raruto

[mbprevot]

I've added the function addTrackData:

  addTrackData: function(fileName,data) {

    this._tracks.push(fileName);
    this._loadRoute(data);

    var i = this._tracks.indexOf(fileName);
    var route = this._routes[Object.keys(this._routes)[i]];

    // Select chart.
    this.setSelection(route);

    // Highlight polyline.
    route.eachLayer(function(layer) {
        if (layer instanceof L.Polyline) this.highlight(route, layer);
    }, this);

    // Update legend.
    if (this.options.legend) {
        (async(id) => {
            while (!L.DomUtil.get(id)) await new Promise(r => setTimeout(r, 500));
            L.DomUtil.get(id).parentNode.previousSibling.click();
        })('legend_' + route._leaflet_id);
    }

  },

In leaflet.filelayer.js I've added after line 86:

this.fire('data:loading', { filename: file.name, format: parser.ext });

this line:

routes.addTrackData(file.name, e.target.result);

It works but it doesn't load the elevation profile and it doesn't highlight the track.

If I click on the track it closes the graph and then at the next click the graph appears correctly.

[Raruto]

here you can see a simple single (.gpx) file uploader / viewer example:

• working files: via-emilia.gpx - via-aurelia.gpx.
• not working file: waypoints.gpx (further tests needed..)

@mbprevot it would be nice if you will work on an example repo on github (so anyone can test and try to help...)