Merge pull request #922 from ahocevar/backbuffer-zindex

Configurable backbuffer order. r=@bartvde

examples/mobile-wmts-vienna.js

@@ -168,7 +168,7 @@ var map;
                 {layer:"lb"}, defaults
             ));
             labels = format.createLayer(caps, OpenLayers.Util.applyDefaults(
-                {layer:"beschriftung", isBaseLayer: false},
+                {layer:"beschriftung", isBaseLayer: false, transitionEffect: 'map-resize'},
                 defaults
             ));
             map.addLayers([fmzk, aerial, labels]);
@@ -217,7 +217,8 @@ var map;
         ],
         layer: "beschriftung",
         style: "normal",
-        isBaseLayer: false
+        isBaseLayer: false,
+        transitionEffect: 'map-resize'
     },
     defaults));
     map.addLayers([fmzk, aerial, labels]);

lib/OpenLayers/Layer/Grid.js

@@ -98,9 +98,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * Two posible values:
      *
      * "resize" - Existing tiles are resized on zoom to provide a visual
-     * effect of the zoom having taken place immediately.  As the
+     *     effect of the zoom having taken place immediately.  As the
-     * new tiles become available, they are drawn over top of the
+     *     new tiles become available, they are drawn on top of the
-     * resized tiles (this is the default setting).
+     *     resized tiles (this is the default setting).
+     * "map-resize" - Existing tiles are resized on zoom and placed below the
+     *     base layer.  New tiles for the base layer will cover existing tiles.
+     *     This setting is recommended when having an overlay duplicated during
+     *     the transition is undesirable (e.g. street labels or big transparent
+     *     fills). 
      * null - No transition effect.
      *
      * Using "resize" on non-opaque layers can cause undesired visual
@@ -705,6 +710,12 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             backBuffer.id = this.div.id + '_bb';
             backBuffer.className = 'olBackBuffer';
             backBuffer.style.position = 'absolute';
+            var map = this.map;
+            backBuffer.style.zIndex = this.transitionEffect === 'resize' ?
+                    this.getZIndex() - 1 :
+                    // 'map-resize':
+                    map.Z_INDEX_BASE.BaseLayer -
+                            (map.getNumLayers() - map.getLayerIndex(this));
             for(var i=0, lenI=this.grid.length; i<lenI; i++) {
                 for(var j=0, lenJ=this.grid[i].length; j<lenJ; j++) {
                     var tile = this.grid[i][j],

tests/Layer/Grid.html

@@ -1049,7 +1049,7 @@
     }
 
     function test_createBackBuffer(t) {
-        t.plan(7);
+        t.plan(9);
 
         var map = new OpenLayers.Map('map');
         var layer = new OpenLayers.Layer.WMS('', '', {}, {
@@ -1074,7 +1074,16 @@
         OpenLayers.Tile.Image.prototype.createBackBuffer = function() {
             return document.createElement('div');
         };
+        
+        layer.transitionEffect = 'map-resize';
         backBuffer = layer.createBackBuffer();
+        t.ok(backBuffer.style.zIndex == 99, 'z-index of backbuffer correct for "map-resize".');
+        layer.removeBackBuffer();
+        
+        layer.transitionEffect = 'resize';
+        backBuffer = layer.createBackBuffer();
+        t.ok(backBuffer.style.zIndex == layer.getZIndex() - 1, 'z-index of backbuffer correct for "resize",');
+
         layer.backBufferResolution = 1;
         layer.gridResolution = 1;
         layer.backBuffer = backBuffer;