Files
openlayers/examples/animated_panning.html
crschmidt efb925d632 Commit fixes for:
* (Closes #2360) make Layer.addOptions call initResolutions if necessary
 * (Closes #2656) no way to pass read options from protocol to format
 * (Closes #2751) Changes in languages: "es" and "ca".
 * (Closes #2814) SLDSelect control tests failing
 * (Closes #2815) Cluster Strategy should not destroy all features

Also:
 * Change examples to use OSGeo, rather than MetaCarta, servers.
 * Change copyright statements to correctly state joint copyright
   in the project, rather than MetaCarta copyright.


git-svn-id: http://svn.openlayers.org/branches/openlayers/2.10@10715 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2010-09-02 21:43:25 +00:00

93 lines
3.4 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animated Panning of the Map via map.panTo</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer, running = false;
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'delay': 200
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.onClick
}, this.handlerOptions
);
},
onClick: function(evt) {
map.panTo(map.getLonLatFromPixel(evt.xy));
}
});
function init(){
map = new OpenLayers.Map('map', {numZoomLevels: 2});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.zoomToMaxExtent();
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.addControl(new OpenLayers.Control.OverviewMap());
map2 = new OpenLayers.Map('map2', {'panMethod': null, numZoomLevels: 2} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map2.addLayer(layer);
map2.zoomToMaxExtent();
}
function setCenterInterval() {
if (!running) {
setCenter();
running = setInterval('setCenter()', 500);
} else {
clearInterval(running);
running = false;
}
}
function setCenter() {
var lon = Math.random() * 360 - 180;
var lat = Math.random() * 180 - 90;
var lonlat = new OpenLayers.LonLat(lon, lat);
map.panTo(lonlat);
}
</script>
</head>
<body onload="init()">
<h1 id="title">map.panTo Example</h1>
<div id="tags">map.panTo</div>
<div id="shortdesc">Show animated panning effects in the map</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br />
The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly
to that area, or use the pan control to pan smoothly.
</p>
</div>
<button onclick="setCenterInterval()">Start/stop random recenter</button>
<div id="map2" class="smallmap"></div>
<div>
<p>To turn off Animated Panning, create a map with an panMethod set to
null. </p>
</div>
</body>
</html>