Leaflet elevation profiles with multiple GeoJSON features

Question

I have a map which loads a GeoJSON containing two features (lines). I would like to use Leaflet Elevation plugin to display an elevation profile for each of those lines. The problem with my code is that when I click a feature, there is no data added to the elevation profile.

var map = L.map('map').setView([44.635, 22.653], 11);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

function addData(e) {
    var el = L.control.elevation();
    el.addData(e);
    map.addControl(el);
}

function onEachFeature(feature, layer) {
    layer.on({
    click: addData
    });
}

var trails = new L.GeoJSON.AJAX('https://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/map.geojson', {
onEachFeature: onEachFeature
}).addTo(map);

Here's a JSFiddle of my work: http://jsfiddle.net/pufanalexandru/eaok0Lnz/3/

Answer 1

It seems like the feature data was not passed to the addData function.

If I change this

function onEachFeature(feature, layer) {
    layer.on({
    click: addData
    });
}

to this

function onEachFeature(feature, layer) {
    layer.on ('click', function(e) {
        addData(feature)
    });
}

then it works. I changed the onclick notation a bit (following this example in the docs), because otherwise it would already show the elevation profiles on load instead of on click.