← 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/hover-handler.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/hover-handler.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
    <head>
 
3
        <title>OpenLayers Hover Handler Example</title>
 
4
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
 
5
        <link rel="stylesheet" href="style.css" type="text/css" />        
 
6
        <style type="text/css">
 
7
            #map {
 
8
                width: 340px;
 
9
                height: 170px;
 
10
                border: 1px solid gray;
 
11
            }
 
12
            #west {
 
13
                width: 350px;
 
14
            }
 
15
            #east {
 
16
                position: absolute;
 
17
                left: 370px;
 
18
                top: 3em;
 
19
            }
 
20
 
 
21
            table td {
 
22
                text-align: center;
 
23
                margin: 0;
 
24
                border: 1px solid gray;
 
25
            }
 
26
            textarea.output {
 
27
                text-align: left;
 
28
                font-size: 0.9em;
 
29
                width: 250px;
 
30
                height: 65px;
 
31
                overflow: auto;
 
32
            }
 
33
        </style>
 
34
        <script src="../lib/Firebug/firebug.js"></script>
 
35
        <script src="../lib/OpenLayers.js"></script>
 
36
        <script type="text/javascript">
 
37
 
 
38
            OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control, {                
 
39
                defaultHandlerOptions: {
 
40
                    'delay': 500,
 
41
                    'pixelTolerance': null,
 
42
                    'stopMove': false
 
43
                },
 
44
 
 
45
                initialize: function(options) {
 
46
                    this.handlerOptions = OpenLayers.Util.extend(
 
47
                        {}, this.defaultHandlerOptions
 
48
                    );
 
49
                    OpenLayers.Control.prototype.initialize.apply(
 
50
                        this, arguments
 
51
                    ); 
 
52
                    this.handler = new OpenLayers.Handler.Hover(
 
53
                        this,
 
54
                        {'pause': this.onPause, 'move': this.onMove},
 
55
                        this.handlerOptions
 
56
                    );
 
57
                }, 
 
58
 
 
59
                onPause: function(evt) {
 
60
                    var output = document.getElementById(this.key + 'Output');
 
61
                    var msg = 'pause ' + evt.xy;
 
62
                    output.value = output.value + msg + "\r\n";
 
63
                },
 
64
 
 
65
                onMove: function(evt) {
 
66
                    // if this control sent an Ajax request (e.g. GetFeatureInfo) when
 
67
                    // the mouse pauses the onMove callback could be used to abort that
 
68
                    // request.
 
69
                }
 
70
            });
 
71
 
 
72
            var map, controls; 
 
73
 
 
74
            function init(){
 
75
        
 
76
                map = new OpenLayers.Map('map');
 
77
                var layer = new OpenLayers.Layer.WMS(
 
78
                    'OpenLayers WMS',
 
79
                    'http://labs.metacarta.com/wms/vmap0',
 
80
                    {layers: 'basic'}
 
81
                );
 
82
                map.addLayers([layer]);
 
83
                
 
84
                controls = {
 
85
                    'long': new OpenLayers.Control.Hover({
 
86
                        handlerOptions: {
 
87
                            'delay': 2000
 
88
                        }
 
89
                    }),
 
90
                    'short': new OpenLayers.Control.Hover({
 
91
                        handlerOptions: {
 
92
                            'delay': 100
 
93
                        }
 
94
                    }),
 
95
                    'tolerant': new OpenLayers.Control.Hover({
 
96
                        handlerOptions: {
 
97
                            'delay': 1000,
 
98
                            'pixelTolerance': 6
 
99
                        }
 
100
                    }),
 
101
                    'untolerant': new OpenLayers.Control.Hover({
 
102
                        handlerOptions: {
 
103
                            'delay': 1000,
 
104
                            'pixelTolerance': 1
 
105
                        }
 
106
                    }),
 
107
                    'stoppropag': new OpenLayers.Control.Hover({
 
108
                        handlerOptions: {
 
109
                            'stopMove': true
 
110
                        }
 
111
                    })
 
112
                };
 
113
 
 
114
                var props = document.getElementById("props");
 
115
                var control;
 
116
                for(var key in controls) {
 
117
                    control = controls[key];
 
118
                    // only to route output here
 
119
                    control.key = key;
 
120
                    map.addControl(control);
 
121
                }
 
122
 
 
123
                map.addControl(new OpenLayers.Control.MousePosition());
 
124
                map.zoomToMaxExtent();
 
125
            }
 
126
            
 
127
            function toggle(key) {
 
128
                var control = controls[key];
 
129
                if(control.active) {
 
130
                    control.deactivate();
 
131
                } else {
 
132
                    control.activate();
 
133
                }
 
134
                var status = document.getElementById(key + "Status");
 
135
                status.innerHTML = control.active ? "on" : "off";
 
136
                var output = document.getElementById(key + "Output");
 
137
                output.value = "";
 
138
            }
 
139
        </script>
 
140
    </head>
 
141
    <body onload="init()">
 
142
        <h1 id="title">Hover Handler Example</h1>
 
143
        <div id="west">
 
144
    
 
145
            <div id="tags">
 
146
            </div>
 
147
    
 
148
            <p id="shortdesc">
 
149
                This example shows the use of the hover handler.
 
150
            </p>
 
151
    
 
152
            <div id="map" class="smallmap"></div>
 
153
            <p>
 
154
                The hover handler is to be used to emulate mouseovers on
 
155
                objects on the map that aren't DOM elements. For example
 
156
                one can use the hover hander to send WMS/GetFeatureInfo
 
157
                requests as the user moves the mouse over the map.
 
158
            </p>
 
159
            <p>
 
160
                The "delay" option specifies the number of milliseconds
 
161
                before the event is considered a hover. Default is 500
 
162
                milliseconds.
 
163
            </p>
 
164
            <p>
 
165
                The "pixelTolerance" option specifies the maximum number
 
166
                of pixels between mousemoves for an event to be
 
167
                considered a hover. Default is null, which means no
 
168
                pixel tolerance.
 
169
            </p>
 
170
            <p>
 
171
                The "stopMove" option specifies whether other mousemove
 
172
                listeners registered before the hover handler listener must
 
173
                be notified on mousemoves or not. Default is false (meaning
 
174
                that the other mousemove listeners will be notified on
 
175
                mousemove).
 
176
            </p>
 
177
        </div>
 
178
        <div id="east">
 
179
            <table>
 
180
                <caption>Controls with hover handlers (toggle on/off to clear output)</caption>
 
181
                <tbody>
 
182
                    <tr>
 
183
                        <td>long delay (2 sec)</td>
 
184
                        <td><button id="longStatus" onclick="toggle('long')">off</button></td>
 
185
                        <td><textarea class="output" id="longOutput"></textarea></td>
 
186
                    </tr>
 
187
                    <tr>
 
188
                        <td>short delay (100 msec)</td>
 
189
                        <td><button id="shortStatus" onclick="toggle('short')">off</button></td>
 
190
                        <td><textarea class="output" id="shortOutput"></textarea></td>
 
191
                    </tr>
 
192
                    <tr>
 
193
                        <td>tolerant (6 pixels)</td>
 
194
                        <td><button id="tolerantStatus" onclick="toggle('tolerant')">off</button></td>
 
195
                        <td><textarea class="output" id="tolerantOutput"></textarea></td>
 
196
                    </tr>
 
197
                    <tr>
 
198
                        <td>untolerant (1 pixel)</td>
 
199
                        <td><button id="untolerantStatus" onclick="toggle('untolerant')">off</button></td>
 
200
                        <td><textarea class="output" id="untolerantOutput"></textarea></td>
 
201
                    </tr>
 
202
                    <tr>
 
203
                        <td>stop propagation</td>
 
204
                        <td><button id="stoppropagStatus" onclick="toggle('stoppropag')">off</button></td>
 
205
                        <td><textarea class="output" id="stoppropagOutput"></textarea></td>
 
206
                    </tr>
 
207
                </tbody>
 
208
            </table>
 
209
        </div>
 
210
    </body>
 
211
</html>