GeoJson pointerEvents = 'none' any effects

[frankjar]

• I'm reporting a bug, not asking for help
• I've looked at the documentation to make sure the behaviour is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

---

How to reproduce

• Leaflet version I'm using: 1.0.3
• Browser (with version) I'm using: Chrome 55
• OS/Platform (with version) I'm using: Windows

What behaviour I'm expecting and which behaviour I'm seeing

I have to display two GeoJson overlays : one which can interact with user (click, mouse over) and the second with non interaction, just for displaying visual information.
The first layer is under the second and only the stroke has to be drawn.

I have specify "pointerEvents" to none for the second layer style, but LeafLet doesn't use this property : the generated svg is without this property.

Minimal example reproducing the issue

• this example is as simple as possible
• this example does not rely on any third party code

var interactiveLayer = L.topoJson(epci2014TopoJson, {
        style: function (feature) {
            return {
                weight: 0.0,
                fillOpacity: 0.7,
                color: 'rgb(200,200,200)',
                fillColor: getColor(feature.properties.siren_epci || feature.properties.SIREN_EPCI)
            }
        },
        onEachFeature: function (feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: zoomToFeature
            });

        }
    }).addTo(map);

    var justForDrawLayer=L.geoJson(departementsGeoJson, {
        style: function (feature) {
            return {
                pointerEvents : 'none',
                clickable:false,
                weight: 3,
                fillOpacity: 0.0,
                color: 'rgb(220,220,220)'
            }
        }
    }).addTo(map);

I have tried to put "clickable" to "false", no change.

Excuse me if my english is not enough right. Thank you.

Using http://playground-leaflet.rhcloud.com/ or any other jsfiddle like site.

[IvanSanchez]

I have specify "pointerEvents" to none for the second layer style, but LeafLet doesn't use this property

Well, pointerEvents it's not a recognised option for L.Path, so I'm not sure what were you expecting.

I have tried to put "clickable" to "false", no change.

That option changed name to interactive in 1.0.0, see "Options inherited from Interactive layer" in the documentation.

[frankjar]

Thanks for your response.

For the "pointerEvents" : as i was not enable to make the layer "inactive" for user interactions, i have tried to follow the example given here : http://leafletjs.com/examples/map-panes/ for the pane and the pointerEvents applied to the geoJson layer. Maybe i misunderstood this notion.

I will try with the inactive property for the geojson style.

My goal is to display some small countries (polygons) as a cloropleth map. Under this layer the tile layer, et at the top another geojson layer displaying larger countries, each one is a "container" for small countries. I want that this overlay displays only the polygon stroke with total transparency for the inner. I want the "small countries" overlay interacts with the user and the "larger countries" layer not.

Thx

[frankjar]

I have tried with "interactive:false", it works.
I'm sorry (to have solicited communauty) and happy (because it works).

Thx.

[dim2k2006]

I have the same task to render two layers and the top layer should be inactive. "interactive:false" helped, thanks!