[OpenLayers-Commits] r4202 - trunk/openlayers/examples
commits at openlayers.org
commits at openlayers.org
Mon Sep 10 13:18:53 EDT 2007
Author: tschaub
Date: 2007-09-10 13:18:52 -0400 (Mon, 10 Sep 2007)
New Revision: 4202
Added:
trunk/openlayers/examples/accessible.html
Log:
putting up a basic non-slippy example
Added: trunk/openlayers/examples/accessible.html
===================================================================
--- trunk/openlayers/examples/accessible.html (rev 0)
+++ trunk/openlayers/examples/accessible.html 2007-09-10 17:18:52 UTC (rev 4202)
@@ -0,0 +1,124 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style type="text/css">
+ #map {
+ width: 512px;
+ height: 256px;
+ border: 1px solid #eee;
+ }
+ 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;
+ }
+ </style>
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+ var map = null;
+ function init(){
+ var options = {
+ controls: [new OpenLayers.Control.KeyboardDefaults()]
+ };
+ map = new OpenLayers.Map('map', options);
+ var wms = new OpenLayers.Layer.WMS(
+ "OpenLayers WMS",
+ "http://labs.metacarta.com/wms/vmap0?",
+ {layers: 'basic'}
+ );
+ map.addLayer(wms);
+ map.zoomToMaxExtent();
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h3>OpenLayers Example</h3>
+ <table>
+ <tbody>
+ <tr>
+ <td>
+ <a href="javascript: void map.zoomOut();"
+ accesskey="o">
+ zoom <em>o</em>ut
+ </a>
+ </td>
+ <td>
+ <a href="javascript: void map.pan(0, -map.getSize().h / 4);"
+ accesskey="n">
+ pan <em>n</em>orth
+ </a>
+ </td>
+ <td>
+ <a href="javascript: void map.zoomIn();"
+ accesskey="i">
+ zoom <em>i</em>n
+ </a>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <a href="javascript: void map.pan(-map.getSize().w / 4, 0);"
+ accesskey="w">
+ pan <em>w</em>est
+ </a>
+ </td>
+ <td id="map"></td>
+ <td>
+ <a href="javascript: void map.pan(map.getSize().w / 4, 0);"
+ accesskey="e">
+ pan <em>e</em>ast
+ </a>
+ </td>
+ </tr>
+ <tr>
+ <td> </td>
+ <td>
+ <a href="javascript: void map.pan(0, map.getSize().h / 4);"
+ accesskey="s">
+ pan <em>s</em>outh
+ </a>
+ </td>
+ <td> </td>
+ </tr>
+ </tbody>
+ </table>
+ <p>Navigate the map in one of three ways:
+ <ul>
+ <li>Click on the named links to zoom and pan</li>
+ <li>Use following keys to pan and zoom:
+ <ul>
+ <li>+ (zoom in)</li>
+ <li>- (zoom out)</li>
+ <li>up-arrow (pan north)</li>
+ <li>down-arrow (pan south)</li>
+ <li>left-arrow (pan east)</li>
+ <li>right-arrow (pan west)</li>
+ </ul>
+ </li>
+ <li>If access keys work for links in your browser, use:
+ <ul>
+ <li>i (zoom in)</li>
+ <li>o (zoom out)</li>
+ <li>n (pan north)</li>
+ <li>s (pan south)</li>
+ <li>e (pan east)</li>
+ <li>w (pan west)</li>
+ </ul>
+ </li>
+ </ul>
+ </p>
+ </body>
+</html>
More information about the Commits
mailing list