ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #127 from elemoine/tile-fade-in

Browse Source 
CSS-based tile animation
This commit is contained in:
Éric Lemoine
2012-01-17 21:06:11 -08:00
parent a5f4daa747 99ca32540d
commit 37d21272b7
14 changed files with 261 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/fullScreen.html
+3 -3
View File
@@ -25,9 +25,8 @@
} }
</style> </style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script src="fullScreen.js"></script>
</head> </head>
<body onload="init()"> <body>
<div id="map"></div> <div id="map"></div>
<div id="text"> <div id="text">
@@ -38,7 +37,7 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a map that fill the entire browser window. Demonstrate a map that fills the entire browser window.
</p> </p>
<div id="docs"> <div id="docs">
@@ -48,6 +47,7 @@
<a href="fullScreen.js" target="_blank">fullScreen.js source</a> <a href="fullScreen.js" target="_blank">fullScreen.js source</a>
to see how this is done.</p> to see how this is done.</p>
</div> </div>
<script src="fullScreen.js"></script>
</div> </div>
</body> </body>
</html> </html>
examples/fullScreen.js
+28 -13
View File
@@ -1,15 +1,30 @@
var map; var urls = [
function init(){ "http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
map = new OpenLayers.Map('map'); "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
"http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
];
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var map = new OpenLayers.Map({
"http://vmap0.tiles.osgeo.org/wms/vmap0", div: "map",
{layers: 'basic'} ); layers: [
var ol_wms_nobuffer = new OpenLayers.Layer.WMS( "OpenLayers WMS (no tile buffer)", new OpenLayers.Layer.XYZ("OSM (with buffer)", urls, {
"http://vmap0.tiles.osgeo.org/wms/vmap0", transitionEffect: "resize", buffer: 2, sphericalMercator: true
{layers: 'basic'}, {buffer: 0}); }),
new OpenLayers.Layer.XYZ("OSM (without buffer)", urls, {
transitionEffect: "resize", buffer: 0, sphericalMercator: true
})
],
controls: [
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.Attribution()
],
center: [0, 0],
zoom: 3
});
map.addLayers([ol_wms, ol_wms_nobuffer]); map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 6);
}
examples/style.mobile.css
+6
View File
@@ -23,3 +23,9 @@ div.olControlZoomPanel .olControlZoomOutItemInactive {
top: 72px; top: 72px;
background-position: 0 -72px; background-position: 0 -72px;
} }
.olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
lib/OpenLayers/Layer/Grid.js
+30 -5
View File
@@ -145,6 +145,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/ */
backBufferLonLat: null, backBufferLonLat: null,
/**
* Property; backBufferTimerId
* {Number} The id of the back buffer timer. This timer is used to
* delay the removal of the back buffer, thereby preventing
* flash effects caused by tile animation.
*/
backBufferTimerId: null,
/** /**
* Register a listener for a particular event with the following syntax: * Register a listener for a particular event with the following syntax:
* (code) * (code)
@@ -197,6 +205,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
window.clearTimeout(this.timerId); window.clearTimeout(this.timerId);
this.timerId = null; this.timerId = null;
} }
if(this.backBufferTimerId !== null) {
window.clearTimeout(this.backBufferTimerId);
this.backBufferTimerId = null;
}
}, },
/** /**
@@ -204,9 +216,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* Deconstruct the layer and clear the grid. * Deconstruct the layer and clear the grid.
*/ */
destroy: function() { destroy: function() {
this.removeBackBuffer();
this.clearGrid(); this.clearGrid();
// clearGrid should remove any back buffer from the layer,
// so no need to call removeBackBuffer here
this.grid = null; this.grid = null;
this.tileSize = null; this.tileSize = null;
@@ -455,6 +466,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* resolution - {Number} The resolution to transition to. * resolution - {Number} The resolution to transition to.
*/ */
applyBackBuffer: function(resolution) { applyBackBuffer: function(resolution) {
if(this.backBufferTimerId !== null) {
this.removeBackBuffer();
}
var backBuffer = this.backBuffer; var backBuffer = this.backBuffer;
if(!backBuffer) { if(!backBuffer) {
backBuffer = this.createBackBuffer(); backBuffer = this.createBackBuffer();
@@ -530,10 +544,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* Remove back buffer from DOM. * Remove back buffer from DOM.
*/ */
removeBackBuffer: function() { removeBackBuffer: function() {
if(this.backBuffer && this.backBuffer.parentNode) { if(this.backBuffer) {
this.div.removeChild(this.backBuffer); this.div.removeChild(this.backBuffer);
this.backBuffer = null; this.backBuffer = null;
this.backBufferResolution = null; this.backBufferResolution = null;
if(this.backBufferTimerId !== null) {
window.clearTimeout(this.backBufferTimerId);
this.backBufferTimerId = null;
}
} }
}, },
@@ -937,8 +955,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
//if that was the last tile, then trigger a 'loadend' on the layer //if that was the last tile, then trigger a 'loadend' on the layer
if (this.numLoadingTiles == 0) { if (this.numLoadingTiles == 0) {
this.events.triggerEvent("loadend"); this.events.triggerEvent("loadend");
this.removeBackBuffer(); if(this.backBuffer) {
} // the removal of the back buffer is delayed to prevent flash
// effects due to the animation of tile displaying
this.backBufferTimerId = window.setTimeout(
OpenLayers.Function.bind(this.removeBackBuffer, this),
2500
);
}
}
}; };
tile.events.register("loadend", this, tile.onLoadEnd); tile.events.register("loadend", this, tile.onLoadEnd);
tile.events.register("unload", this, tile.onLoadEnd); tile.events.register("unload", this, tile.onLoadEnd);
lib/OpenLayers/Tile/Image.js
+13 -8
View File
@@ -80,7 +80,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* transition effects are not supported if POST requests are used. * transition effects are not supported if POST requests are used.
*/ */
maxGetUrlLength: null, maxGetUrlLength: null,
/** TBD 3.0 - reorder the parameters to the init function to remove /** TBD 3.0 - reorder the parameters to the init function to remove
* URL. the getUrl() function on the layer gets called on * URL. the getUrl() function on the layer gets called on
* each draw(), so no need to specify it here. * each draw(), so no need to specify it here.
@@ -243,13 +243,14 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
style.width = "100%"; style.width = "100%";
style.height = "100%"; style.height = "100%";
} }
style.display = "none"; style.visibility = "hidden";
style.position = "absolute"; style.opacity = 0;
if (this.layer.opacity < 1) { if (this.layer.opacity < 1) {
OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, style.filter = 'alpha(opacity=' +
null, null, null, null, (this.layer.opacity * 100) +
this.layer.opacity); ')';
} }
style.position = "absolute";
if (this.layerAlphaHack) { if (this.layerAlphaHack) {
// move the image out of sight // move the image out of sight
style.paddingTop = style.height; style.paddingTop = style.height;
@@ -311,7 +312,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
*/ */
setImgSrc: function(url) { setImgSrc: function(url) {
var img = this.imgDiv; var img = this.imgDiv;
img.style.display = "none"; img.style.visibility = 'hidden';
img.style.opacity = 0;
if (url) { if (url) {
img.src = url; img.src = url;
} }
@@ -360,7 +362,10 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
onImageLoad: function() { onImageLoad: function() {
var img = this.imgDiv; var img = this.imgDiv;
OpenLayers.Event.stopObservingElement(img); OpenLayers.Event.stopObservingElement(img);
img.style.display = "";
img.style.visibility = 'inherit';
img.style.opacity = this.layer.opacity;
this.isLoading = false; this.isLoading = false;
this.events.triggerEvent("loadend"); this.events.triggerEvent("loadend");
notes/2.12.md
+22
View File
@@ -1,3 +1,25 @@
# Major enhancements
## Tile animation
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 {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
People can override this rule to use other transition settings. To remove tile animation entirely use:
.olTileImage {
-webkit-transition: none;
-moz-transition: none;
-o-transition: all 0 none;
transition: none;
}
# Behavior Changes from Past Releases # Behavior Changes from Past Releases
## Function return values ## Function return values
tests/Layer/ArcGIS93Rest.html
-25
View File
@@ -190,31 +190,6 @@
} }
function test_Layer_AGS93_setOpacity (t) {
var params = {layers: "show:0,2"};
t.plan( 5 );
var map = new OpenLayers.Map('map');
map.projection = "xx";
tParams = { layers: 'show:0,2',
format: 'png'};
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.ArcGIS93Rest(name, url, tParams, tOptions);
map.addLayer(tLayer);
map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
tLayer.setOpacity("0.6");
t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
var pixel = new OpenLayers.Pixel(5,6);
var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
tile.draw();
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.6, "Tile opacity is set correctly");
map.destroy();
}
function test_Layer_AGS93_noGutters (t) { function test_Layer_AGS93_noGutters (t) {
t.plan(2); t.plan(2);
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
tests/Layer/Grid.html
+104 -2
View File
@@ -659,6 +659,38 @@
t.eq( layer.grid, null, "layer.grid is null after destroy" ); t.eq( layer.grid, null, "layer.grid is null after destroy" );
t.eq( layer.tileSize, null, "layer.tileSize is null after destroy" ); t.eq( layer.tileSize, null, "layer.tileSize is null after destroy" );
} }
function test_setOpacity(t) {
t.plan(5);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true,
opacity: '0.6'
});
map.addLayer(layer);
// setCenter adds tiles to the layer's grid
map.setCenter(new OpenLayers.LonLat(0, 0), 5);
var tile = layer.grid[0][0], tileImg = tile.imgDiv;
tile.onImageLoad(); // simulate an image load event
t.eq(layer.opacity, '0.6', 'layer opacity value is correct');
t.eq(parseFloat(tileImg.style.opacity), 0.6, 'tile opacity is correct');
layer.setOpacity('0.2');
t.eq(layer.opacity, '0.2', 'layer opacity value is correct');
t.eq(parseFloat(tileImg.style.opacity), 0.2, 'tile opacity is correct');
tile = layer.addTile(new OpenLayers.Bounds(1, 2, 3, 4),
new OpenLayers.Pixel(5, 6));
tile.draw(); // add tile to the grid
tile.onImageLoad(); // simulate an image load event
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.2, "tile opacity is correc");
map.destroy();
}
function test_getServerResolution(t) { function test_getServerResolution(t) {
@@ -937,7 +969,7 @@
} }
function test_applyBackBuffer(t) { function test_applyBackBuffer(t) {
t.plan(13); t.plan(16);
var map = new OpenLayers.Map('map2'); var map = new OpenLayers.Map('map2');
var layer = new OpenLayers.Layer.WMS('', '', {}, { var layer = new OpenLayers.Layer.WMS('', '', {}, {
@@ -1000,6 +1032,24 @@
t.eq(layer.backBuffer.style.top, '295%', t.eq(layer.backBuffer.style.top, '295%',
'back buffer has correct top'); 'back buffer has correct top');
// test #4
// and a back buffer in the layer and do as if back buffer removal
// has been scheduled, and test that applyBackBuffer removes the
// back buffer and clears the timer
layer.createBackBuffer = function() {
return;
};
backBuffer = document.createElement('div');
layer.div.insertBefore(backBuffer, layer.div.firstChild);
layer.backBuffer = backBuffer;
layer.backBufferTimerId = 'fake';
layer.applyBackBuffer(2);
t.ok(backBuffer.parentNode !== layer.div,
'back buffer is not child node of layer div');
t.eq(layer.backBuffer, null,
'back buffer not set in layer');
t.eq(layer.backBufferTimerId, null,
'back buffer timer cleared');
map.destroy(); map.destroy();
} }
@@ -1046,7 +1096,7 @@
} }
function test_removeBackBuffer(t) { function test_removeBackBuffer(t) {
t.plan(3); t.plan(4);
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('', '', {}, {isBaseLayer: true}); var layer = new OpenLayers.Layer.WMS('', '', {}, {isBaseLayer: true});
@@ -1058,12 +1108,17 @@
layer.div.appendChild(backBuffer); layer.div.appendChild(backBuffer);
layer.backBufferResolution = 32; layer.backBufferResolution = 32;
// add a fake back buffer removal timer
layer.backBufferTimerId = 'fake';
layer.removeBackBuffer(); layer.removeBackBuffer();
t.eq(layer.backBuffer, null, 'backBuffer set to null in layer'); t.eq(layer.backBuffer, null, 'backBuffer set to null in layer');
t.eq(layer.backBufferResolution, null, t.eq(layer.backBufferResolution, null,
'backBufferResolution set to null in layer'); 'backBufferResolution set to null in layer');
t.ok(backBuffer.parentNode !== layer.div, t.ok(backBuffer.parentNode !== layer.div,
'back buffer removed from layer'); 'back buffer removed from layer');
t.eq(layer.backBufferTimerId, null,
'backBufferTimerId set to null in layer');
map.destroy(); map.destroy();
} }
@@ -1203,6 +1258,53 @@
map.destroy(); map.destroy();
} }
function test_delayed_back_buffer_removal(t) {
//
// Test that the delaying of the back buffer removal behaves
// as expected.
//
t.plan(5);
// set up
var map = new OpenLayers.Map('map', {
resolutions: [32, 16, 8, 4, 2, 1]
});
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true,
transitionEffect: 'resize'
});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.zoomTo(1);
t.delay_call(1, function() {
t.ok(layer.backBuffer.parentNode === layer.div,
'[a] back buffer is a child of layer div');
t.ok(layer.backBufferTimerId !== null,
'[a] back buffer scheduled for removal');
var backBuffer = layer.backBuffer;
map.zoomTo(2);
t.ok(layer.backBuffer !== backBuffer,
'[b] a new back buffer was created');
t.ok(layer.backBuffer.parentNode === layer.div,
'[b] back buffer is a child of layer div');
t.ok(layer.backBufferTimerId === null,
'[b] back buffer no longer scheduled for removal');
// tear down
map.destroy();
});
}
</script> </script>
</head> </head>
<body> <body>
tests/Layer/Image.html
+1 -1
View File
@@ -128,7 +128,7 @@
function test_loadEvents(t) { function test_loadEvents(t) {
t.plan(3); t.plan(3);
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.Image( var layer = new OpenLayers.Layer.Image(
'Test', '../../img/blank.gif', 'Test', '../../img/blank.gif',
new OpenLayers.Bounds(-180, -88.759, 180, 88.759), new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
tests/Layer/MapServer.html
-25
View File
@@ -190,31 +190,6 @@
} }
function test_Layer_MapServer_setOpacity (t) {
t.plan( 5 );
var map = new OpenLayers.Map('map');
map.projection = "xx";
tUrl = "http://labs.metacarta.com/cgi-bin/mapserv";
tParams = { layers: 'basic',
format: 'image/png'};
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.MapServer(name, tUrl, tParams, tOptions);
map.addLayer(tLayer);
map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
tLayer.setOpacity("0.6");
t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
var pixel = new OpenLayers.Pixel(5,6);
var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
tile.draw();
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.6, "Tile opacity is set correctly");
map.destroy();
}
function test_Layer_MapServer_singleTile (t) { function test_Layer_MapServer_singleTile (t) {
t.plan( 5 ); t.plan( 5 );
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
tests/Layer/WMS.html
+15 -21
View File
@@ -271,31 +271,25 @@
} }
function test_Layer_WMS_setOpacity (t) { function test_setOpacity(t) {
t.plan( 5 ); t.plan(1);
var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.WMS(
map.projection = "xx"; null, "/bogus/wms", {layers: "mylayer"}
tUrl = "http://octo.metacarta.com/cgi-bin/mapserv"; );
tParams = { layers: 'basic', var map = new OpenLayers.Map("map");
format: 'image/png'}; map.addLayer(layer);
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.WMS(name, tUrl, tParams, tOptions);
map.addLayer(tLayer);
map.zoomToMaxExtent(); map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct"); layer.setOpacity(0.5);
tLayer.setOpacity("0.6"); t.delay_call(1, function() {
t.eq(tLayer.opacity, "0.6", "setOpacity works properly"); t.eq(parseFloat(layer.div.firstChild.style.opacity), 0.5, "opacity set");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly"); map.destroy();
var pixel = new OpenLayers.Pixel(5,6); });
var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
tile.draw();
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.6, "Tile opacity is set correctly");
map.destroy();
} }
function test_Layer_WMS_noGutters (t) { function test_Layer_WMS_noGutters (t) {
t.plan(2); t.plan(2);
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
tests/Tile/Image.html
+28 -2
View File
@@ -262,14 +262,14 @@
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size); tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw(); tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true); tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true);
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Tile image is invisible.") } ); t.delay_call( 1, function() { t.eq(tile.imgDiv.style.visibility, "hidden", "Tile image is invisible.") } );
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {'alpha':true}); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {'alpha':true});
map.addLayer(layer); map.addLayer(layer);
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size); tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw(); tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true) tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true)
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Alpha tile image is invisible.") } ); t.delay_call( 1, function() { t.eq(tile.imgDiv.style.visibility, "hidden", "Alpha tile image is invisible.") } );
} }
@@ -343,6 +343,32 @@
map.destroy(); map.destroy();
} }
function test_onImageLoad(t) {
t.plan(3);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {opacity: 0.5});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0,0), 5);
var tile = layer.grid[0][0];
var log;
tile.events.on({loadend: function() { log++; }});
log = 0;
tile.onImageLoad();
t.eq(tile.imgDiv.style.visibility, 'inherit',
'onImageLoad makes the image visible');
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.5,
'onImageLoad sets the expected opacity for the image');
t.eq(log, 1,
'onImageLoad does trigger loadend');
map.destroy();
}
// test for https://github.com/openlayers/openlayers/pull/36 // test for https://github.com/openlayers/openlayers/pull/36
// (more an integration test than a unit test) // (more an integration test than a unit test)
function test_olImageLoadError(t) { function test_olImageLoadError(t) {
tests/deprecated/Layer/MapServer/Untiled.html
-21
View File
@@ -118,27 +118,6 @@
} }
function test_Layer_MapServer_Untiled_setOpacity (t) {
t.plan( 4 );
var map = new OpenLayers.Map('map');
map.projection = "xx";
tUrl = "http://labs.metacarta.com/cgi-bin/mapserv";
tParams = { layers: 'basic',
format: 'image/png'};
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.MapServer.Untiled(name, tUrl, tParams, tOptions);
map.addLayer(tLayer);
map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
tLayer.setOpacity("0.6");
t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
map.destroy();
}
// DEPRECATED -- REMOVE IN 3.0 // DEPRECATED -- REMOVE IN 3.0
function test_Layer_Untiled_MapServer(t) { function test_Layer_Untiled_MapServer(t) {
t.plan(1); t.plan(1);
theme/default/style.css
+11
View File
@@ -428,3 +428,14 @@ span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { .olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
background-position: -26px -24px; background-position: -26px -24px;
} }
/**
* Animations
*/
.olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}