Skip to content

Commit

Permalink
add an example for an accessible click control implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@elemoine
elemoine committed Feb 28, 2012
1 parent acf6a8a commit eb700d9
Show file tree
Hide file tree
Showing 2 changed files with 268 additions and 0 deletions.
69 changes: 69 additions & 0 deletions examples/click-keyboard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!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>Accessible Custom Click Control</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">
<style type="text/css">
a {
text-decoration: none;
font-size: 1.2em;
}
a em {
font-style: normal;
font-weight: normal;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.api {
font-size:1em;
text-decoration:underline;
}
a.accesskey {
color: white;
}
a.accesskey:focus {
color: #436976;
}
a.zoom {
padding-right: 20px;
}
</style>
<script src="../lib/Firebug/firebug.js"></script>
<script src="../lib/OpenLayers.js"></script>
<script src="click-keyboard.js"></script>
</head>
<body onload="init()">
<h1 id="title">An accessible click control implementation</h1>

<div id="tags">
click, control, accessibility
</div>

<a class="accesskey"
href=""
accesskey="1"
onclick="document.getElementById('map').focus();return false;">
Jump to map
</a>

<div id="map" class="smallmap" tabindex="0"></div>

<p id="desc">
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.
</p>

</body>
</html>
199 changes: 199 additions & 0 deletions examples/click-keyboard.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
});

0 comments on commit eb700d9

Please sign in to comment.