Pleasant zoom.

css/ol.css

@@ -1,5 +1,11 @@
 .ol-renderer-webgl-canvas { width:100%; height:100%; }
 
+.olTile {
+    -webkit-transition: opacity 0.2s linear;
+    -moz-transition: opacity 0.2s linear;
+    -o-transition: opacity 0.2s linear;
+    transition: opacity 0.2s linear;
+}
 
 /**
  * arrow implementation from http://cssarrowplease.com/ for ol-popup

src/ol/Map.js

@@ -288,7 +288,7 @@ ol.Map.prototype.setUserProjection = function(userProjection) {
  * @param {number} zoom Zoom.
  */
 ol.Map.prototype.setZoom = function(zoom) {
-    if (zoom !== this.zoom_) {
+    if (zoom !== this.zoom_ && zoom >= 0 && zoom < this.getNumZoomLevels()) {
         this.zoom_ = zoom;
         this.conditionallyRender();
     }

src/ol/Tile.js

@@ -102,6 +102,8 @@ ol.Tile.prototype.getImg = function() {
 ol.Tile.prototype.handleImageLoad = function(evt) {
     this.loading_ = false;
     this.loaded_ = true;
+    this.img_.style.visibility = "inherit";
+    this.img_.style.opacity = 1; // TODO: allow for layer opacity
     this.events_.triggerEvent('load');
 };
 
@@ -137,19 +139,6 @@ ol.Tile.prototype.destroy = function() {
     this.events_.triggerEvent('destroy');
 };
 
-/**
- * Create an image node. This is done by cloning
- * the same image element.
- * @return {HTMLImageElement}
- */
-ol.Tile.createImage = (function() {
-    var img = document.createElement("img");
-    img.className = "olTile";
-    return function() {
-        return img.cloneNode(false);
-    };
-})();
-
 /**
  * Create a tile constructor, for specific width and height values
  * for the tiles.
@@ -173,6 +162,8 @@ ol.Tile.createConstructor = function(width, height) {
         img.style.position = "absolute";
         img.style.width = width + "px";
         img.style.height = height + "px";
+        img.style.opacity = 0;
+        img.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
         return function() {
             return img.cloneNode(false);
         };