Leaflet: Different custom information popups for each GeoJSON polygon

Question

I'm really new to this and I'm trying to create popups for 2 polygons which will each contain a paragraph of written information.

The function I have so far differentiates between the 2 polygons by the property 'NUMBER' (numbered 1 and 2)is:

    function onPolygonClick(e) {

            if (feature.properties.NUMBER = 1) {
                    geojson.bindPopup("<this is some writing>");

            } else if (feature.properties.NUMBER = 2) {
                    geojson.bindPopup("<this is some more writing>");
            }
        }

I have this function tied to a click in a separate function:

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

Which is then put into the GeoJSON:

            // load the geojson data, style it, set events and add to map
            geojson = L.geoJson(data, { 
                        style: style,
                        onEachFeature: setEvents,   
                    }).addTo(map);

However the popup is not working. What should I do differently?

Answer 1

You need to bind the popup to each feature, setting the text then. You are trying to bind it to the geojson object, rather than the individual feature that you clicked. Move the bind function into the eachFeature function and reference only the curent feature instead of the entire geojson object:

function setEvents(feature, layer) {

    if (feature.properties.NUMBER = 1) {
        var blurb = "<this is some writing>";

    } else if (feature.properties.NUMBER = 2) {
        var blurb = "<this is some more writing>";
    }

    layer.bindPopup(blurb)

    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: openPopup()
    });
}