L.control features showing up only below raster layers

Question

I've been studying Leaflet and, when I was trying out some plugins, this issue showed up.

Pop-ups and markers works fine, but the line (perimeter) won't show up unless I turn off the raster layers. It happens with different plug-ins, so probably it has something to do with my code - the structure was created by QGIS2Web and I've done some modifications.

Here is the code:

        map.createPane('pane_polylinemeasure');
        map.getPane('pane_polylinemeasure').style.zIndex = 500;
        var polylineMeasure = new L.control.polylineMeasure({
            pane: 'pane_polylinemeasure',
            (...)
        });
        polylineMeasure.addTo(map);

L.control.polylineMeasure refers to one of the plugins I've tried: Leaflet.PolylineMeasure. But as I said, it happens to others measurement plugins too.

All other layers' zIndex range from 400 to 410 (400 and 401 are my raster layers). Please notice plugin's markers and popups are working as intended, but the lines and polygons it creates aren't.

And the same happens to another measure plugin

Answer 1

Leaflet puts map elements into DOM elements (div tags) with different zIndex attributes. Grid and tile layers go to predefined map pane tilePane with zIndex 200, overlay layers go to map pane overlayPane with zIndex 400.

Map controls are not part of map pane system and go to separate div element, outside map panes. When you set pane option of the control to the specific pane, it has not effect.

And even if the setting of the L.control.polylineMeasure control pane would work, it wouldn't effect zIndex of the drawn measurement lines, since they are drawn onto overlayPane.

Once you know that measurement lines are drawn on the overlayPane which has zIndex 400, all you have to do is to assign other layers to panes with lower zIndex value.

Answer 2

As @TomazicM says, this relates to the zIndex of panes. qgis2web creates a separate pane for each layer, and assigns them zIndex values to ensure that layer order from QGIS is preserved. The issue here is that other visible elements - in this case, extra plugin lines - manage their own panes/zIndex values.

If this is a problem with an unedited export from qgis2web, please do report it at https://github.com/tomchadwin/qgis2web/issues. If it has arisen after you have edited qgis2web code, then I think you'll have to investigate whether the Leaflet plugin in question supports specifying a pane. If so, you can create one with a zIndex higher than all of your layers. If not, you'll have to raise a feature request for the Leaflet plugin.