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).
mapbox · Feb 19, 2013 · fefc58b · fefc58b
1 parent c794c08
commit fefc58b
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git 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,19 +75,21 @@ 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,
             maxZoom: json.maxzoom,
             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
@@ -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);
+            });
+        })
     });
 });