Is there a way to control the order of canvas-elements in Leaflet?

If the layers are represented by canvas html-elements, then canvas that will turn out to be in the very top (with max z-index) will block any other canvas underneath. In this case, the order of those layers won't even matter, since eventually all canvas elements are blocked by the very top canvas element that covers the whole map.

If we set preferCanvas option to false in Leaflet, then every feature will be represented by html element(svgs/paths/etc), so we will have thousands of svg's elements in html structure. This way, the ordering (z-index) will start working, but it kills performance since canvas elements are not used anymore, and we have thousands of html-elements instead.

Are there any other options not to use canvas that blocks all layers underneath and at the same time not to create thousands of elements in html? Or maybe any option to use canvas but somehow overcome that issue and make ordering work?

Here it is how we set up z-index for the pane: ("order" value comes from a prop of the component):

  ({ instance }) => {
    if (order) {
      // A constant so as to not interfere with other built in layers
      const featureLayerStartZIndex = 350;
      const pane = instance.createPane(
      if (pane) {
        pane.style.zIndex = `${featureLayerStartZIndex + order}`;

Here you can see how it eventually looks like in the html structure: html structure

Eventually, the only layer that is on the very top will be the interactive one, it will cover the map completely. Other canvas layers won't get any events as if they are static layers.

  • 1
    See concept of map panes in Leaflet: leafletjs.com/reference.html#map-pane. Each layer type has it's own map pane, and these can be controlled by their zIndex value. When vector layer is rendered with L.canvas renderer, it's still by default rendered on overlay pane, but you can create separate map pane with it's own zIndex and render layer there.
    – TomazicM
    Oct 13, 2022 at 19:41
  • Thanks for the response! I set z-index for a div element that has a "leaflet-pane" class, and I have "canvas" element as a child of that "leaflet-pane" element. So yeah, I actually set z-index to a "leaflet-pane". But the problem is that the very top "leaflet-pane" with nested "canvas" element will block any other "leaflet-pane" elements with their own canvas. Oct 13, 2022 at 20:16
  • 1
    As far as "blocking" goes, there is no difference between SVG rendered layer or canvas rendered ones. Please post an example of code where with undesired behavior of canvas layers as far as "blocking" is concerned.
    – TomazicM
    Oct 13, 2022 at 20:21
  • Sorry, but I don't understand where the problem is regarding canvas rendered layers. It would help if you would post reproducible example.
    – TomazicM
    Oct 14, 2022 at 7:04


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.