From 8f97ca619e8958ecd5512f27817c888c1405a4fd Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Mon, 25 Nov 2013 19:13:30 +0200
Subject: [PATCH] easy async loading for GridLayer

---
 debug/map/grid.html         |  9 ++++++++-
 src/layer/tile/GridLayer.js | 15 +++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/debug/map/grid.html b/debug/map/grid.html
index 52efa354..06e71d7f 100644
--- a/debug/map/grid.html
+++ b/debug/map/grid.html
@@ -23,10 +23,17 @@
 			attribution: 'Grid Layer'
 		});
 
-		grid.createTile = function (coords) {
+		grid.createTile = function (coords, done) {
 			var tile = document.createElement('div');
 			tile.innerHTML = [coords.x, coords.y, coords.z].join(',');
 			tile.style.outline = '1px solid red';
+			tile.style.background = 'white';
+
+			// test async
+			setTimeout(function () {
+				done(tile);
+			}, Math.random() * 500);
+
 			return tile;
 		};
 
diff --git a/src/layer/tile/GridLayer.js b/src/layer/tile/GridLayer.js
index a622d8a8..1bae8154 100644
--- a/src/layer/tile/GridLayer.js
+++ b/src/layer/tile/GridLayer.js
@@ -13,7 +13,6 @@ L.GridLayer = L.Class.extend({
 		// minZoom: <Number>,
 		// maxZoom: <Number>,
 
-		async: false,
 		unloadInvisibleTiles: L.Browser.mobile,
 		updateWhenIdle: L.Browser.mobile,
 		updateInterval: 150
@@ -21,6 +20,9 @@ L.GridLayer = L.Class.extend({
 
 	initialize: function (options) {
 		options = L.setOptions(this, options);
+
+		// make sure it can be passed safely without losing context
+		this._tileReady = L.bind(this._tileReady, this);
 	},
 
 	onAdd: function (map) {
@@ -384,8 +386,8 @@ L.GridLayer = L.Class.extend({
 		this._initTile(tile);
 
 		if (this.createTile.length < 2) {
-			this._tileReady(tile);
-			// TODO pass tileReady to createTile for async
+			// if tiles are sync, delay one frame for opacity anim to happen
+			setTimeout(L.bind(this._tileReady, this, tile), 0);
 		}
 
 		var tilePos = this._getTilePos(coords);
@@ -421,11 +423,8 @@ L.GridLayer = L.Class.extend({
 
 		if (this._animated) {
 			// clear scaled tiles after all new tiles are loaded (for performance)
-			this._clearBgBuffer();
-
-			// TODO find out why timeout was needed
-			// clearTimeout(this._clearBgBufferTimer);
-			// this._clearBgBufferTimer = setTimeout(L.bind(this._clearBgBuffer, this), 500);
+			clearTimeout(this._clearBgBufferTimer);
+			this._clearBgBufferTimer = setTimeout(L.bind(this._clearBgBuffer, this), 300);
 		}
 	},