diff --git a/examples/fullScreen.html b/examples/fullScreen.html index 7760f156dd..861a23d46d 100644 --- a/examples/fullScreen.html +++ b/examples/fullScreen.html @@ -1,4 +1,5 @@ - + + @@ -6,10 +7,8 @@ - +
@@ -65,8 +41,11 @@

- This example uses CSS to define the dimensions of the map element in order to fill the screen. - When the user resizes the window, the map size changes correspondingly. No scroll bars! +

This example uses CSS to define the dimensions of the map element in order to fill the screen. + When the user resizes the window, the map size changes correspondingly. No scroll bars!

+

See the + fullScreen.js source + to see how this is done.

diff --git a/examples/fullScreen.js b/examples/fullScreen.js new file mode 100644 index 0000000000..36479b85b0 --- /dev/null +++ b/examples/fullScreen.js @@ -0,0 +1,30 @@ +var map; +function init(){ + map = new OpenLayers.Map('map'); + + var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} ); + var ol_wms_nobuffer = new OpenLayers.Layer.WMS( "OpenLayers WMS (no tile buffer)", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'}, {buffer: 0}); + + map.addLayers([ol_wms, ol_wms_nobuffer]); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.setCenter(new OpenLayers.LonLat(0, 0), 6); +} +var map; +function init(){ + map = new OpenLayers.Map('map'); + + var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} ); + var ol_wms_nobuffer = new OpenLayers.Layer.WMS( "OpenLayers WMS (no tile buffer)", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'}, {buffer: 0}); + + map.addLayers([ol_wms, ol_wms_nobuffer]); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.setCenter(new OpenLayers.LonLat(0, 0), 6); +} diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index cc1e07372e..ee0341e721 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -87,6 +87,19 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { */ numLoadingTiles: 0, + /** + * APIProperty: tileLoadingDelay + * {Integer} - Number of milliseconds before we shift and load + * tiles. Default is 100. + */ + tileLoadingDelay: 100, + + /** + * Property: timerId + * {Number} - The id of the tileLoadingDelay timer. + */ + timerId: null, + /** * Constructor: OpenLayers.Layer.Grid * Create a new grid layer @@ -109,6 +122,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { this.events.addEventType("tileloaded"); this.grid = []; + + this._moveGriddedTiles = OpenLayers.Function.bind( + this.moveGriddedTiles, this + ); }, /** @@ -217,8 +234,16 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { if (forceReTile || !tilesBounds.containsBounds(bounds, true)) { this.initGriddedTiles(bounds); } else { - //we might have to shift our buffer tiles - this.moveGriddedTiles(bounds); + // we might have to shift our buffer tiles, schedule + // that + if (this.timerId != null) { + window.clearTimeout(this.timerId); + } + this._bounds = bounds; + this.timerId = window.setTimeout( + this._moveGriddedTiles, + this.tileLoadingDelay + ); } } } @@ -636,28 +661,31 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { /** * Method: moveGriddedTiles - * - * Parameters: - * bounds - {} */ - moveGriddedTiles: function(bounds) { + moveGriddedTiles: function() { + var bounds = this._bounds; + var shifted = true; var buffer = this.buffer || 1; - while (true) { - var tlLayer = this.grid[0][0].position; - var tlViewPort = - this.map.getViewPortPxFromLayerPx(tlLayer); - if (tlViewPort.x > -this.tileSize.w * (buffer - 1)) { - this.shiftColumn(true); - } else if (tlViewPort.x < -this.tileSize.w * buffer) { - this.shiftColumn(false); - } else if (tlViewPort.y > -this.tileSize.h * (buffer - 1)) { - this.shiftRow(true); - } else if (tlViewPort.y < -this.tileSize.h * buffer) { - this.shiftRow(false); - } else { - break; - } - }; + var tlLayer = this.grid[0][0].position; + var tlViewPort = this.map.getViewPortPxFromLayerPx(tlLayer); + if (tlViewPort.x > -this.tileSize.w * (buffer - 1)) { + this.shiftColumn(true); + } else if (tlViewPort.x < -this.tileSize.w * buffer) { + this.shiftColumn(false); + } else if (tlViewPort.y > -this.tileSize.h * (buffer - 1)) { + this.shiftRow(true); + } else if (tlViewPort.y < -this.tileSize.h * buffer) { + this.shiftRow(false); + } else { + shifted = false; + delete this._bounds; + } + if (shifted) { + // we may have other row or columns to shift, schedule it + // with a setTimeout, to give the user a chance to sneak + // in moveTo's + this.timerId = window.setTimeout(this._moveGriddedTiles, 0); + } }, /** diff --git a/tests/Layer/Grid.html b/tests/Layer/Grid.html index e5c1ed51e7..1ce7a636c2 100644 --- a/tests/Layer/Grid.html +++ b/tests/Layer/Grid.html @@ -169,7 +169,7 @@ function test_Layer_Grid_moveTo(t) { - t.plan(13); + t.plan(14); var map = new OpenLayers.Map('map'); layer = new OpenLayers.Layer.WMS(name, url, params); @@ -193,9 +193,9 @@ g_WhichFunc = "InitGridded"; g_Bounds = bounds; }; - layer.moveGriddedTiles = function(bounds) { + layer._moveGriddedTiles = function() { g_WhichFunc = "MoveGridded"; - g_Bounds = bounds; + g_Bounds = layer._bounds; }; var clearTestBounds = function() { g_WhichFunc = null; @@ -243,13 +243,7 @@ clearTestBounds(); layer.singleTile = true; layer.moveTo(null, zoomChanged); - t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called"); - - - layer.getTilesBounds = function() { - return tilesBounds; - } - + t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called"); //NO FORCE @@ -305,9 +299,13 @@ //regular move clearTestBounds(); tilesBounds = new OpenLayers.Bounds(10,10,120,120); + g_WhichFunc = null; layer.moveTo(null, zoomChanged); - t.ok(g_WhichFunc == "MoveGridded", "if tiles not drastically out of bounds, we call moveGriddedTile()"); - t.ok(g_Bounds.equals(b), "if tiles not drastically out of bounds, we call moveGriddedTile() with correct bounds"); + t.eq(g_WhichFunc, null, "moveGriddedTiles is delayed - not called yet"); + t.delay_call(0.2, function() { + t.ok(g_WhichFunc == "MoveGridded", "if tiles not drastically out of bounds, we call moveGriddedTile()"); + t.ok(g_Bounds.equals(b), "if tiles not drastically out of bounds, we call moveGriddedTile() with correct bounds"); + }); } /** THIS WOULD BE WHERE THE TESTS WOULD GO FOR