Vue2leaflet: GeoJSON mouse events not triggered with preferCanvas=true

Created on 1 Jul 2020  路  4Comments  路  Source: vue-leaflet/Vue2Leaflet

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) : https://github.com/vue-leaflet/Vue2Leaflet/issues/358

bug confirmed

All 4 comments

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

@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 :)

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

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

CharlesOkwuagwu picture CharlesOkwuagwu  路  5Comments

DmitriyVTitov picture DmitriyVTitov  路  4Comments

mits87 picture mits87  路  3Comments

mnboos picture mnboos  路  3Comments

carlmjohnson picture carlmjohnson  路  4Comments