← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/animated_panning.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/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');
 
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} );
 
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>