1

I have a GeoJson file that contains many routes, i need to show each route on an elevation profile via Leaflet.elevation plugin, in need to when i click on a route it's profile show on the elevation profile, here is my code

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

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

  $.getJSON('data/routes/network=Nwn_Lines.json', function(e) {
    Nwn = L.geoJson(e, {
      style: function(feature, layer) {
        return {color:'#0000FF', weight:3, opacity: 0};
      }, onEachFeature: function(feature, layer) {
        layer.on('mouseover', function() {
          $('#Name').html("Name: "+'<strong>'+layer.feature.properties.name+'</strong>');
          layer.setStyle({color: '#FFFF00', opacity: 1});
        })
        layer.on('mouseout', function() {
          $('#Name').html("Name: ");
          layer.setStyle({opacity: 0});
        })
      }, onEachFeature: onEachFeature
    }).addTo(map);
  });
2

There are three major things that prevent your code from working. You have option onEachFeature defined twice for geoJSON layer. Second definition overrides the first one. Then you call your addData function with feature parameter instead of event e parameter. And when adding data to control you are using event e parameter insetad of e.target.layer.

Code should look something like this:

var elevationDisplayed = false;
var currFeature;

var el = L.control.elevation();

function showElevation(layer) {
  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;
  }
};

$.getJSON('data/routes/network=Nwn_Lines.json', function(e) {
  Nwn = L.geoJson(e, {
    style: function(feature, layer) {
      return {color:'#0000FF', weight:3, opacity: 0};
    }, onEachFeature: function(feature, layer) {
      layer.on('mouseover', function() {
        $('#Name').html("Name: "+'<strong>'+layer.feature.properties.name+'</strong>');
        layer.setStyle({color: '#FFFF00', opacity: 1});
      })
      layer.on('mouseout', function() {
        $('#Name').html("Name: ");
        layer.setStyle({opacity: 0});
      })
      layer.on ('click', function(e) {
        showElevation(e.target);
      });
    }
  }).addTo(map);
});

I added some simple logic that elevation control is hidden when you click on line with displayed elevation the second time.


After checking input geoJSON file it became clear it does not contain height data. Each point should have three coordinates: [lat, lon, height]. This geoJSON has only [lat, lon]. That's why Chrome broser throws error

Error: <path> attribute d: Expected number, "M0,NaNL0.0295626108…".

IE11 and Firefox even do not complain.

22
  • I have tried it, but it still doesn't work. it gives an error about: Error: <path> attribute d: Expected number, "M0,NaNL0.0671259523…". – Eslam Farag Feb 16 '19 at 19:59
  • Are you sure your json file has geojson structure? You can check it on one of online checking sites, for example geojsonlint.com or geojson.io – TomazicM Feb 16 '19 at 20:11
  • I have double checked it on this tool, it says that "crs" line should be removed. So i have removed it and Geojson is fine now, but it still gives an error about d3 file. Error: <path> attribute d: Expected number, "M0,NaNL0.0671259523…". – Eslam Farag Feb 16 '19 at 20:21
  • Could you provide your geojson file so I can check it? – TomazicM Feb 16 '19 at 20:26

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.