Add Elevation Gain / Loss in the summary

[elecoest]

Hello,

What do you think about the positive elevation information ?

It could by computed and add with the others informations.

Best regards, Manu

[Raruto]

Hi Emmanuel,

I think you're referring to elevation gain / loss:

Based on this, here it is a proof of concept on how to display this information:

<div id="gpx-summary" class="gpx-summary">

  <span class="totlen">
    <span class="summarylabel">Total Length: </span>
    <span class="summaryvalue">0</span>
  </span> &mdash; 

  <span class="maxele">
    <span class="summarylabel">Max Elevation: </span>
    <span class="summaryvalue">0</span>
  </span> &mdash; 

  <span class="minele">
    <span class="summarylabel">Min Elevation: </span>
    <span class="summaryvalue">0</span>
  </span> &mdash; 

  <span class="gain">
    <span class="summarylabel">+</span>
    <span class="summaryvalue">0</span>
  </span> &mdash; 

  <span class="loss">
    <span class="summarylabel">-</span>
    <span class="summaryvalue">0</span>
  </span>

</div> <!-- .gpx-summary -->

...

var controlElevation = L.control.elevation({
  summary: false // Disable default summary
});

controlElevation.on('eledata_loaded', function(e) {
   var q = document.querySelector.bind(document);
   var track = e.track_info;
   var layer = e.layer;

  // Update custom .gpx-summary info
   q('.totlen .summaryvalue').innerHTML = layer.get_distance().toFixed(2) + " km";
   q('.maxele .summaryvalue').innerHTML = layer.get_elevation_max().toFixed(2) + " m";
   q('.minele .summaryvalue').innerHTML = layer.get_elevation_min().toFixed(2) + " m";
   q('.gain .summaryvalue').innerHTML = layer.get_elevation_gain().toFixed(2) + " m";
   q('.loss .summaryvalue').innerHTML = layer.get_elevation_loss().toFixed(2) + " m";
});

// Load track from url
controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");

...

Further info and details:

• leaflet-gpx: available functions
• MPettazoni: gpx example
• Raruto: custom summary

Happy coding, Raruto

[elecoest]

Right, I tested it and it work fine for the data part. but I have a bug with the download link.

As you can read :

<div class="elevation-summary false-summary">
  <span class="download"><a href="#">Télécharger le circuit</a></span>
  <span class="download"><a href="#">Télécharger le circuit</a></span>
</div>

We have 2 links download generated.

My code :

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@1.0.0/dist/leaflet-elevation.min.css" />

<div id="mapbike" style="height:700px;"></div>
<div id="gpx-summary" class="gpx-summary">
  <span class="totlen">
    <span class="summarylabel">Distance Totale: </span>
    <span class="summaryvalue">0</span>
  </span> &mdash;

  <span class="maxele">
    <span class="summarylabel">Altitude max: </span>
    <span class="summaryvalue">0</span>
  </span> &mdash;

  <span class="minele">
    <span class="summarylabel">Altitude min: </span>
    <span class="summaryvalue">0</span>
  </span> &mdash;

  <span class="gain">
    <span class="summarylabel">D+</span>
    <span class="summaryvalue">0</span>
  </span> &mdash;

</div> <!-- .gpx-summary -->

<script src="//unpkg.com/d3@5.15.0/dist/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.js"></script>
<script src="//unpkg.com/@raruto/leaflet-elevation@1.1.0/dist/leaflet-elevation.min.js"></script>

<script>
  L.registerLocale('fr', {
    "Total Length: ": "Distance: ",
    "Max Elevation: ": "Altitude Max: ",
    "Min Elevation: ": "Altitude Min: ",
    "Download": "Télécharger le circuit",
  });
  L.setLocale('fr');

  var opts = {
    map: {
      center: [41.4583, 12.7059],
      zoom: 5,
      fullscreenControl: false,
      resizerControl: true,
    },
    elevationControl: {
      url: "/media/gpx/<?php echo $item->gpxbike;?>_bike.gpx",
      options: {
        theme: "lightblue-theme",
        collapsed: false,
        lazyLoadJS: true,
        legend: true,
        loadData: {
          defer: false,
          lazy: false,
        },
        followMarker: true,
        detached: true,
        //summary: "multiline",
        summary: false,
        useLeafletMarker: true,
        marker: 'elevation-line',
        markerIcon: L.divIcon({
          className: 'elevation-position-marker',
          html: '<i class="elevation-position-area"></i>',
          iconSize: [32, 32],
          iconAnchor: [16, 16],
        }),
        gpxOptions: {
          async: true,
          marker_options: {
            startIconUrl: '/media/com_t2rank/css/images/green-flag-48.png',
            endIconUrl: '/media/com_t2rank/css/images/red-flag-48.png',
            shadowUrl: null,
            wptIcons: {
              '': L.divIcon({
                className: 'elevation-waypoint-marker',
                html: '<i class="elevation-waypoint-icon"></i>',
                iconSize: [30, 30],
                iconAnchor: [8, 30],
              })
            },
          },
        },
      },
    },
    layersControl: {
      options: {
        collapsed: false,
      },
    },
  };

  var map = new L.Map('mapbike', opts.map);
  L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    maxZoom: 20,
    attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
  L.control.scale().addTo(map);

  var controlElevation = L.control.elevation(opts.elevationControl.options);
  var controlLayer = L.control.layers(null, null, opts.layersControl.options);

  controlElevation.addTo(map);
  controlElevation.load(opts.elevationControl.url);

  controlElevation.on('eledata_loaded', function(e) {
    var q = document.querySelector.bind(document);
    var track = e.track_info;
    var layer = e.layer;
    var distance = layer.get_distance() / 1000;
    // Update custom .gpx-summary info
    q('.totlen .summaryvalue').innerHTML = distance.toFixed(2) + " km";
    q('.maxele .summaryvalue').innerHTML = layer.get_elevation_max().toFixed(2) + " m";
    q('.minele .summaryvalue').innerHTML = layer.get_elevation_min().toFixed(0) + " m";
    q('.gain .summaryvalue').innerHTML = layer.get_elevation_gain().toFixed(0) + " m";
    //q('.loss .summaryvalue').innerHTML = layer.get_elevation_loss().toFixed(0) + " m";
  });

  map.on('eledata_loaded', function(e) {
    if (!controlLayer._map) controlLayer.addTo(map);
    controlLayer.addOverlay(e.layer, e.name);
  });
</script>

[Raruto]

Try again with version 1.1.1

[elecoest]

very good job. it's all clear.