OpenLayers Accessible Example

http://openlayers.org/dev/examples/accessible.html

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
  <h1 id="title">Accessible Example</h1>

  <div id="tags">
    keyboard, pan, panning, zoom, zooming, accesskey
  </div><a class="accesskey"
        href=""
        accesskey="1"
        onclick="document.getElementById('map').focus(); return false;">Go to map</a>

  <p id="shortdesc">Demonstrate the KeyboardDefaults control and how to use links with
  Access Keys to navigate the map with the keyboard.</p><a class="zoom"
        href="javascript:%20void%20map.zoomIn();"
        accesskey="i">zoom <em>i</em>n</a> <a class="zoom"
        href="javascript:%20void%20map.zoomOut();"
        accesskey="o">zoom <em>o</em>ut</a>

  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>

        <td><a href="javascript:%20void%20map.pan(0,%20-map.getSize().h%20/%204);"
           accesskey="n">pan <em>n</em>orth</a></td>
      </tr>

      <tr>
        <td><a href="javascript:%20void%20map.pan(-map.getSize().w%20/%204,%200);"
           accesskey="w">pan <em>w</em>est</a></td>

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

        <td><a href="javascript:%20void%20map.pan(map.getSize().w%20/%204,%200);"
           accesskey="e">pan <em>e</em>ast</a></td>
      </tr>

      <tr>
        <td>&nbsp;</td>

        <td><a href="javascript:%20void%20map.pan(0,%20map.getSize().h%20/%204);"
           accesskey="s">pan <em>s</em>outh</a></td>

        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>

  <div id="docs">
    <p>Navigate the map in one of three ways:</p>

    <ol>
      <li>Use Access Key "1" (alt + 1) to focus the map element, and use following keys
      to pan and zoom:

        <ul>
          <li>+ (zoom...

CSS

html,
body,
#map {
  height: 300px;
  width: 100%;
}
table {
  border: 1 px solid white;
  padding: 0;
}
td {  text-align: center }
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 }

Feedback | Follow
283

JavaScript

(function($) {

    var map = null;

    function init() {
        var options = {
            controls: [
                new OpenLayers.Control.KeyboardDefaults({
                observeElement: 'map'
            })
                ]
        };
        map = new OpenLayers.Map('map', options);
        var wms = new OpenLayers.Layer.OSM();
        map.addLayer(wms);
        map.zoomToMaxExtent();
    }

    init();
})(jQuery);