[ol.Tile] add ol.Tile.createConstructor and set width and height to the img archetype

src/ol/Tile.js

@@ -41,7 +41,7 @@ ol.Tile = function(url, bounds) {
      * @private
      * @type {HTMLImageElement}
      */
-    this.img_ = ol.Tile.createImage();
+    this.img_ = this.createImage();
     goog.events.listenOnce(this.img_, goog.events.EventType.LOAD,
                            this.handleImageLoad, false, this);
     goog.events.listenOnce(this.img_, goog.events.EventType.ERROR,
@@ -54,6 +54,14 @@ ol.Tile = function(url, bounds) {
     this.events_ = new ol.event.Events(this);
 };
 
+/**
+ * @protected
+ * @return {HTMLImageElement}
+ */
+ol.Tile.prototype.createImage = function() {
+    // overriden by subclasses
+};
+
 /**
  * Load the tile. A tile should loaded only once.
  */
@@ -131,3 +139,32 @@ ol.Tile.createImage = (function() {
         return img.cloneNode(false);
     };
 })();
+
+/**
+ * Create a tile constructor, for specific width and height values
+ * for the tiles.
+ * @param {number} width
+ * @param {number} height
+ * @return {function(new:ol.Tile, string, ol.Bounds)}
+ */
+ol.Tile.createConstructor = function(width, height) {
+    /**
+     * @constructor
+     * @extends {ol.Tile}
+     */
+    var Tile = function(url, bounds) {
+        goog.base(this, url, bounds);
+    };
+    goog.inherits(Tile, ol.Tile);
+    /** @inheritDoc */
+    Tile.prototype.createImage = (function() {
+        var img = document.createElement("img");
+        img.className = "olTile";
+        img.style.width = width + "px";
+        img.style.height = height + "px";
+        return function() {
+            return img.cloneNode(false);
+        };
+    })();
+    return Tile;
+};

src/ol/layer/TileLayer.js

@@ -1,6 +1,7 @@
 goog.provide('ol.layer.TileLayer');
 
 goog.require('ol.layer.Layer');
+goog.require('ol.Tile');
 goog.require('ol.TileCache');
 
 /**
@@ -33,6 +34,12 @@ ol.layer.TileLayer = function() {
      */
     this.tileHeight_ = 256;
 
+    /**
+     * @protected
+     * @type {function(new:ol.Tile, string, ol.Bounds)}
+     */
+    this.Tile = ol.Tile.createConstructor(this.tileWidth_, this.tileHeight_);
+
     /**
      * @protected
      * @type {number|undefined}
@@ -231,7 +238,7 @@ ol.layer.TileLayer.prototype.setResolutions = function(resolutions) {
 ol.layer.TileLayer.prototype.getTile = function(url, bounds) {
     var tile = this.cache_.get(url);
     if (!goog.isDef(tile)) {
-        tile = new ol.Tile(url, bounds);
+        tile = new this.Tile(url, bounds);
         this.cache_.set(tile.getUrl(), tile);
     }
     return tile;

test/spec/ol/Tile.test.js

@@ -1,9 +1,22 @@
 describe("ol.Tile", function() {
 
+    describe("create a tile constructor", function() {
+        it("returns a constructor than can create tiles with expected properties", function() {
+            var Tile = ol.Tile.createConstructor(100, 100);
+            expect(typeof Tile).toEqual("function");
+            var tile = new Tile('url');
+            expect(tile).toBeA(ol.Tile);
+            expect(tile.getImg().className).toEqual('olTile');
+            expect(tile.getImg().style.width).toEqual("100px");
+            expect(tile.getImg().style.height).toEqual("100px");
+        });
+    });
+
     describe("create a tile", function() {
         var tile;
         beforeEach(function() {
-            tile = new ol.Tile('http://a.url');
+            var Tile = ol.Tile.createConstructor(200, 200);
+            tile = new Tile('http://a.url');
         });
         it("creates a tile instance", function() {
             expect(tile).toBeA(ol.Tile);
@@ -16,7 +29,8 @@ describe("ol.Tile", function() {
     describe("handle image load", function() {
         var tile;
         beforeEach(function() {
-            tile = new ol.Tile('http://a.url');
+            var Tile = ol.Tile.createConstructor(200, 200);
+            tile = new Tile('http://a.url');
         });
         it("fires a load event", function() {
             var spy = jasmine.createSpy();
@@ -33,7 +47,8 @@ describe("ol.Tile", function() {
     describe("handle image error", function() {
         var tile;
         beforeEach(function() {
-            tile = new ol.Tile('http://a.url');
+            var Tile = ol.Tile.createConstructor(200, 200);
+            tile = new Tile('http://a.url');
         });
         it("fires a load event", function() {
             var spy = jasmine.createSpy();

test/spec/ol/TileCache.test.js

@@ -2,17 +2,18 @@ describe('ol.TileCache', function() {
 
     describe('exceed the cache capacity', function() {
 
-        var tilecache, tile;
+        var Tile, tilecache, tile;
 
         beforeEach(function() {
+            Tile = ol.Tile.createConstructor(200, 200);
             tilecache = new ol.TileCache(1);
-            tile = new ol.Tile('url1');
+            tile = new Tile('url1');
             tilecache.set('url1', tile);
             spyOn(tile, 'destroy');
         });
 
         it('calls tile.destroy', function() {
-            tilecache.set('url2', new ol.Tile('url2'));
+            tilecache.set('url2', new Tile('url2'));
             expect(tile.destroy).toHaveBeenCalled();
         });
     });