I am trying to create a Leaflet.js web map that gives users the opportunity to draw lines. this line will be sent to mapquest elevation API to be retun to the map as a GeoJSON with elevation data calculated in order to showing some info about elevation in a popup for that drawn line.

The function goes well, but when i try to draw another line it doesn't work well and returns the first drawn line.

Here is my code:

    map.on(L.Draw.Event.CREATED, function(event) {
    var layer = event.layer;
    // var content = getPopupContent(layer);
    // if (content !== null) {
    //     layer.bindPopup(content);
    // }
    drawData = drawnItems.toGeoJSON();

        function showElevation(layer) {
        var coords = layer.feature.geometry.coordinates;
        var minPoint = minHPoint(coords, (layer.feature.geometry.type == 'LineString'));
        var maxPoint = maxHPoint(coords, (layer.feature.geometry.type == 'LineString'));
        minH = minPoint[2];
        maxH = maxPoint[2]

      if (elevationDisplayed && (currFeature === layer.feature)) {
        elevationDisplayed = false;
      else {
        if (!elevationDisplayed) el.addTo(map);
        currFeature = layer.feature;
        elevationDisplayed = true;
        var profile = drawData.features[0].geometry.coordinates;
          .then(r => r.json()) 
          .then(data => {
            var latlngs = [];
                for (var i=0; i<data.shapePoints.length; i=i+2) {
                    latlngs.push([data.shapePoints[i], data.shapePoints[i+1], data.elevationProfile[i/2].height]);

            geojson = {
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": latlngs

            var popupGeojson = L.popup();

            L.geoJSON(geojson, {
                style: function(feature, layer) {
                    return {'color': 'red'}
                onEachFeature: function(feature, layer){
                    $('#hideElevation').click(function() {
                    var firstPoint = feature.geometry.coordinates[0][2];
                        gainElevation = maxH - firstPoint;
                        var length = turf.length(geojson, {units: 'kilometers'});
                        popupGeojson.setContent("Distance: "+'<strong>'+Math.round(length)+ " km"+'</strong>'+'<br>'+"Low point: "+'<strong>'+minH+' meters'+'</strong>'+'<br>'+"High point: "+'<strong>'+maxH+' meters'+'</strong>'+'<br>'+"Gain: "+'<strong>'+Math.round(gainElevation)+" meters"+'</strong>');
                        map.on("zoomend", function() {

1 Answer 1


Assuming that drawnItems is feature group, you add each new line to this group. Then instead of converting only new line to GeoJSON, you convert whole feature group which of course starts with the first drawn item.

To convert to GeoJSON only new line, just replace

drawData = drawnItems.toGeoJSON();


drawData = layer.toGeoJSON();
  • Thanks a lot for your answer, i have tried it but it can't read property of [0] in the profile variable that will be sent to mapquest elevation API var profile = drawData.features[0].geometry.coordinates; Commented Mar 21, 2019 at 3:41
  • It works now, i have changed features[0].geometry to geometry directly. Thanks a lot. Commented Mar 21, 2019 at 4:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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