+ Demonstrate the KeyboardDefaults control as well as a control that + allows clicking on the map using the keyboard. + First focus the map (using tab key or mouse), then press the 'i' + key to activate the query control. You can then move the point + using arrow keys. Press 'RETURN' to get the coordinate. Press 'i' + again to deactivate the control. +
+ + + diff --git a/examples/click-keyboard.js b/examples/click-keyboard.js new file mode 100644 index 0000000000..328e0da768 --- /dev/null +++ b/examples/click-keyboard.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