Leaflet overlay z-index test

Looking at situations where stacking of tilelayer overlays not respected. Appears to be triggered when opacity set.

by Leo

HTML

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div class="mapcontainer">
    CASE 1: no opacity set on any layers
    <br />
    RESULT: PASS - works as expected 
    <div id="map1" class="map"></div>
</div>
<div class="mapcontainer">
    CASE 2: opacity set to .5 on overlays but not on basemap
    <br />
    RESULT: FAIL - basemap occludes overlays 
    <div id="map2" class="map"></div>
</div>
<div class="mapcontainer">
    CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
    <br />
    RESULT: PASS - works as expected
    <div id="map3" class="map"></div>
</div>
<div class="mapcontainer">
    CASE 4: opacity set to .5 on overlays but set to 1 on basemap
    <br />
    RESULT: FAIL - basemap occludes overlays
    <div id="map4" class="map"></div>
</div>
<div class="mapcontainer">
    CASE 5: opacity set to .5 on all layers
    <br />
    RESULT: PASS - works as expected
    <div id="map5" class="map"></div>
</div>
<div class="mapcontainer">
    CASE 6: opacity set to .5 on 1st and 3rd layers and 1 on middle layer
    <br />
    RESULT: FAIL - middle layer hides topmost layer
    <div id="map6" class="map"></div>
</div>

CSS

.mapcontainer {
    float:left;
    position: relative;
    width: 32%;
    font-size: 12px;
    font-family: sans-serif;
    height: 340px;
    margin-bottom: 15px;
    background-color: #eee;
    margin-right: 1%;
}

.map {
    position: absolute;
    width: 100%;
    height: 280px;
    bottom: 0px;
}

JavaScript

var mapopts =  {
    center: [35, -122],
    zoom : 5
};

var map1 = L.map('map1', mapopts);
var map2 = L.map('map2', mapopts);
var map3 = L.map('map3', mapopts);
var map4 = L.map('map4', mapopts);
var map5 = L.map('map5', mapopts);
var map6 = L.map('map6', mapopts);

// Layer z-index not correct (basemap covers everything) if opacity set on overlay tile layers but not on first/basemap tile layer or opacity of basemap set to 1.

/**********
CASE 1: no opacity set on any layers
RESULT: PASS - works as expected 
**********/
// OSM Basemap
var osm1 = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
    attribution: '',
    key: 'BC9A493B41014CAABB98F0471D759707',
    styleId: 97941
}).addTo(map1);

// EEZs / Nations
var eez1 = new L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
    tms: true
}).addTo(map1);

// Marine Protected Areas overlay
var mpa1 = new L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
    tms: false
}).addTo(map1);


/**********
CASE 2: opacity set on overlays but not on basemap
RESULT: FAIL - basemap occludes overlays 
**********/
// OSM Basemap
var osm2 = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
    attribution: '',
    key: 'BC9A493B41014CAABB98F0471D759707',
    styleId: 97941
}).addTo(map2);

// EEZs / Nations
var eez2 = new L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
    tms: true,
    opacity: 0.5
}).addTo(map2);

// Marine Protected Areas overlay
var mpa2 = new L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
    tms: false,
    opacity: 0.5
}).addTo(map2);


/**********
CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
RESULT: PASS - works as expected
**********/
// OSM Basemap
var osm3 = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
    attribution: '',
    key:...