Leaflet Sidebar - set content depending on clicked GeoJSON feature

Question

My goal is to set the content of the sidebar depending on what GeoJSON feature was clicked on.

For example when clicked on polygon A the content of the sidebar is: "This is A" and when clicked on polygon B the content of the sidebar is: "This is B"

my approach to the problem (SOLVED):

1. function for click event to select GeoJSON feature:

       function onEachFeature(feature, layer) {
           layer.on({
               mouseover: highlightFeature,
               mouseout: resetHighlight,
               click: openSidebar 
            });
        }
   

2. function to open sidebar:

       function openSidebar(e) {
           sidebar.toggle();
           if (e.target.feature.properties.name == "House 24") {
               sidebar.setContent('this is House 24');
           }
       }
   

3. loaded GeoJSON:

       var my_geojson = L.geoJson(my_geojson,{
           style: myStyle,
           onEachFeature: onEachFeature
       }).addTo(map);
   

Answer 1

Might just need e.target or e.layer before feature.properties.name - console.log is your friend here and will likely answer your question.

Answer 2

If the problem is that "feature.properties.name is undefined" just pass the feature into openSidedbar. And if you want to display "this is A" or "this is B" pass that feature parameter into html (assuming that sidebar is a jQuery object):

UPDATE

 function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: function(e){openSidebar(e) }
     });
 }

function openSidebar(selection) {
    sidebar.toggle();
    sidebar.html('<h1> this is ' + selection.feature.properties.name + '</h1>');

}