Bringing the flows to Front

[Zahma]

Is there any way to bring the canvas flows to the front ? I have 2 sets of objects, geojsonLayers and the canvas lines. I tried to use bringToFront() but it seems its not implemented for Canvas elements.
I read in a forum that there is this solution:

• mapInstance.getPanes()['tilePane'].style.zIndex = 2147483647;

here is the link of the example:

http://playground-leaflet.rhcloud.com/xopi/1/edit?js,output

[jwasilgeo]

Hey @Zahma sorry I didn't get to this before you closed it. Did you figure it out? You can certainly change the z-index for the 2 <canvas> DOM elements that this layer manually creates and inserts into Leaflet's layer DOM structure. The default CSS is:

.leaflet-map-pane canvas {
    z-index: 100;
}

The layer will, however, respect your wishes if you tell it during construction to use a different Leaflet JS map pane. If you haven't used these before, look at these references:

• http://leafletjs.com/reference-1.2.0.html#map-pane
• http://leafletjs.com/examples/map-panes/

[Zahma]

Thank you, I found the solution, I used the setPane method

[tapiamcclung]

Hi,
I am using Leaflet 1.5.1 and want to draw the a canvasFlowmapLayer on a specific user-defined pane. I pass the option to use a different pane when constructing the layer, but it is only creating the line canvas elements inside that pane. The circleMarkers are still created in the default overlay pane. As a result, the lines are drawn above the markers and cannot be clicked.
I tried adding something like pane: 'myPane' to the CanvasFlowmapLayer options and to the L.circleMarker definitions, but it's still creating the canvas element in the overlay pane.
bringToFront() didn't work for me either and I couldn't find setPane() in the Leaflet docs :/

Do you have any ideas?
Thanks!

[jwasilgeo]

@tapiamcclung I think I follow, but can you please create a live, public sample (codepen, jsbin, etc.) to help me debug and get some ideas for what to recommend next?

[tapiamcclung]

Hi, I created a small example with some flows.
https://codepen.io/tapiamcclung/pen/mdygpYE
In lines 27-28 I define a new map pane with a specific z-index.
Line 50 includes the option to use that pane.

I can't click the dots on the map. The lines are on top of the dots. By inspecting the elements, one can find something like:

<div class="leaflet-pane leaflet-overlay-pane">
  <canvas class="leaflet-zoom-animated" width="2152" height="662" style="transform: translate3d(-179px, 97px, 0px); width: 2152px; height: 662px;">
</div>
...
<div class="leaflet-pane leaflet-my-pane" style="z-index: 650;">
  <canvas class="leaflet-zoom-animated" width="1793" height="552" style="transform-origin: 50% 50%; transform: translate3d(0px, 152px, 0px);">
  <canvas class="leaflet-zoom-animated" width="1793" height="552" style="transform-origin: 50% 50%; transform: translate3d(0px, 152px, 0px);">
</div>

The top canvas is for the dots and uses the default z-index: 100. The bottom ones are for lines.

Thanks!

[jwasilgeo]

Thank you for the codepen and for providing your additional notes. It goes a long way in helping me debug this.

I believe the origin of this behaviour is the layer's default options.style function property that also uses an instance of L.Canvas over here. This style function is primarily responsible for styling and rendering the points, while as you noted the Bezier curves and animations are in the separately and custom handled <canvas> elements. Because this canvas renderer instance is created before the layer is created, I don't know that it is possible to attempt to set its pane.

The immediate solution is to create your own instance of L.Canvas, passing in which pane it should be in. Then, also pass in your own style option to the layer.

map.createPane('myPane');
map.getPane('myPane').style.zIndex = 650;

// this will help set the points in the desired pane
var canvasPointRenderer = L.canvas({ pane: 'myPane' });

var flowMapLayer = L.canvasFlowmapLayer(data, {

  // ... layer options object ...

  // this will set the Bezier lines and animations in the desired pane
  pane: 'myPane',

  // this will help set the points in the desired pane
  style: function (geoJsonFeature) {
    if (geoJsonFeature.properties.isOrigin) {
      return {
        renderer: canvasPointRenderer,
        radius: 5,
        weight: 1,
        color: 'rgb(195, 255, 62)',
        fillColor: 'rgba(195, 255, 62, 0.6)',
        fillOpacity: 0.6
      };
    } else {
      return {
        renderer: canvasPointRenderer,
        radius: 2.5,
        weight: 0.25,
        color: 'rgb(17, 142, 170)',
        fillColor: 'rgb(17, 142, 170)',
        fillOpacity: 0.7
      };
    }
  }

  // ... layer options object ...

});

// add your layer to the map

Looking back at this, I should remove the internal L.Canvas instance because I think it would be shared among all instances of the layer if we had multiple CanvasFlowmapLayers in the map. We can also note this pane workaround in the README.

[tapiamcclung]

Hi, thanks for the suggestion. In my development I had included jQuery so I was able to detach the container and append it to the pane where I want the flows to be. It works well, but you suggestion is more 'self-contained' and would certainly work better for several flow layers.