pointerevents under leaflet 1.0.0-rc1

[Zankoku-Okuno]

When moving from Leaflet 0.7.7 to 1.0.0, mouse interaction broke.
My firebug reported that leaflet.css line 207 sets .leaflet-pane > svg path { pointerevents: none; }, overriding this plugin's css.

I found a workaround, and then a possible solution (I don't really want to fork for a one-line change, but I will if you want me to send a proper pull request.).

To solve the issue, I edited the plugin code to replace the g.d3-overlay * selector with .leaflet-pane > svg > g.d3-overlay *, which then overrides leaflet's css. I don't have much code that exercises this feature, but it seems to have the right intent.

For completeness, here's the code I'm using to draw the svg, including a workaround to re-enable pointerevents, which is unneccessary if the change above is made.

var svgLayer = L.d3SvgOverlay(function (selection, projection) {
    var upd = selection.selectAll("path").data(collection.features);
    upd.enter()
        .append("path")
        .attr('d', projection.pathFromGeojson)
        .attr('style', 'pointer-events:visiblePainted;') // WORKAROUND: required for leaflet 1.0.0-rc1
        .on('click', function () { console.log('hi'); });
    upd.attr('stroke-width', 1.5 / projection.scale);
});
svgLayer.addTo(map);

[xEviL]

@Zankoku-Okuno thanks a lot for finding a bug. Please create a small test case (e.g. by forking the existing examples) to show that your fix works and do a pull request with the change.

[jotasolano]

Is this bug still appearing in the stable release of Leaflet? I'm using v 1.1.0 via npm and I had to use the .attr() workaround.

[purejoy]

I can confirm this bug still exists.

[jotasolano]

This happened to me using the current stable version of Leaflet as well (1.1.0), along with "vanilla" d3 (not using Leaflet.D3SvgOverlay), so could this actually be a Leaflet issue?

Using .attr('style', 'pointer-events:visiblePainted;') is a decent workaround as proposed by @Zankoku-Okuno .

[purejoy]

It seems Leaflet set 'pointer-events' to 'None' while initializing a new SVG element.

[jotasolano]

That would seem accurate. Not sure if there's a "global" setting for leaflet that would allow pointer events, instead of having to use an attribute on every SVG you append to the DOM.

[miskaknapek]

Yeah, also stil experiencing the bug.

I put the following css rule in a style element in the header of the html page, and mouse-events worked again ( I got the classes to select, from using the DOM element inspector in Chrome, and digging down to the D3 inserted SVG elements ) :

.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container {
				pointer-events: visible;
			}