Overlays obscured by baselayers when using layer control and layergroups.

[spamdaemon]

This issue may be related to #1096. I've tried to reproduce the issue here (using github/master):
http://plnkr.co/edit/RyEYkY?p=preview

This is a simple example with 3 layers, 2 base layers and 1 overlay layer. Each layer lives within a layergroup. The layer group is added to the control before adding any layers to it.

Initially the layers are displayed correctly, but after toggling the baselayers once or twice, they obscure the overlay.

The problem goes away if I add my layers into the group before adding the group to the control. Setting a z-index on the layergroup had no effect.

[kcivey]

I'm seeing something similar. I have two tile layers: one the base, the other an overlay with low opacity. Using Leaflet 0.5.1, everything works fine, but using the master the overlay ends up under the base. Comparing the DOM in the two cases, it seems the problem is a new "leaflet-tile-container" div wrapped around the tile images, which has its own z-index that may be overridden by the z-index on its container.

In 0.5.1:

<div class="leaflet-tile-pane">
    <div class="leaflet-layer">
        <!-- tile images here -->
    </div>
    <div class="leaflet-layer" style="z-index: 1; opacity: 0.22;">
        <!-- tile images here -->
    </div>
 </div>

In 0.6-dev (7a84294):

<div class="leaflet-tile-pane">
    <div class="leaflet-layer">
        <div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 1;"></div>
        <div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 2;">
            <!-- base tile images here -->
        </div>
    </div>
    <div class="leaflet-layer" style="z-index: 1; opacity: 0.22;">
        <div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 1;"></div>
        <div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 2;">
            <!-- overlay tile images here -->
        </div>
    </div>
</div>

Because the "leaflet-layer" div for the overlay has z-index 1, it's underneath the "leaflet-tile-container" div for the base layer. (I don't know what the empty "leaflet-tile-container" divs with z-index 1 are for.) If I add {zIndex: 0} to the options for the base layer, then things work again.

[russmo]

Thanks for the info. I started using some new features in master, but soon realized my app was broken because tile layer overlays kept disappearing under the basemap. I'll use the fix from @kcivey until a proper fix makes it into the codebase.

[jfirebaugh]

@spamdaemon What is the reason for using L.LayerGroup? Your example works fine if you just use regular tile layers: http://plnkr.co/edit/4n7cFd?p=preview

L.LayerGroup only propagates setZIndex to the layers that are members of the group at the time setZIndex is called. In your example, setZIndex is called before the tile layers are added to the group, so it doesn't have any effect. (Also, there's a typo in your example -- G2.setZIndex(2000); should be G3.setZIndex(2000);)

[jfirebaugh]

Also, L.Control.Layers will by default set appropriate z-indexes automatically. You don't need to specify them yourself: http://plnkr.co/edit/kDGuCO?p=preview

[mourner]

@jfirebaugh so, should we close the issue?

[spamdaemon]

You've closed the issue, but not really indicated whether or not my example (http://plnkr.co/edit/RyEYkY?p=preview) is broken. I understand that it works with normal layers, but my point was that it's not working with layer groups.

If my example is broken, then that implies that I should not add a layer to a layer group after the group has already been added to a map. Is that correct? If so, the documentation/API should indicate this.

I updated the example to remove the setZIndex (which I only added to show that it has no effect either).

[russmo]

See this JSFiddle http://jsfiddle.net/Rvgsx/10/ that shows several test cases showing one tileLayer of an OSM basemap and two overlay tileLayers. Basically, things work fine if no opacity is set on the layers or all layers have an opacity less than 1. Any layers anywhere within the stack with an opacity of 1 (or not set at all) will occlude any overlays above them with an opacity less than 1. Setting zIndex option on layers without opacity makes display honor the stacking order.

Does this need to be fixed internally, or should I be setting a zIndex option for all tileLayers in my maps?

[spamdaemon]

@russmo Looks like your issue is a little bit different from my original problem. It might make sense to raise another issue.

[jzadra]

This seems to still be a problem. When I change the base layer (polygons), the overlay layer gets pushed behind the base layer.

[perliedman]

@jzadra can you provide a running example of the issue?

[jzadra]

@perliedman yes, however I"m using leaflet R. I've also posted this here: rstudio/leaflet#430

require(acs)
require(tigris)
require(leaflet)
require(tidyverse)

leaflet(data = counties(state = "UT")) %>% 
  addPolygons(color = "red", fillColor = "orange", group = "base1", fillOpacity = 1) %>% 
  addPolygons(color = "pink", fillColor = "purple", group = "base2", fillOpacity = 1) %>% 
  addPolygons(color = "yellow", fillColor = "green", group = "overlay", fillOpacity = 1) %>% 
  addLayersControl(baseGroups = c("base1", "base2"), options = layersControlOptions(collapsed = F), overlayGroups = "overlay")

Output from the above code: http://rpubs.com/bvila/overdraw

Also posted here:
https://stackoverflow.com/questions/44122246/r-leaflet-is-drawing-base-layers-on-top-of-overlay-layers