summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/hover-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/hover-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/hover-handler.html')
-rw-r--r--misc/openlayers/examples/hover-handler.html216
1 files changed, 216 insertions, 0 deletions
diff --git a/misc/openlayers/examples/hover-handler.html b/misc/openlayers/examples/hover-handler.html
new file mode 100644
index 0000000..84d7f1c
--- /dev/null
+++ b/misc/openlayers/examples/hover-handler.html
@@ -0,0 +1,216 @@
+<!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 Hover 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: 3em;
+ }
+
+ 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.Hover = OpenLayers.Class(OpenLayers.Control, {
+ defaultHandlerOptions: {
+ 'delay': 500,
+ 'pixelTolerance': null,
+ 'stopMove': false
+ },
+
+ initialize: function(options) {
+ this.handlerOptions = OpenLayers.Util.extend(
+ {}, this.defaultHandlerOptions
+ );
+ OpenLayers.Control.prototype.initialize.apply(
+ this, arguments
+ );
+ this.handler = new OpenLayers.Handler.Hover(
+ this,
+ {'pause': this.onPause, 'move': this.onMove},
+ this.handlerOptions
+ );
+ },
+
+ onPause: function(evt) {
+ var output = document.getElementById(this.key + 'Output');
+ var msg = 'pause ' + evt.xy;
+ output.value = output.value + msg + "\r\n";
+ },
+
+ onMove: function(evt) {
+ // if this control sent an Ajax request (e.g. GetFeatureInfo) when
+ // the mouse pauses the onMove callback could be used to abort that
+ // request.
+ }
+ });
+
+ 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 = {
+ 'long': new OpenLayers.Control.Hover({
+ handlerOptions: {
+ 'delay': 2000
+ }
+ }),
+ 'short': new OpenLayers.Control.Hover({
+ handlerOptions: {
+ 'delay': 100
+ }
+ }),
+ 'tolerant': new OpenLayers.Control.Hover({
+ handlerOptions: {
+ 'delay': 1000,
+ 'pixelTolerance': 6
+ }
+ }),
+ 'untolerant': new OpenLayers.Control.Hover({
+ handlerOptions: {
+ 'delay': 1000,
+ 'pixelTolerance': 1
+ }
+ }),
+ 'stoppropag': new OpenLayers.Control.Hover({
+ handlerOptions: {
+ 'stopMove': 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.addControl(new OpenLayers.Control.MousePosition());
+ 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">Hover Handler Example</h1>
+ <div id="west">
+
+ <div id="tags">
+ hover, onmouseover, handler, listener, event, events
+ </div>
+
+ <p id="shortdesc">
+ This example shows the use of the hover handler.
+ </p>
+
+ <div id="map" class="smallmap"></div>
+ <p>
+ The hover handler is to be used to emulate mouseovers on
+ objects on the map that aren't DOM elements. For example
+ one can use the hover hander to send WMS/GetFeatureInfo
+ requests as the user moves the mouse over the map.
+ </p>
+ <p>
+ The "delay" option specifies the number of milliseconds
+ before the event is considered a hover. Default is 500
+ milliseconds.
+ </p>
+ <p>
+ The "pixelTolerance" option specifies the maximum number
+ of pixels between mousemoves for an event to be
+ considered a hover. Default is null, which means no
+ pixel tolerance.
+ </p>
+ <p>
+ The "stopMove" option specifies whether other mousemove
+ listeners registered before the hover handler listener must
+ be notified on mousemoves or not. Default is false (meaning
+ that the other mousemove listeners will be notified on
+ mousemove).
+ </p>
+ </div>
+ <div id="east">
+ <table>
+ <caption>Controls with hover handlers (toggle on/off to clear output)</caption>
+ <tbody>
+ <tr>
+ <td>long delay (2 sec)</td>
+ <td><button id="longStatus" onclick="toggle('long')">off</button></td>
+ <td><textarea class="output" id="longOutput"></textarea></td>
+ </tr>
+ <tr>
+ <td>short delay (100 msec)</td>
+ <td><button id="shortStatus" onclick="toggle('short')">off</button></td>
+ <td><textarea class="output" id="shortOutput"></textarea></td>
+ </tr>
+ <tr>
+ <td>tolerant (6 pixels)</td>
+ <td><button id="tolerantStatus" onclick="toggle('tolerant')">off</button></td>
+ <td><textarea class="output" id="tolerantOutput"></textarea></td>
+ </tr>
+ <tr>
+ <td>untolerant (1 pixel)</td>
+ <td><button id="untolerantStatus" onclick="toggle('untolerant')">off</button></td>
+ <td><textarea class="output" id="untolerantOutput"></textarea></td>
+ </tr>
+ <tr>
+ <td>stop propagation</td>
+ <td><button id="stoppropagStatus" onclick="toggle('stoppropag')">off</button></td>
+ <td><textarea class="output" id="stoppropagOutput"></textarea></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </body>
+</html>