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) {


1 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.

  • Now it works, many thanks @IvanSanchez
    – Amsalu
    Apr 10, 2021 at 6:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.