zIndex of pixi overlay

[mladenp]

So i am having trouble putting Pixi markers on top of other leaflet layers. I created new map pane for Pixi overlay and can change zIndex successfully. But when i put 999 zIndex for Pixi pane it doesn't go on top of polylines, event though they have lower zIndex by default.

Note: I see that regular leaflet layers have pane property inside options property while pixi layer has it root of layer object, and in options property it contains only 'forceCanvas'.

[manubb]

Can you try with absolute positioning on leaflet-pixi-overlay container:

.leaflet-pixi-overlay {position:absolute;}

?

[mladenp]

It didn't help, tried setting pos absolute on 'leaflet-pane' also but no luck. Is the pane property on the correct place in layer object? It looks it should be inside options?

[manubb]

The z-index of the svg pane is 200. In my tests, if i set:

.leaflet-pixi-overlay {
  position: absolute;
  z-index: 201;
}

the pixi overlay is before the svg. If i set:

.leaflet-pixi-overlay {
  position: absolute;
  z-index: 199;
}

the svg is before the pixi overlay. Are you certain this does not solve your problem? If it is the case, can you give me the versions of the libs you use, your browser name and version and some sample code, possibly in a fiddle?

[mladenp]

Yes, actually this solves the problem, i just had to do npm reinstall for some reason. Thanks, great plugin btw.

[manubb]

As the overlay inherits from L.Layer, you can already add a pane property into the overlay options:

var pixiOverlay = L.pixiOverlay(drawCb, container, {
    ...options,
    pane: 'markerPane'
});

(panes description) I will mention this in the README of next release.

[nebsar]

After using the above code, it started not to catch the mouse events on the leaflet draw editors. What can be the possible solution?