From fefc58b50559d6ffbd81723e220e1d3e8795bb76 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 19 Feb 2013 11:03:26 -0800
Subject: [PATCH] Preserve z-order for TileJSON tile layers (#196)

However, the opacity example still does not work correctly due
to a Leaflet bug (Leaflet/Leaflet#1422).
---
 src/tilejson.js       | 20 +++++++++++++++++---
 test/spec/tilejson.js | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/tilejson.js b/src/tilejson.js
index 671b6126a..6b54e35db 100644
--- a/src/tilejson.js
+++ b/src/tilejson.js
@@ -20,6 +20,18 @@ L.TileJSON.LayerGroup = L.LayerGroup.extend({
     initialize: function(_) {
         L.LayerGroup.prototype.initialize.call(this);
 
+        this._tileLayer = new L.TileLayer();
+
+        // Add the layer to the map now, so it gets the desired z-index,
+        // but do not update until the TileJSON has been loaded.
+        this._tileLayer._update = function() {
+            if (this._loaded) {
+                L.TileLayer.prototype._update.call(this);
+            }
+        };
+
+        this.addLayer(this._tileLayer);
+
         if (typeof _ === 'string') {
             // map id 'tmcw.foo'
             if (_.indexOf('/') == -1) this.id(_);
@@ -63,7 +75,7 @@ L.TileJSON.LayerGroup = L.LayerGroup.extend({
             this._map.setView(center, zoom);
         }
 
-        var tileLayer = new L.TileLayer(undefined, {
+        L.extend(this._tileLayer.options, {
             attribution: json.attribution,
             legend: json.legend,
             minZoom: json.minzoom,
@@ -71,11 +83,13 @@ L.TileJSON.LayerGroup = L.LayerGroup.extend({
             tms: json.scheme === 'tms'
         });
 
-        tileLayer.getLegend = function() {
+        this._tileLayer._loaded = true;
+
+        this._tileLayer.getLegend = function() {
             return this.options.legend;
         };
 
-        tileLayer.getTileUrl = function(tilePoint) {
+        this._tileLayer.getTileUrl = function(tilePoint) {
             var index = (tilePoint.x + tilePoint.y) % json.tiles.length,
                 url = json.tiles[index];
 
diff --git a/test/spec/tilejson.js b/test/spec/tilejson.js
index aa6b787d4..c3297d5c7 100644
--- a/test/spec/tilejson.js
+++ b/test/spec/tilejson.js
@@ -123,5 +123,37 @@ describe("L.TileJSON", function() {
             expect(layer.getTileUrl({x: 3, y: 0, z: 0})).to.equal('http://d.tiles.mapbox.com/v3/examples.map-zr0njcqy/0/3/0.png');
             expect(layer.getTileUrl({x: 4, y: 0, z: 0})).to.equal('http://a.tiles.mapbox.com/v3/examples.map-zr0njcqy/0/4/0.png');
         });
+
+        describe("asynchronously", function() {
+            var server;
+
+            beforeEach(function() {
+                server = sinon.fakeServer.create();
+            });
+
+            afterEach(function() {
+                server.restore();
+            });
+
+            it("adds a TileLayer immediately", function() {
+                var group = new L.TileJSON.LayerGroup('data/tilejson.json'),
+                    layer = layersOf(group)[0];
+
+                expect(layer).to.be.ok();
+            });
+
+            it("adds multiple TileLayers in the order that the LayerGroups were added", function() {
+                var map = new L.Map(document.createElement('div')),
+                    a = new L.TileJSON.LayerGroup('a'),
+                    b = new L.TileJSON.LayerGroup('b');
+
+                map.addLayer(b);
+                map.addLayer(a);
+                map.setView([0, 0], 1);
+
+                expect(map.getPanes().tilePane.children[0]).to.equal(b._tileLayer._container);
+                expect(map.getPanes().tilePane.children[1]).to.equal(a._tileLayer._container);
+            });
+        })
     });
 });