diff --git a/examples/style.mobile.css b/examples/style.mobile.css index 4d4b4703ab..1b7244d420 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -43,7 +43,7 @@ div.olControlZoom a:hover { background: rgba(0, 60, 136, 0.5); } } -.olTileImage { +.olLayerGridTile .olTileImage { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; diff --git a/lib/OpenLayers/Layer.js b/lib/OpenLayers/Layer.js index 1cc11a419d..05747f2cbf 100644 --- a/lib/OpenLayers/Layer.js +++ b/lib/OpenLayers/Layer.js @@ -320,20 +320,6 @@ OpenLayers.Layer = OpenLayers.Class({ */ wrapDateLine: false, - /** - * APIProperty: transitionEffect - * {String} The transition effect to use when the map is panned or - * zoomed. - * - * There are currently two supported values: - * - *null* No transition effect (the default). - * - *resize* Existing tiles are resized on zoom to provide a visual - * effect of the zoom having taken place immediately. As the - * new tiles become available, they are drawn over top of the - * resized tiles. - */ - transitionEffect: null, - /** * Property: metadata * {Object} This object can be used to store additional information on a diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 3dc3f057f1..4e04e4117d 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -91,6 +91,22 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { */ buffer: 0, + /** + * APIProperty: transitionEffect + * {String} The transition effect to use when the map is zoomed. + * Two posible values: + * + * null - No transition effect (the default). + * "resize" - Existing tiles are resized on zoom to provide a visual + * effect of the zoom having taken place immediately. As the + * new tiles become available, they are drawn over top of the + * resized tiles. + * + * Using "resize" on non-opaque layers can cause undesired visual + * effects. This is therefore discouraged. + */ + transitionEffect: null, + /** * APIProperty: numLoadingTiles * {Integer} How many tiles are still loading? @@ -184,9 +200,45 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { * APIProperty: removeBackBufferDelay * {Number} Delay for removing the backbuffer when all tiles have finished * loading. Can be set to 0 when no css opacity transitions for the - * olTileImage class are used. Default is 2500. + * olTileImage class are used. Default is 0 for layers, + * 2500 for tiled layers. See for more information on + * tile animation. */ - removeBackBufferDelay: 2500, + removeBackBufferDelay: null, + + /** + * APIProperty: className + * {String} Name of the class added to the layer div. If not set in the + * options passed to the constructor then className defaults to + * "olLayerGridSingleTile" for single tile layers (see ), + * and "olLayerGridTile" for non single tile layers. + * + * Note: + * + * The displaying of tiles is not animated by default for single tile + * layers - OpenLayers' default theme (style.css) includes this: + * (code) + * .olLayerGridTile .olTileImage { + * -webkit-transition: opacity 0.2s linear; + * -moz-transition: opacity 0.2s linear; + * -o-transition: opacity 0.2s linear; + * transition: opacity 0.2s linear; + * } + * (end) + * To animate tile displaying for any grid layer the following + * CSS rule can be used: + * (code) + * .olTileImage { + * -webkit-transition: opacity 0.2s linear; + * -moz-transition: opacity 0.2s linear; + * -o-transition: opacity 0.2s linear; + * transition: opacity 0.2s linear; + * } + * (end) + * In that case, to avoid flash effects, + * should not be zero. + */ + className: null, /** * Register a listener for a particular event with the following syntax: @@ -232,7 +284,16 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { arguments); this.grid = []; this.tileQueue = []; + + if (this.removeBackBufferDelay === null) { + this.removeBackBufferDelay = this.singleTile ? 0 : 2500; + } + if (this.className === null) { + this.className = this.singleTile ? 'olLayerGridSingleTile' : + 'olLayerGridTile'; + } + if (!OpenLayers.Animation.isNative) { this.deferMoveGriddedTiles = OpenLayers.Function.bind(function() { this.moveGriddedTiles(true); @@ -241,6 +302,17 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { } }, + /** + * Method: setMap + * + * Parameters: + * map - {} The map. + */ + setMap: function(map) { + OpenLayers.Layer.HTTPRequest.prototype.setMap.call(this, map); + OpenLayers.Element.addClass(this.div, this.className); + }, + /** * Method: removeMap * Called when the layer is removed from the map. diff --git a/notes/2.12.md b/notes/2.12.md index f4c1f0763d..875cdb99c9 100644 --- a/notes/2.12.md +++ b/notes/2.12.md @@ -63,7 +63,7 @@ Corresponding issues/pull requests: The displaying of tiles can now be animated, using CSS3 transitions. Transitions operate on the `opacity` property. Here's the CSS rule defined in OpenLayers' default theme: - .olTileImage { + .olLayerGridTile .olTileImage { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; @@ -72,13 +72,15 @@ The displaying of tiles can now be animated, using CSS3 transitions. Transitions People can override this rule to use other transition settings. To remove tile animation entirely use: - .olTileImage { + .olLayerGridTile .olTileImage { -webkit-transition: none; -moz-transition: none; -o-transition: all 0 none; transition: none; } +Note that by default tile animation is not enabled for single tile layers. + Corresponding issues/pull requests: * https://github.com/openlayers/openlayers/pull/127 diff --git a/tests/Layer/Grid.html b/tests/Layer/Grid.html index dd716fa438..0aa279500c 100644 --- a/tests/Layer/Grid.html +++ b/tests/Layer/Grid.html @@ -24,8 +24,8 @@ */ - function test_Layer_Grid_constructor (t) { - t.plan( 6 ); + function test_constructor (t) { + t.plan( 8 ); layer = new OpenLayers.Layer.Grid(name, url, params, null); t.ok( layer instanceof OpenLayers.Layer.Grid, "returns OpenLayers.Layer.Grid object" ); @@ -33,6 +33,8 @@ t.eq( layer.ratio, 1.5, "ratio default is 1.5"); t.eq( layer.numLoadingTiles, 0, "numLoadingTiles starts at 0"); t.ok( layer.tileClass === OpenLayers.Tile.Image, "tileClass default is OpenLayers.Tile.Image"); + t.eq( layer.className, 'olLayerGridTile', "className default is olLayerGridTile"); + t.eq( layer.removeBackBufferDelay, 2500, "removeBackBufferDelay default is 2500"); var obj = {}; var func = function() {}; @@ -41,6 +43,32 @@ t.ok( layer.events.listeners['tileloaded'].length == 1, "one listener for tileloaded after register"); } + function test_constructor_singleTile(t) { + t.plan(2); + layer = new OpenLayers.Layer.Grid(name, url, params, {singleTile: true}); + t.eq( layer.className, 'olLayerGridSingleTile', "className default is olLayerGridSingleTile"); + t.eq( layer.removeBackBufferDelay, 0, "removeBackBufferDelay default is 0"); + } + + function test_setMap(t) { + t.plan(1); + var map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.Grid(name, url, params, null); + map.addLayer(layer); + t.ok(OpenLayers.Element.hasClass(layer.div, "olLayerGridTile"), + "olLayerGridTile class assigned to layer div"); + map.destroy(); + } + + function test_setMap_singleTile(t) { + t.plan(1); + var map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.Grid(name, url, params, {singleTile: true}); + map.addLayer(layer); + t.ok(OpenLayers.Element.hasClass(layer.div, "olLayerGridSingleTile"), + "olLayerGridSingleTile class assigned to layer div"); + map.destroy(); + } function test_Layer_Grid_inittiles (t) { t.plan( 2 ); diff --git a/theme/default/style.css b/theme/default/style.css index 090be08b5e..16c4a9fa6f 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -476,7 +476,7 @@ a.olControlZoomOut { * Animations */ -.olTileImage { +.olLayerGridTile .olTileImage { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear;