3 <title>Pan and Zoom Panels</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
7 -- Special stylesheet inclusion for ie6, which doesn't handle the alpha
8 -- channel of images correctly. The special ie6 stylesheet will only
9 -- be included if the browser running is ie6. For now, the only thing it
10 -- does is load alternative, non-alpha pngs for the zoom/pan panels.
14 <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
17 <link rel="stylesheet" href="style.css" type="text/css" />
18 <script type="text/javascript" src="../lib/OpenLayers.js"></script>
25 map = new OpenLayers.Map("map", {
27 new OpenLayers.Control.Navigation(),
28 new OpenLayers.Control.PanPanel(),
29 new OpenLayers.Control.ZoomPanel()
33 var wms = new OpenLayers.Layer.WMS(
35 "http://labs.metacarta.com/wms/vmap0",
40 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
44 <body onload='init();'>
45 <h1 id="title">Pan and Zoom Panels</h1>
47 <p id="shortdesc">Customizable pan and zoom panels</p>
49 <div id="map" class="smallmap"></div>
51 The pan and zoom panels allow you to use CSS styling to change the
52 look and feel of the panels, including changing their position
53 and their icons without needing to change any code.