ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

putting up a basic non-slippy example

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@4202 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2007-09-10 17:18:52 +00:00
parent ed7daa46fc
commit b76edb8833
1 changed files with 124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
examples/accessible.html Normal file
View File

@@ -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>&nbsp;</td>
<td>
<a href="javascript: void map.pan(0, map.getSize().h / 4);"
accesskey="s">
pan <em>s</em>outh
</a>
</td>
<td>&nbsp;</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>