4

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);
    
2

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

1

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>');

}

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.