b76edb8833
git-svn-id: http://svn.openlayers.org/trunk/openlayers@4202 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
125 lines
4.2 KiB
HTML
125 lines
4.2 KiB
HTML
<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>
|