Search code examples
javascriptleafletleaflet.markercluster

Leaflet VectorGrid interactivity doesn't work if Leaflet.markercluster is used

I am trying to use Leaflet VectorGrid interactivity option for click and mouse events:

const vectorGrid = L.vectorGrid.slicer(geoJsonDocument, {
    rendererFactory: L.canvas.tile,
    vectorTileLayerStyles: {
      sliced: geoJSONStyle(false)
    },
    maxZoom: 22,
    indexMaxZoom: 5, // max zoom in the initial tile index
    interactive: true
  });

  vectorGrid.on("mouseover", function (e) {
    console.log("mouseover");
  });

  vectorGrid.on("click", function (e) {
    console.log("click");
  });

However, interactivity doesn't work if Leaflet.markercluster is used.

I created a codesandbox.

If you comment map.addLayer(mcg);, interactivity works.

Solution

  • Answer from Leaflet contributor:

    You're suffering from github.com/Leaflet/Leaflet/issues/4135 - setting preferCanvas to false works around the issue. The problem is not vectorgrid vs markercluster interactions, but rather vector features in a L.Canvas (markercluster polygons) vs anything other interactive layers (vectorgrid tiles