GeoJSON mouse events not triggered with preferCanvas=true

[digEmAll]

Description

The CircleMarker layer seems to block the LGeoJson mouse interactivity when preferCanvas: true.

Live Demo

I prepared the following code-sandbox reproducing the issue:
https://codesandbox.io/s/leaflet-canvas-geojson-click-uy9ez
Usage:
The left map has preferCanvas: true, the right one has preferCanvas: false ;
on the right map you can click on italian regions triggering the event and see the region name in the top-right; on the left map this does not work.

Steps to Reproduce

• create a map with the option preferCanvas: true
• add some circles using LCircleMarker
• add LGeoJson layer and set a mouse event (e.g. click) in the onEachFeature function using layer.on("eventname",fn).

Expected Results

The mouse event calls the callback

Actual Results

The mouse event won't trigger
(but it works fine with map option: preferCanvas: false)

Browsers Affected

Tested on:

• [x ] Chrome
• [x ] Firefox
  (but I guess all are affected)

Versions

• Leaflet: v1.6.0
• Vue: v2.6.11
• Vue2Leaflet: v2.5.2

Similar issue (closed) : #358

[nmezzopera]

@digEmAll Does this happens for leaflet too? or is a vue2-leaflet specific bug?

[digEmAll]

@DonNicoJs: sorry for the delay, to be honest I'm not sure about the base leaflet library.
If you need it, I can try to build a similar codebox using only leaflet, but at the moment I don't have much time; I'll do it as soon as I can.

Thanks for your quick interest :)

[mikeu]

I haven't had a chance to look at all into why this might be happening, but it does appear to be a vue2-leaflet issue. Here's a fork of the original repro that uses all the same data with vanilla Leaflet, and which does not exhibit the incorrect behaviour with preferCanvas: true in the map options: https://codesandbox.io/s/leaflet-canvas-geojson-click-forked-ksres?file=/index.js

[cvakodobro]

any updates? I have same problem when using circle marker and polygon. If I render only polygons they are clickable, but when I add circle markers, there are no events for polygons.

[mrosminin]

i have the same bug - after adding layer with LCircleMarkers LGeoJSONLayer looses interactibvity, treated by creation own "LCircleMarker" through extending L.DivIcon.

[demesiooliveira]

Hi guys, any updates? I have the same problem.

[joingenor]

Hi guys, any updates? We have the same problem. After adding layer with LCircleMarkers, l-tile-layer looses events

[omar-adzagic]

any updates?

[pakal]

I've investigated a bit, thanks to your sandboxes, I saw the difference was that vuejs circlmarkers added themselves to the markerPane! Without this, all works fine.

It turns out to be this bug actually : Leaflet/Leaflet#6205
Different created by Vue-leaflet, 1 per Pane, hide eachother from mouse events.

So to solve it, I used the NPM plugin provided in the ticket discussion : https://github.com/danwild/leaflet-event-forwarder
I called it from the "ready" event handler of the vue-leaflet map component.

And it worked!!

[jockerfox]

Hi, I was hoping that with the release of Leaflet 1.8 this bug would be fixed, but it is not.
Does anyone know if this fix is planned?