1 <html xmlns="http://www.w3.org/1999/xhtml">
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">
10 border: 1px solid gray;
24 border: 1px solid gray;
34 <script src="../lib/Firebug/firebug.js"></script>
35 <script src="../lib/OpenLayers.js"></script>
36 <script type="text/javascript">
38 OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control, {
39 defaultHandlerOptions: {
41 'pixelTolerance': null,
45 initialize: function(options) {
46 this.handlerOptions = OpenLayers.Util.extend(
47 {}, this.defaultHandlerOptions
49 OpenLayers.Control.prototype.initialize.apply(
52 this.handler = new OpenLayers.Handler.Hover(
54 {'pause': this.onPause, 'move': this.onMove},
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";
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
76 map = new OpenLayers.Map('map');
77 var layer = new OpenLayers.Layer.WMS(
79 'http://labs.metacarta.com/wms/vmap0',
82 map.addLayers([layer]);
85 'long': new OpenLayers.Control.Hover({
90 'short': new OpenLayers.Control.Hover({
95 'tolerant': new OpenLayers.Control.Hover({
101 'untolerant': new OpenLayers.Control.Hover({
107 'stoppropag': new OpenLayers.Control.Hover({
114 var props = document.getElementById("props");
116 for(var key in controls) {
117 control = controls[key];
118 // only to route output here
120 map.addControl(control);
123 map.addControl(new OpenLayers.Control.MousePosition());
124 map.zoomToMaxExtent();
127 function toggle(key) {
128 var control = controls[key];
130 control.deactivate();
134 var status = document.getElementById(key + "Status");
135 status.innerHTML = control.active ? "on" : "off";
136 var output = document.getElementById(key + "Output");
141 <body onload="init()">
142 <h1 id="title">Hover Handler Example</h1>
149 This example shows the use of the hover handler.
152 <div id="map" class="smallmap"></div>
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.
160 The "delay" option specifies the number of milliseconds
161 before the event is considered a hover. Default is 500
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
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
180 <caption>Controls with hover handlers (toggle on/off to clear output)</caption>
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>
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>
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>
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>
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>