I build layers based on L.vectorGrid.protobuf(). Each layer has interactive: true. Each works perfectly for click, mouseover and mouseout, but only in isolation.
When I have multiple layers only the last added layer has interactivity.
The structure looks like this
vctr_ctrl.js: - define map;
- let olys = {};
- define name, url & options;
- await make_layr(name, url, options);
- L.control.layers( {}, olys ).addTo(map);
vctr_make.js:
async function make_layr(name, url, options){
const vectorGridOptions = {
interactive: true,
getFeatureId: function(feature) { return feature.properties.id; },
vectorTileLayerStyles: { lyrs: options, },
};
olys[name] = L.vectorGrid.protobuf(url, vectorGridOptions)
olys[name].on('mouseover',function (e) {console.log('mouseover:: '})
}
By logging olys I can see that the event listeners are correctly attached, but mouseover is only triggered on the last, presumably top, layer. How do I propogate the event to all layers?
