Add new ZoomPanel and PanPanel, a step towards a more easily customizable look for OpenLayers. Work on this ticket was done by a slew of contributors, and reviews as well. Thanks especially to tschaub for the ie6 trick and concomittant non-alpha images. (Closes #1400).

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7950 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
2008-09-04 19:21:59 +00:00
parent d2ac6cacfd
commit 5084ea6a91
14 changed files with 320 additions and 5 deletions

View File

@@ -0,0 +1,49 @@
<html>
<head>
<title>Pan and Zoom Panels</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="../lib/OpenLayers.js"></script>
<script>
var map;
var lon = 5;
var lat = 40;
var zoom = 5;
function init(){
map = new OpenLayers.Map("map", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
]
});
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
map.addLayers([wms]);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
</script>
</head>
<body onload='init();'>
<h1 id="title">Pan and Zoom Panels</h1>
<div id="tags"></div>
<p id="shortdesc">Customizable pan and zoom panels</p>
</p>
<div id="map" class="smallmap"></div>
<p id="docs">
The pan and zoom panels allow you to use CSS styling to change the
look and feel of the panels, including changing their position
and their icons without needing to change any code.
</p>
</body>
</html>