[GIS] Leaflet Sidebar – How to get data based on the GeoJSON you clicked

jqueryleaflet

I am having trouble getting my GeoJSON data to appear on my sidebar when I click on a marker?

As right now, I am able to click on a marker and make the sidebar appear, but without any information.

Below is the line of code I am using:

var aLayer = L.geoJson(GeoJSON, {      
    });

aLayer.on('click', function () {
        sidebar.toggle();
        $('Name').innerHTML = "Name: " + feature.properties.name;
    });

My real issue is that I can't figure out how to call the GeoJSON properties when I click on the marker. I am keeping getting this error when I check the console log: feature is not defined. I tried using the code that is provided in this page,Leaflet Sidebar – set content depending on clicked GeoJSON feature, but I can't get it to work.

Best Answer

First, check you using the correct jquery selector, probably $('#Name') instead of $('Name')

Then use the parameter of the callback function to get the event, and check its properties. Probably something like this will work:

aLayer.on('click', function (e) {
  sidebar.toggle();
  var name = e.target.feature.properties.name
  $('#name').innerHTML = "Name: " + feature.properties.name;
});
Related Question