Leaflet.VectorGrid icon indicating copy to clipboard operation
Leaflet.VectorGrid copied to clipboard

why can't I click the feature when I add 2 Leaflet.VectorGrid layer?

Open liyihongcug opened this issue 5 years ago • 2 comments

I have to point out that Leaflet.VectorGrid is OK when Leaflet.VectorGrid handle with one vectorTile address. It can click all the feature's properties of the Leaflet.VectorGrid layer.

But when I add many Leaflet.VectorGrid layer. layers address (for examples ,2 Leaflet.VectorGrid layers). It fails that only one layer's feature can be clicked and others can't be clicked.

all the layers are configured with interactive: true by me. I want to know the reason and how to solve with it .

codes are below :(only one (pbfLayer1,pbfLayer2) can be clicked and the other can't be clicked ) var cs1TileOptions = { rendererFactory: L.canvas.tile, vectorTileLayerStyles: { 'cs1: { weight: 1....... } }, interactive: true, getFeatureId: function(f) { return f.properties.OBJECTID; } }; v ar pbfLayer1= L.vectorGrid.protobuf(...cs1TileOptions pbfLayer1.on('click', function (e) { var properties = e.layer.properties; //console.log(e); L.popup().setContent('lvhua'+properties.名称+properties.地址+''+ properties.OBJECTID) .setLatLng(e.latlng) .openOn(map); });

var cs2TileOptions = { rendererFactory: L.canvas.tile, vectorTileLayerStyles: { 'cs2: { weight: 1....... } }, interactive: true, getFeatureId: function(f) { return f.properties.OBJECTID; } }; v ar pbfLayer2= L.vectorGrid.protobuf(...cs2TileOptions pbfLayer2.on('click', function (e) { var properties = e.layer.properties; //console.log(e); L.popup().setContent( properties.OBJECTID) .setLatLng(e.latlng) .openOn(map); });

liyihongcug avatar Jul 04 '20 01:07 liyihongcug

Hi ! Your layers are canvases, and you can't click through a canvas. See https://github.com/Leaflet/Leaflet.VectorGrid/issues/88#issuecomment-284350575

If possible, use the SVG renderer for the layer with the least elements, and put it above the canvas layer.

Hugi-R avatar Jul 21 '20 13:07 Hugi-R

Actually you can. See my workaround here: https://gist.github.com/perliedman/84ce01954a1a43252d1b917ec925b3dd

mngyng avatar Mar 24 '22 03:03 mngyng