openlayers/examples/animated_panning.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Animated Panning of the Map via map.panTo</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var map, layer, running = false;
   9
  10         OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
  11             defaultHandlerOptions: {
  12                 'single': true,
  13                 'delay': 200
  14             },
  15
  16             initialize: function(options) {
  17                 this.handlerOptions = OpenLayers.Util.extend(
  18                     {}, this.defaultHandlerOptions
  19                 );
  20                 OpenLayers.Control.prototype.initialize.apply(
  21                     this, arguments
  22                 );
  23                 this.handler = new OpenLayers.Handler.Click(
  24                     this, {
  25                         'click': this.onClick
  26                     }, this.handlerOptions
  27                 );
  28             },
  29
  30             onClick: function(evt) {
  31                 map.panTo(map.getLonLatFromPixel(evt.xy));
  32             }
  33
  34         });
  35
  36         function init(){
  37             map = new OpenLayers.Map('map', {numZoomLevels: 2});
  38             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  39                 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  40
  41             map.addLayer(layer);
  42             map.zoomToMaxExtent();
  43             var click = new OpenLayers.Control.Click();
  44             map.addControl(click);
  45             click.activate();
  46             map.addControl(new OpenLayers.Control.OverviewMap());
  47
  48             map2 = new OpenLayers.Map('map2', {'panMethod': null, numZoomLevels: 2} );
  49             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  50                 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  51
  52             map2.addLayer(layer);
  53             map2.zoomToMaxExtent();
  54         }
  55
  56         function setCenterInterval() {
  57             if (!running) {
  58                 setCenter();
  59                 running = setInterval('setCenter()', 500);
  60             } else {
  61                 clearInterval(running);
  62                 running = false;
  63             }
  64         }
  65
  66         function setCenter() {
  67             var lon = Math.random() * 360 - 180;
  68             var lat = Math.random() * 180 - 90;
  69             var lonlat = new OpenLayers.LonLat(lon, lat);
  70             map.panTo(lonlat);
  71         }
  72     </script>
  73   </head>
  74   <body onload="init()">
  75     <h1 id="title">map.panTo Example</h1>
  76     <div id="tags">map.panTo</div>
  77     <div id="shortdesc">Show animated panning effects in the map</div>
  78     <div id="map" class="smallmap"></div>
  79     <div id="docs">
  80         <p>This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br />
  81         The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly
  82         to that area, or use the pan control to pan smoothly.
  83         </p>
  84     </div>
  85     <button onclick="setCenterInterval()">Start/stop random recenter</button>
  86     <div id="map2" class="smallmap"></div>
  87     <div>
  88     <p>To turn off Animated Panning, create a map with an panMethod set to
  89         null. </p>
  90     </div>
  91   </body>
  92 </html>