diff options
Diffstat (limited to 'misc/openlayers/examples/accessible-click-control.js')
| -rw-r--r-- | misc/openlayers/examples/accessible-click-control.js | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/misc/openlayers/examples/accessible-click-control.js b/misc/openlayers/examples/accessible-click-control.js new file mode 100644 index 0000000..328e0da --- /dev/null +++ b/misc/openlayers/examples/accessible-click-control.js @@ -0,0 +1,199 @@ +var map, navigationControl, queryControl; + +function init(){ + map = new OpenLayers.Map('map', {controls: []}); + var layer = new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} + ); + map.addLayers([layer]); + + navigationControl = new OpenLayers.Control.KeyboardDefaults({ + observeElement: 'map' + }); + map.addControl(navigationControl); + + queryControl = new OpenLayers.Control.KeyboardClick({ + observeElement: 'map' + }); + map.addControl(queryControl); + + map.zoomToMaxExtent(); +} + +/** + * Class: OpenLayers.Control.KeyboardClick + * + * A custom control that (a) adds a vector point that can be moved using the + * arrow keys of the keyboard, and (b) displays a browser alert window when the + * RETURN key is pressed. The control can be activated/deactivated using the + * "i" key. When activated the control deactivates any KeyboardDefaults control + * in the map so that the map is not moved when the arrow keys are pressed. + * + * This control relies on the OpenLayers.Handler.KeyboardPoint custom handler. + */ +OpenLayers.Control.KeyboardClick = OpenLayers.Class(OpenLayers.Control, { + initialize: function(options) { + OpenLayers.Control.prototype.initialize.apply(this, [options]); + var observeElement = this.observeElement || document; + this.handler = new OpenLayers.Handler.KeyboardPoint(this, { + done: this.onClick, + cancel: this.deactivate + }, { + observeElement: observeElement + }); + OpenLayers.Event.observe( + observeElement, + "keydown", + OpenLayers.Function.bindAsEventListener( + function(evt) { + if (evt.keyCode == 73) { // "i" + if (this.active) { + this.deactivate(); + } else { + this.activate(); + } + } + }, + this + ) + ); + }, + + onClick: function(geometry) { + alert("You clicked near " + geometry.x + " N, " + + geometry.y + " E"); + }, + + activate: function() { + if(!OpenLayers.Control.prototype.activate.apply(this, arguments)) { + return false; + } + // deactivate any KeyboardDefaults control + var keyboardDefaults = this.map.getControlsByClass( + 'OpenLayers.Control.KeyboardDefaults')[0]; + if (keyboardDefaults) { + keyboardDefaults.deactivate(); + } + return true; + }, + + deactivate: function() { + if(!OpenLayers.Control.prototype.deactivate.apply(this, arguments)) { + return false; + } + // reactivate any KeyboardDefaults control + var keyboardDefaults = this.map.getControlsByClass( + 'OpenLayers.Control.KeyboardDefaults')[0]; + if (keyboardDefaults) { + keyboardDefaults.activate(); + } + return true; + } +}); + +/** + * Class: OpenLayers.Handler.KeyboardPoint + * + * A custom handler that displays a vector point that can be moved + * using the arrow keys of the keyboard. + */ +OpenLayers.Handler.KeyboardPoint = OpenLayers.Class(OpenLayers.Handler, { + + KEY_EVENTS: ["keydown"], + + + initialize: function(control, callbacks, options) { + OpenLayers.Handler.prototype.initialize.apply(this, arguments); + // cache the bound event listener method so it can be unobserved later + this.eventListener = OpenLayers.Function.bindAsEventListener( + this.handleKeyEvent, this + ); + }, + + activate: function() { + if(!OpenLayers.Handler.prototype.activate.apply(this, arguments)) { + return false; + } + this.layer = new OpenLayers.Layer.Vector(this.CLASS_NAME); + this.map.addLayer(this.layer); + this.observeElement = this.observeElement || document; + for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) { + OpenLayers.Event.observe( + this.observeElement, this.KEY_EVENTS[i], this.eventListener); + } + if(!this.point) { + this.createFeature(); + } + return true; + }, + + deactivate: function() { + if (!OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) { + return false; + } + for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) { + OpenLayers.Event.stopObserving( + this.observeElement, this.KEY_EVENTS[i], this.eventListener); + } + this.map.removeLayer(this.layer); + this.destroyFeature(); + return true; + }, + + handleKeyEvent: function (evt) { + switch(evt.keyCode) { + case OpenLayers.Event.KEY_LEFT: + this.modifyFeature(-3, 0); + break; + case OpenLayers.Event.KEY_RIGHT: + this.modifyFeature(3, 0); + break; + case OpenLayers.Event.KEY_UP: + this.modifyFeature(0, 3); + break; + case OpenLayers.Event.KEY_DOWN: + this.modifyFeature(0, -3); + break; + case OpenLayers.Event.KEY_RETURN: + this.callback('done', [this.point.geometry.clone()]); + break; + case OpenLayers.Event.KEY_ESC: + this.callback('cancel'); + break; + } + }, + + modifyFeature: function(lon, lat) { + if(!this.point) { + this.createFeature(); + } + var resolution = this.map.getResolution(); + this.point.geometry.x = this.point.geometry.x + lon * resolution; + this.point.geometry.y = this.point.geometry.y + lat * resolution; + this.callback("modify", [this.point.geometry, this.point, false]); + this.point.geometry.clearBounds(); + this.drawFeature(); + }, + + createFeature: function() { + var center = this.map.getCenter(); + var geometry = new OpenLayers.Geometry.Point( + center.lon, center.lat + ); + this.point = new OpenLayers.Feature.Vector(geometry); + this.callback("create", [this.point.geometry, this.point]); + this.point.geometry.clearBounds(); + this.layer.addFeatures([this.point], {silent: true}); + }, + + destroyFeature: function() { + this.layer.destroyFeatures([this.point]); + this.point = null; + }, + + drawFeature: function() { + this.layer.drawFeature(this.point, this.style); + } +}); |