0

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.

Polyline measure issue

It works when I disable the raster layers

And the same happens to another measure plugin

enter image description here Now it works

Improve this question
  • 2
    leafletjs.com/examples/map-panes – IvanSanchez Jun 5 '20 at 22:44
  • yup, you've gotta create a custom pane, assign it the z-value that will put it in the right layering order in your app, and then place your polylines and polygons (or whatever else) in the custom pane. – Seth Lutske Jun 5 '20 at 23:42
  • 1
    Coding questions on GIS SE should have relevant existing code included in the body of the question. – TomazicM Jun 6 '20 at 6:49
  • @SethLutske It doesn't work, check the code I've added. – CSouza Jun 6 '20 at 13:44
  • @TomazicM Done it. – CSouza Jun 6 '20 at 13:44
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.

Improve this answer
  • It works now. I've set raster layers zIndex to 200 and 201. Reloaded and thats it. – CSouza Jun 8 '20 at 14:07
1

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.

Improve this answer
  • Wouldn't the solution in this case also be to reassign zIndex values of qgis2wbe created panes to values below 400? – TomazicM Jun 8 '20 at 12:14
  • I will have had a reason to choose 400, but I can't bring it to mind. It related to the default zIndices of Leaflet elements, and giving enough space between layers' zIndex values to allow other elements to be inserted manually. – Tom Chadwin Jun 8 '20 at 13:12
  • Yes, off course for default behavior. But what about user reassigning them if necessary after panes and layers are created by qgis2web? – TomazicM Jun 8 '20 at 13:23
  • Yes, that would do the job, but would have to be redone every time the project was exported. – Tom Chadwin Jun 8 '20 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.