diff options
Diffstat (limited to 'misc/openlayers/examples/click-handler.html')
| -rw-r--r-- | misc/openlayers/examples/click-handler.html | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/misc/openlayers/examples/click-handler.html b/misc/openlayers/examples/click-handler.html new file mode 100644 index 0000000..d0bd9d4 --- /dev/null +++ b/misc/openlayers/examples/click-handler.html @@ -0,0 +1,232 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers Click Handler Example</title> + + <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="style.css" type="text/css"> + <style type="text/css"> + #map { + width: 340px; + height: 170px; + border: 1px solid gray; + } + #west { + width: 350px; + } + #east { + position: absolute; + left: 370px; + top: 4em; + } + + table td { + text-align: center; + margin: 0; + border: 1px solid gray; + } + textarea.output { + text-align: left; + font-size: 0.9em; + width: 250px; + height: 65px; + overflow: auto; + } + </style> + <script src="../lib/Firebug/firebug.js"></script> + <script src="../lib/OpenLayers.js"></script> + <script type="text/javascript"> + + OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { + defaultHandlerOptions: { + 'single': true, + 'double': false, + 'pixelTolerance': 0, + 'stopSingle': false, + 'stopDouble': false + }, + + 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, + 'dblclick': this.onDblclick + }, this.handlerOptions + ); + }, + + onClick: function(evt) { + var output = document.getElementById(this.key + "Output"); + var msg = "click " + evt.xy; + output.value = output.value + msg + "\r\n"; + }, + + onDblclick: function(evt) { + var output = document.getElementById(this.key + "Output"); + var msg = "dblclick " + evt.xy; + output.value = output.value + msg + "\n"; + } + + }); + + var map, controls; + + function init(){ + + map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} + ); + map.addLayers([layer]); + + controls = { + "single": new OpenLayers.Control.Click({ + handlerOptions: { + "single": true + } + }), + "double": new OpenLayers.Control.Click({ + handlerOptions: { + "single": false, + "double": true + } + }), + "both": new OpenLayers.Control.Click({ + handlerOptions: { + "single": true, + "double": true + } + }), + "drag": new OpenLayers.Control.Click({ + handlerOptions: { + "single": true, + "pixelTolerance": null + } + }), + "stopsingle": new OpenLayers.Control.Click({ + handlerOptions: { + "single": true, + "stopSingle": true + } + }), + "stopdouble": new OpenLayers.Control.Click({ + handlerOptions: { + "single": false, + "double": true, + "stopDouble": true + } + }) + }; + + var props = document.getElementById("props"); + var control; + for(var key in controls) { + control = controls[key]; + // only to route output here + control.key = key; + map.addControl(control); + } + + map.zoomToMaxExtent(); + } + + function toggle(key) { + var control = controls[key]; + if(control.active) { + control.deactivate(); + } else { + control.activate(); + } + var status = document.getElementById(key + "Status"); + status.innerHTML = control.active ? "on" : "off"; + var output = document.getElementById(key + "Output"); + output.value = ""; + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Click Handler Example</h1> + <div id="west"> + + <div id="tags"> + event, events, propagation, advanced + </div> + + <p id="shortdesc"> + This example shows the use of the click handler. + </p> + + <div id="map" class="smallmap"></div> + <p> + The click handler can be used to gain more flexibility over handling + click events. The handler can be constructed with options to handle + only single click events, to handle single and double-click events, + to ignore clicks that include a drag, and to stop propagation of + single and/or double-click events. A single click is a click that + is not followed by another click for more than 300ms. This delay + is configured with the delay property. + </p> + <p> + The options to stop single and double clicks have to do with + stopping event propagation on the map events listener queue + (not stopping events from cascading to other elements). The + ability to stop an event from propagating has to do with the + order in which listeners are registered. With stopSingle or + stopDouble true, a click handler will stop propagation to all + listeners that were registered (or all handlers that were + activated) before the click handler was activated. So, for + example, activating a click handler with stopDouble true after + the navigation control is active will stop double-clicks from + zooming in. + </p> + </div> + <div id="east"> + <table> + <caption>Controls with click handlers (toggle on/off to clear output)</caption> + <tbody> + <tr> + <td>single only</td> + <td><button id="singleStatus" onclick="toggle('single')">off</button></td> + <td><textarea class="output" id="singleOutput"></textarea></td> + </tr> + <tr> + <td>double only</td> + <td><button id="doubleStatus" onclick="toggle('double')">off</button></td> + <td><textarea class="output" id="doubleOutput"></textarea></td> + </tr> + <tr> + <td>both</td> + <td><button id="bothStatus" onclick="toggle('both')">off</button></td> + <td><textarea class="output" id="bothOutput"></textarea></td> + </tr> + <tr> + <td>single with drag</td> + <td><button id="dragStatus" onclick="toggle('drag')">off</button></td> + <td><textarea class="output" id="dragOutput"></textarea></td> + </tr> + <tr> + <td>single with stop</td> + <td><button id="stopsingleStatus" onclick="toggle('stopsingle')">off</button></td> + <td><textarea class="output" id="stopsingleOutput"></textarea></td> + </tr> + <tr> + <td>double with stop</td> + <td><button id="stopdoubleStatus" onclick="toggle('stopdouble')">off</button></td> + <td><textarea class="output" id="stopdoubleOutput"></textarea></td> + </tr> + </tbody> + </table> + </div> + </body> +</html> |