Getting "layer._containsPoint is not a function" if preferCanvas is set to true. about leaflet.shapemarkers HOT 5 OPEN

Thanks @jgravois. Looking into it. 🔍

from leaflet.shapemarkers.

@swatisahay15, I don't yet understand why this is happening. It seems that a necessary method (_containsPoint) is not available on each layer object during the Leaflet Canvas.js source code that handles mouse interaction events.

If your entire Leaflet map needs to be set to preferCanvas: true, is the following (hopefully temporary) workaround acceptable to you?

1. Create an instance of L.SVG: var svgRenderer = L.svg();
2. For each shape marker you add to the map, include the following property in its options: renderer: svgRenderer

For example:

var svgRenderer = L.svg();

L.shapeMarkers.xMarker([45.5052, -122.6917], 50, {
  renderer: svgRenderer
}).addTo(map);

L.shapeMarkers.crossMarker([45.5470, -122.6984], 50, {
  color: 'red',
  renderer: svgRenderer
}).addTo(map);

While the bulk of your map will be in canvas, at least we can get these shape markers to live in a unique <svg> in the map's DOM structure without throwing the errors from Leaflet's Canvas.js.

from leaflet.shapemarkers.

cc/ @jwasilgeo

from leaflet.shapemarkers.

@swatisahay15 can you please provide a public example (or html+js code snippet) that would let us debug this and take a closer look?

from leaflet.shapemarkers.

this isn't a hard one to reproduce. the pen below is just the demo app from the README with the change @swatisahay15 described in the issue title.

var map = L.map('map', { preferCanvas: true })

https://codepen.io/jgravois/pen/bGBaeay

from leaflet.shapemarkers.