diff options
Diffstat (limited to 'misc/openlayers/examples/click-handler.html')
| -rw-r--r-- | misc/openlayers/examples/click-handler.html | 232 |
1 files changed, 0 insertions, 232 deletions
diff --git a/misc/openlayers/examples/click-handler.html b/misc/openlayers/examples/click-handler.html deleted file mode 100644 index d0bd9d4..0000000 --- a/misc/openlayers/examples/click-handler.html +++ /dev/null @@ -1,232 +0,0 @@ -<!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> |