Why does bindPopup not work inside my transparent Leaflet polygons?

Question

I am trying to display a popup from the attribute value of a geojson layer by calling the geojson file. However, the popup displayed on the edges of the boundaries of the polygons features only.

Here is the code:

var region = L.geoJson(region_data, {
    style: {
        fillColor: 'none',
        weight: 2,
        opacity: 1,
        color: 'black'
    },
    onEachFeature: function (feature, layer) {
        if (feature.properties && feature.properties.name) {
            layer.bindPopup(feature.properties.name);
        }

    }
})

Answer 1

Leaflet (by default) takes the fillColor option given to any instances of L.Path and turns that into a fill attribute of a SVG <path>, as per this fragment of code:

    if (options.fill) {
        path.setAttribute('fill', options.fillColor || options.color);
        path.setAttribute('fill-opacity', options.fillOpacity);
        path.setAttribute('fill-rule', options.fillRule || 'evenodd');
    } else {
        path.setAttribute('fill', 'none');
    }

On the other hand, as written in the SVG specification, the color attribute can be 'none', in which case the web browser can completely ignore polygon fill - and that includes pointer hit detection, which in turn means mouse click events, which in turn means popup behaviour. In fact, that's the behaviour imposed by Leaflet when the fill option of a L.Path is set to false (as per the code snippet above).

If you want the polygon fill to fire pointer events (and the associated behaviour of triggering display of a bound popup), set the fillColor option to any other value. Remember that 'transparent' is a valid colour value.