Merge pull request #127 from elemoine/tile-fade-in

CSS-based tile animation

lib/OpenLayers/Layer/Grid.js

@@ -145,6 +145,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      */
     backBufferLonLat: null,
 
+    /**
+     * Property; backBufferTimerId
+     * {Number} The id of the back buffer timer. This timer is used to
+     *     delay the removal of the back buffer, thereby preventing
+     *     flash effects caused by tile animation.
+     */
+    backBufferTimerId: null,
+
     /**
      * Register a listener for a particular event with the following syntax:
      * (code)
@@ -197,6 +205,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             window.clearTimeout(this.timerId);
             this.timerId = null;
         }
+        if(this.backBufferTimerId !== null) {
+            window.clearTimeout(this.backBufferTimerId);
+            this.backBufferTimerId = null;
+        }
     },
 
     /**
@@ -204,9 +216,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * Deconstruct the layer and clear the grid.
      */
     destroy: function() {
+        this.removeBackBuffer();
         this.clearGrid();
-        // clearGrid should remove any back buffer from the layer,
-        // so no need to call removeBackBuffer here
 
         this.grid = null;
         this.tileSize = null;
@@ -455,6 +466,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * resolution - {Number} The resolution to transition to.
      */
     applyBackBuffer: function(resolution) {
+        if(this.backBufferTimerId !== null) {
+            this.removeBackBuffer();
+        }
         var backBuffer = this.backBuffer;
         if(!backBuffer) {
             backBuffer = this.createBackBuffer();
@@ -530,10 +544,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * Remove back buffer from DOM.
      */
     removeBackBuffer: function() {
-        if(this.backBuffer && this.backBuffer.parentNode) {
+        if(this.backBuffer) {
             this.div.removeChild(this.backBuffer);
             this.backBuffer = null;
             this.backBufferResolution = null;
+            if(this.backBufferTimerId !== null) {
+                window.clearTimeout(this.backBufferTimerId);
+                this.backBufferTimerId = null;
+            }
         }
     },
 
@@ -937,8 +955,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             //if that was the last tile, then trigger a 'loadend' on the layer
             if (this.numLoadingTiles == 0) {
                 this.events.triggerEvent("loadend");
-                this.removeBackBuffer();
-            }
+                if(this.backBuffer) {
+                    // the removal of the back buffer is delayed to prevent flash
+                    // effects due to the animation of tile displaying
+                    this.backBufferTimerId = window.setTimeout(
+                        OpenLayers.Function.bind(this.removeBackBuffer, this),
+                        2500
+                    );
+                }
+        }
         };
         tile.events.register("loadend", this, tile.onLoadEnd);
         tile.events.register("unload", this, tile.onLoadEnd);

lib/OpenLayers/Tile/Image.js

@@ -80,7 +80,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      * transition effects are not supported if POST requests are used.
      */
     maxGetUrlLength: null,
-    
+
     /** TBD 3.0 - reorder the parameters to the init function to remove 
      *             URL. the getUrl() function on the layer gets called on 
      *             each draw(), so no need to specify it here.
@@ -243,13 +243,14 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
                 style.width = "100%";
                 style.height = "100%";
             }
-            style.display = "none";
-            style.position = "absolute";
+            style.visibility = "hidden";
+            style.opacity = 0;
             if (this.layer.opacity < 1) {
-                OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, 
-                                                 null, null, null, null, 
-                                                 this.layer.opacity);
+                style.filter = 'alpha(opacity=' +
+                               (this.layer.opacity * 100) +
+                               ')';
             }
+            style.position = "absolute";
             if (this.layerAlphaHack) {
                 // move the image out of sight
                 style.paddingTop = style.height;
@@ -311,7 +312,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      */
     setImgSrc: function(url) {
         var img = this.imgDiv;
-        img.style.display = "none";
+        img.style.visibility = 'hidden';
+        img.style.opacity = 0;
         if (url) {
             img.src = url;
         }
@@ -360,7 +362,10 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
     onImageLoad: function() {
         var img = this.imgDiv;
         OpenLayers.Event.stopObservingElement(img);
-        img.style.display = "";
+
+        img.style.visibility = 'inherit';
+        img.style.opacity = this.layer.opacity;
+
         this.isLoading = false;
         this.events.triggerEvent("loadend");