TileLayer stacking order not respected when layer opacity < 1

[russmo]

Related to #1667 and #1474

See this JSFiddle

http://jsfiddle.net/Rvgsx/10/

showing 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 map honor the expected stacking order.

As mentioned in the other issue comment threads, the current behavior is different from 0.5.1, where the order layers were added to the map was respected with mixed opacity tileLayers.

Does this need to be fixed internally, or should users have to explicitly set a zIndex option or setZIndex() for all tileLayers that might use opacity other than 1?

[mourner]

@jfirebaugh thoughts?

[jfirebaugh]

@russmo, thanks for the detailed reproduction.

This is a stacking context issue. The general HTML structure of the examples (with ids added for exposition) is:

<div id="layer-a" class="leaflet-layer">
  <div id="container-a-1" class="leaflet-tile-container" style="z-index: 1"></div>
  <div id="container-a-2" class="leaflet-tile-container" style="z-index: 2">...tiles..</div>
</div>
<div id="layer-b" class="leaflet-layer">
  <div id="container-b-1" class="leaflet-tile-container" style="z-index: 1"></div>
  <div id="container-b-2" class="leaflet-tile-container" style="z-index: 2">...tiles..</div>
</div>
<div id="layer-c" class="leaflet-layer">
  <div id="container-c-1" class="leaflet-tile-container" style="z-index: 1"></div>
  <div id="container-c-2" class="leaflet-tile-container" style="z-index: 2">...tiles..</div>
</div>

Without any opacity applied, the stacking order is:

• layer-a
• layer-b
• layer-c
• container-a-1
• container-b-1
• container-c-1
• container-a-2
• container-b-2
• container-c-2

Opacity is applied to the leaflet-layer elements, creating a separate stacking context for any leaflet-layer with an opacity less than one. The leaflet-layers with a default z-index then wind up stacking below the 1- and 2-indexed tile-containers. For example, in case 2, the stacking order is:

• layer-a
• layer-b
  • container-b-1
  • container-b-2
• layer-c
  • container-c-1
  • container-c-2
• container-a-1
• container-a-2

Explicitly specifying z-index 0 on the base layer also creates a stacking context, thus also producing the expected behavior:

• layer-a
  • container-a-1
  • container-a-2
• layer-b
  • container-b-1
  • container-b-2
• layer-c
  • container-c-1
  • container-c-2

@mourner, what was the rationale for setting z-index on the tile containers (rather than say, toggling display)?

[mourner]

@jfirebaugh it's related to tile animation logic... Each TileLayer creates 2 tile containers, one for front tiles and one for scaled background tiles after you zoom. When you start zoom animation, the current front tile container becomes the background one, and the old bg one is cleared and tiles load there. To make them appear in the right order, I assign zIndexes (1 and 2), but in theory we could change DOM order instead of explicit zIndexes to avoid the problem — appending the tile container that should be in the front to come second.