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

6
examples/fullScreen.html
View File

@@ -25,9 +25,8 @@
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script src="fullScreen.js"></script>
</head>
<body onload="init()">
<body>
<div id="map"></div>
<div id="text">
@@ -38,7 +37,7 @@
</div>
<p id="shortdesc">
Demonstrate a map that fill the entire browser window.
Demonstrate a map that fills the entire browser window.
</p>
<div id="docs">
@@ -48,6 +47,7 @@
<a href="fullScreen.js" target="_blank">fullScreen.js source</a>
to see how this is done.</p>
</div>
<script src="fullScreen.js"></script>
</div>
</body>
</html>

41
examples/fullScreen.js
View File

@@ -1,15 +1,30 @@
var map;
function init(){
map = new OpenLayers.Map('map');
var urls = [
"http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
"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",
"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});
var map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.XYZ("OSM (with buffer)", urls, {
transitionEffect: "resize", buffer: 2, sphericalMercator: true
}),
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.setCenter(new OpenLayers.LonLat(0, 0), 6);
}
map.addControl(new OpenLayers.Control.LayerSwitcher());

6
examples/style.mobile.css
View File

@@ -23,3 +23,9 @@ div.olControlZoomPanel .olControlZoomOutItemInactive {
top: 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;
}