summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/click-handler.html
diff options
context:
space:
mode:
authorChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
committerChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
commitea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
treeaf67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/click-handler.html
parent59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
downloadpostrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/click-handler.html')
-rw-r--r--misc/openlayers/examples/click-handler.html232
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-24 02:01:23 +0000