0

I am new to leaflet (but I used leaflet with R) and javascript. I have discovered two great leaflet plugins, Leaflet.Elevation and leaflet-gpx. I managed to make them work individually, but I was wondering if they could be both combined in one map. I tried but I failed miserably. Maybe I could use Leaflet.Sync but I was wondering if someone could point me in the right direction (if possible).

here is what I have so far. The first big part of the code is working, it the last past part of the code (starting at var el = L.control.elevation();) that I can't make work

<head>
<title>leaflet-gpx demo</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<link rel="stylesheet" href="../dist/leaflet.elevation-0.0.4.css" />

<style type="text/css">
  body { width: 1100px; margin: 0 auto; }
  .gpx { border: 5px #aaa solid; border-radius: 5px;
    box-shadow: 0 0 3px 3px #ccc;
    width: 1100px; height: 550px;, margin: 0; }
  .gpx header { padding: 0.5em; }
  .gpx h4 { margin: 0; padding: 0; font-weight: bold; }
   .gpx .start { font-size: smaller; color: #444; }
  .gpx .map { border: 1px #888 solid; border-left: none; border-right: none;
    width: 1100px; height: 430px; margin: 0; }
  .gpx footer { background: #f0f0f0; padding: 0.5em; }
  .gpx ul.info { list-style: none; margin: 0; padding: 0; font-size: smaller;}
  .gpx ul.info li { color: #666; padding: 2px; display: inline; }
  .gpx ul.info li span { color: black; }
</style>
</head>


<body>
  <article>
    <div class="map" id="demo-map"></div>
  </article>

  <footer>
    <ul class="info">
      <li>Distance:&nbsp;<span class="distance"></span>&nbsp;meter</li>
      &mdash; <li>Duration:&nbsp;<span class="duration"></span></li>
<!--      &mdash; <li>Pace:&nbsp;<span class="pace"></span>/meter</li> -->
 <!--     &mdash; <li>Avg&nbsp;HR:&nbsp;<span class="avghr"></span>&nbsp;bpm</li> -->
      &mdash; <li>Elevation:&nbsp;+<span class="elevation-gain"></span>&nbsp;meter,
        -<span class="elevation-loss"></span>&nbsp;meter
        (net:&nbsp;<span class="elevation-net"></span>&nbsp;meter)</li>
       &mdash;  Inspired by <a href="https://github.com/mpetazzoni/leaflet-gpx">leaflet-gpx</a>.<br>
    </ul>
  </footer>
</section>

<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="https://rawgithub.com/mpetazzoni/leaflet-gpx/master/gpx.js"></script>
<script type="text/javascript" src="../dist/leaflet.elevation-0.0.4.min.js"></script>
<script type="application/javascript">
  function display_gpx(elt) {
    if (!elt) return;

    var url = elt.getAttribute('data-gpx-source');
    var mapid = elt.getAttribute('data-map-target');
    if (!url || !mapid) return;

    function _t(t) { return elt.getElementsByTagName(t)[0]; }
    function _c(c) { return elt.getElementsByClassName(c)[0]; }

    var map = L.map(mapid);
    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'iles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    }).addTo(map);


    new L.GPX("gpsfile.gpx", {
      async: true,
      marker_options: {
            startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
            endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
            shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
      },
    }).on('loaded', function(e) {
      var gpx = e.target;
      map.fitBounds(gpx.getBounds());

      _t('h3').textContent = gpx.get_name();
      _c('start').textContent = gpx.get_start_time().toDateString() + ', '
        + gpx.get_start_time().toLocaleTimeString();
      _c('end').textContent = gpx.get_end_time().toDateString() + ', '
        + gpx.get_end_time().toLocaleTimeString();
      _c('distance').textContent = gpx.get_distance().toFixed(2);
      _c('duration').textContent = gpx.get_duration_string(gpx.get_moving_time());
<!--      _c('pace').textContent     = gpx.get_duration_string(gpx.get_moving_pace(), true); -->
<!--      _c('avghr').textContent    = gpx.get_average_hr(); -->
      _c('elevation-gain').textContent = (gpx.get_elevation_gain()).toFixed(0);
      _c('elevation-loss').textContent = (gpx.get_elevation_loss()).toFixed(0);
      _c('elevation-net').textContent  = (gpx.get_elevation_gain()
      - gpx.get_elevation_loss()).toFixed(0);
    }).addTo(map);
  }

  display_gpx(document.getElementById('demo'));

    var el = L.control.elevation();
    el.addTo(map);
    var g=new L.GPX("gpsfile.gpx", {
        async: true,
         marker_options: {
            startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
            endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
            shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
          }
    });
    g.on('loaded', function(e) {
            map.fitBounds(e.target.getBounds());
    });
    g.on("addline",function(e){
        el.addData(e.line);
    });
    g.addTo(map);


</script>
</body>
  • A code sample showing what you have tried would be a useful start. The question is too vague as it stands. In theory, there is no reason why you can't use multiple Leaflet plugins in the same page. – John Powell Oct 14 '15 at 8:04
  • According to the docs, Leaflet.Elevation uses d3, which I don't see included in your code, so that may be part of the problem. Can you look at the console output to see what errors are being thrown? – nathansnider Oct 15 '15 at 3:06
  • to nathansnider, it says "Uncaught ReferenceError: map is not defined" and the problem is at line "el.addTo(map);" – MLavoie Oct 15 '15 at 10:46
0

I managed to make it work. The code was fine but only the order needed to be change. Below the chuck of code that needed to be reordered.

        var map = L.map(mapid);
    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'iles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    }).addTo(map);

    var el = L.control.elevation();
    el.addTo(map);

            var g=new L.GPX("gpsfile.gpx", {
        async: true,
         marker_options: {
            startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
            endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
            shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
          }
    });
    g.on('loaded', function(e) {
            map.fitBounds(e.target.getBounds());
    });
    g.on("addline",function(e){
        el.addData(e.line);
    });
    g.addTo(map);

    new L.GPX("gpsfile.gpx", {
      async: true,
      marker_options: {
            startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
            endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
            shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
      },
    }).on('loaded', function(e) {
      var gpx = e.target;
      map.fitBounds(gpx.getBounds());

      _t('h3').textContent = gpx.get_name();
      _c('start').textContent = gpx.get_start_time().toDateString() + ', '
        + gpx.get_start_time().toLocaleTimeString();
      _c('end').textContent = gpx.get_end_time().toDateString() + ', '
        + gpx.get_end_time().toLocaleTimeString();
      _c('distance').textContent = gpx.get_distance().toFixed(2);
      _c('duration').textContent = gpx.get_duration_string(gpx.get_moving_time());
<!--      _c('pace').textContent     = gpx.get_duration_string(gpx.get_moving_pace(), true); -->
<!--      _c('avghr').textContent    = gpx.get_average_hr(); -->
      _c('elevation-gain').textContent = (gpx.get_elevation_gain()).toFixed(0);
      _c('elevation-loss').textContent = (gpx.get_elevation_loss()).toFixed(0);
      _c('elevation-net').textContent  = (gpx.get_elevation_gain()
      - gpx.get_elevation_loss()).toFixed(0);
    }).addTo(map);
  }

  display_gpx(document.getElementById('demo'));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.