| Start | Load | Error | Unload - | ||
|---|---|---|---|---|---|
| + | |||||
| Start + | Load + | Error + | Unload + | Visible + | Grid load + |
| + | + | + | + | + |
start = unload + visible on screen
@@ -55,7 +67,7 @@ tileSize: L.point(256, 256) }); - grid.createTile = function (coords /* , done*/) { + grid.createTile = function (coords/*, done*/) { var tile = document.createElement('div'); tile.innerHTML = [coords.x, coords.y, coords.z].join(', '); tile.style.border = '2px solid red'; @@ -64,7 +76,7 @@ // test async // setTimeout(function () { // done(null, tile); -// }, Math.random() * 1000); +// }, Math.random() * 100); return tile; }; @@ -73,11 +85,13 @@ tileload: 0, tileerror: 0, tileloadstart: 0, - tileunload: 0 + tileunload: 0, + load: 0 }; - grid.on('tileload tileunload tileerror tileloadstart', function(ev){ + grid.on('tileload tileunload tileerror tileloadstart load', function(ev){ document.getElementById(ev.type).innerHTML = ++counts[ev.type]; + document.getElementById('visible').innerHTML = document.querySelectorAll('.leaflet-tile').length }); map.addLayer(grid); diff --git a/spec/suites/layer/tile/GridLayerSpec.js b/spec/suites/layer/tile/GridLayerSpec.js index e201b597..3c61aae4 100644 --- a/spec/suites/layer/tile/GridLayerSpec.js +++ b/spec/suites/layer/tile/GridLayerSpec.js @@ -253,7 +253,7 @@ describe('GridLayer', function () { }); }); - describe("number of tiles loaded in synchronous grid", function () { + describe("number of 256px tiles loaded in synchronous non-animated grid @800x600px", function () { var clock, grid, counts; beforeEach(function () { @@ -261,23 +261,13 @@ describe('GridLayer', function () { grid = L.gridLayer({ attribution: 'Grid Layer', - // tileSize: L.point(150, 80) tileSize: L.point(256, 256) }); - grid.createTile = function (coords /* , done*/) { + grid.createTile = function (coords) { var tile = document.createElement('div'); tile.innerHTML = [coords.x, coords.y, coords.z].join(', '); tile.style.border = '2px solid red'; - // tile.style.background = 'white'; - -// console.log('Creating new tile: ', [coords.x, coords.y, coords.z].join(', ')); - - // test async -// setTimeout(function () { -// done(null, tile); -// }, Math.random() * 100); - return tile; }; @@ -297,6 +287,7 @@ describe('GridLayer', function () { // }); map.options.fadeAnimation = false; + map.options.zoomAnimation = false; }); afterEach(function () { @@ -306,7 +297,7 @@ describe('GridLayer', function () { counts = undefined; }); - it("Loads 8 256x256px tiles @800x600px zoom 1", function (done) { + it("Loads 8 tiles zoom 1", function (done) { grid.on('load', function () { expect(counts.tileloadstart).to.be(8); @@ -319,7 +310,7 @@ describe('GridLayer', function () { clock.tick(250); }); - it("Loads 5 256x256px tiles @800x600px zoom 0", function (done) { + it("Loads 5 tiles zoom 0", function (done) { grid.on('load', function () { expect(counts.tileloadstart).to.be(5); @@ -331,8 +322,8 @@ describe('GridLayer', function () { map.addLayer(grid).setView([0, 0], 0); clock.tick(250); }); -// - it("Loads 16 256x256px tiles @800x600px zoom 10", function (done) { + + it("Loads 16 tiles zoom 10", function (done) { grid.on('load', function () { expect(counts.tileloadstart).to.be(16); @@ -346,53 +337,254 @@ describe('GridLayer', function () { map.addLayer(grid).setView([0, 0], 10); clock.tick(250); }); -// - it("Loads 32, unloads 16 256x256px tiles @800x600px zoom 10-11", function (done) { - // Event handler just for logging - grid.on('tileload tileunload', function (ev) { - var pending = 0; - for (var key in grid._tiles) { - if (!grid._tiles[key].loaded) { pending++; } - } -// console.log(ev.type + ': ', ev.coords, grid._loading, counts, ' pending: ', pending); -// console.log(counts); - }); + it("Loads 32, unloads 16 tiles zooming in 10-11", function (done) { - function firstTest() { -// console.log('loaded at zoom 10'); -// console.log(counts); + grid.on('load', function () { expect(counts.tileloadstart).to.be(16); expect(counts.tileload).to.be(16); expect(counts.tileunload).to.be(0); grid.off('load'); - grid.on('load', secondTest); - map.setZoom(11); + + grid.on('load', function () { + expect(counts.tileloadstart).to.be(32); + expect(counts.tileload).to.be(32); + expect(counts.tileunload).to.be(16); + done(); + }); + + map.setZoom(11, {animate: false}); clock.tick(250); - } + }); - function secondTest() { - - var pending = 0, total = 0; - for (var key in grid._tiles) { - if (!grid._tiles[key].loaded) { pending++; } - total++; - } - -// console.log('loaded at zoom 11, pending/total:', pending, '/', total); -// console.log(counts); - expect(counts.tileloadstart).to.be(32); - expect(counts.tileload).to.be(32); - expect(counts.tileunload).to.be(16); - done(); - } - - grid.on('load', firstTest); map.addLayer(grid).setView([0, 0], 10); clock.tick(250); }); + it("Loads 32, unloads 16 tiles zooming out 11-10", function (done) { + + grid.on('load', function () { + expect(counts.tileloadstart).to.be(16); + expect(counts.tileload).to.be(16); + expect(counts.tileunload).to.be(0); + grid.off('load'); + + grid.on('load', function () { + expect(counts.tileloadstart).to.be(32); + expect(counts.tileload).to.be(32); + expect(counts.tileunload).to.be(16); + done(); + }); + + map.setZoom(10, {animate: false}); + clock.tick(250); + }); + + + map.addLayer(grid).setView([0, 0], 11); + clock.tick(250); + }); + + + it("Loads 32, unloads 16 tiles zooming out 18-10", function (done) { + + grid.on('load', function () { + expect(counts.tileloadstart).to.be(16); + expect(counts.tileload).to.be(16); + expect(counts.tileunload).to.be(0); + grid.off('load'); + + grid.on('load', function () { + expect(counts.tileloadstart).to.be(32); + expect(counts.tileload).to.be(32); + expect(counts.tileunload).to.be(16); + done(); + }); + + map.setZoom(10, {animate: false}); + clock.tick(250); + }); + + + map.addLayer(grid).setView([0, 0], 18); + clock.tick(250); + }); + + }); + + + // NOTE: This test has different behaviour in PhantomJS and graphical + // browsers due to CSS animations! + describe("number of 256px tiles loaded in synchronous animated grid @800x600px", function () { + var clock, grid, counts; + + beforeEach(function () { + clock = sinon.useFakeTimers(); + + grid = L.gridLayer({ + attribution: 'Grid Layer', + tileSize: L.point(256, 256) + }); + + grid.createTile = function (coords) { + var tile = document.createElement('div'); + tile.innerHTML = [coords.x, coords.y, coords.z].join(', '); + tile.style.border = '2px solid red'; + return tile; + }; + + counts = { + tileload: 0, + tileerror: 0, + tileloadstart: 0, + tileunload: 0 + }; + + grid.on('tileload tileunload tileerror tileloadstart', function (ev) { +// console.log(ev.type); + counts[ev.type]++; + }); + }); + + afterEach(function () { + clock.restore(); + grid.off(); + grid = undefined; + counts = undefined; + }); + + it("Loads 32, unloads 16 tiles zooming in 10-11", function (done) { + + // Event handler just for logging +// grid.on('tileload tileunload load', function (ev) { +// var pending = 0; +// for (var key in grid._tiles) { +// if (!grid._tiles[key].loaded) { pending++; } +// } +// console.log(ev.type + ': ', ev.coords, grid._loading, counts, ' pending: ', pending); +// // console.log(counts); +// }); + + + grid.on('load', function () { + expect(counts.tileloadstart).to.be(16); + expect(counts.tileload).to.be(16); + expect(counts.tileunload).to.be(0); + grid.off('load'); + + grid.on('load', function () { + + // In this particular scenario, the tile unloads happen in the + // next render frame after the grid's 'load' event. + L.Util.requestAnimFrame(function () { + expect(counts.tileloadstart).to.be(32); + expect(counts.tileload).to.be(32); + expect(counts.tileunload).to.be(16); + done(); + }); + }); + + map.setZoom(11, {animate: true}); + clock.tick(250); + }); + + map.addLayer(grid).setView([0, 0], 10); + clock.tick(250); + }); + + it("Loads 32, unloads 16 tiles zooming in 10-18", function (done) { + grid.on('load', function () { + expect(counts.tileloadstart).to.be(16); + expect(counts.tileload).to.be(16); + expect(counts.tileunload).to.be(0); + grid.off('load'); + + grid.on('load', function () { + + // In this particular scenario, the tile unloads happen in the + // next render frame after the grid's 'load' event. + L.Util.requestAnimFrame(function () { + expect(counts.tileloadstart).to.be(32); + expect(counts.tileload).to.be(32); + expect(counts.tileunload).to.be(16); + done(); + }); + }); + + map.setZoom(18, {animate: true}); + clock.tick(250); + }); + + map.addLayer(grid).setView([0, 0], 10); + clock.tick(250); + }); + + it("Loads 32, unloads 16 tiles zooming out 11-10", function (done) { + grid.on('load', function () { + expect(counts.tileloadstart).to.be(16); + expect(counts.tileload).to.be(16); + expect(counts.tileunload).to.be(0); + grid.off('load'); + + grid.on('load', function () { + + // In this particular scenario, the tile unloads happen in the + // next render frame after the grid's 'load' event. + L.Util.requestAnimFrame(function () { + expect(counts.tileloadstart).to.be(32); + expect(counts.tileload).to.be(32); + expect(counts.tileunload).to.be(16); + done(); + }); + }); + + map.setZoom(10, {animate: true}); + clock.tick(250); + }); + + map.addLayer(grid).setView([0, 0], 11); + clock.tick(250); + }); + + it("Loads 32, unloads 16 tiles zooming out 18-10", function (done) { + + // Event handler just for logging +// grid.on('tileload tileunload load', function (ev) { +// var pending = 0; +// for (var key in grid._tiles) { +// if (!grid._tiles[key].loaded) { pending++; } +// } +// console.log(ev.type + ': ', ev.coords, grid._loading, counts, ' pending: ', pending); +// // console.log(counts); +// }); + + grid.on('load', function () { + expect(counts.tileloadstart).to.be(16); + expect(counts.tileload).to.be(16); + expect(counts.tileunload).to.be(0); + grid.off('load'); + + grid.on('load', function () { + + // In this particular scenario, the tile unloads happen in the + // next render frame after the grid's 'load' event. + L.Util.requestAnimFrame(function () { + expect(counts.tileloadstart).to.be(32); + expect(counts.tileload).to.be(32); + expect(counts.tileunload).to.be(16); + done(); + }); + }); + + map.setZoom(10, {animate: true}); + clock.tick(250); + }); + + map.addLayer(grid).setView([0, 0], 18); + clock.tick(250); + }); + }); diff --git a/src/layer/tile/GridLayer.js b/src/layer/tile/GridLayer.js index 8d1449de..06906523 100644 --- a/src/layer/tile/GridLayer.js +++ b/src/layer/tile/GridLayer.js @@ -445,7 +445,8 @@ L.GridLayer = L.Layer.extend({ _getTiledPixelBounds: function (center) { var map = this._map, - scale = map.getZoomScale(map.getZoom(), this._tileZoom), + mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(), + scale = map.getZoomScale(mapZoom, this._tileZoom), pixelCenter = map.project(center, this._tileZoom).floor(), halfSize = map.getSize().divideBy(scale * 2);