0

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);
    // }
    drawnItems.addLayer(layer);
    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)) {
        map.removeControl(el);
        elevationDisplayed = false;
        }
      else {
        el.clear();
        if (!elevationDisplayed) el.addTo(map);
        el.addData(layer.feature);
        currFeature = layer.feature;
        elevationDisplayed = true;
      }
    };
        var profile = drawData.features[0].geometry.coordinates;
        fetch('http://open.mapquestapi.com/elevation/v1/profile?key=tHXSNAGXRx6LAoBNdgjjLycOhGqJalg7&shapeFormat=raw&latLngCollection='+profile)
          .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){
                    showElevation(layer);
                    $('#hideElevation').show();
                    $('#hideElevation').click(function() {
                        $('.background').toggle();
                    });
                    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>');
                        //layer.bindPopup(popupGeojson);
                        map.on("zoomend", function() {
                            layer.bindPopup(popupGeojson).openPopup();
                        });
                        map.fitBounds(layer.getBounds());
                }
            }).addTo(drawnLine);
            drawnLine.addTo(map);
          })
});
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();

with

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; – Eslam Farag Mar 21 at 3:41
  • It works now, i have changed features[0].geometry to geometry directly. Thanks a lot. – Eslam Farag Mar 21 at 4:08

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.