Pan and Zoom Panels - 2.12 @mgifford

http://openlayers.org/dev/examples/pan-zoom-panels.html

by Mike Gifford

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.js"></script>
    <h1 id="title">Pan and Zoom Panels - 2.12 @mgifford</h1>
    <div id="tags">
        panning, zooming, panel, CSS, style
    </div>
    <p id="shortdesc">
    Customizable pan and zoom panels
    </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>  
    
  <br />

  <p><a href="http://openlayers.org/dev/examples/pan-zoom-panels.html">Original OpenLayers
  Example</a>.</p>

CSS

.olControlPanPanel {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
 .olControlPanPanel .olControlPanNorthItemInactive {
   left: 50%;
   margin-left: -9px;
   top: 0;
 }
 .olControlPanPanel .olControlPanSouthItemInactive {
   left: 50%;
   margin-left: -9px;
   top: auto;
   bottom: 0;
 }
 .olControlPanPanel .olControlPanWestItemInactive {
   top: 50%;
   margin-top: -9px;
   left: 0;
 }
 .olControlPanPanel .olControlPanEastItemInactive {
   top: 50%;
   margin-top: -9px;
   left: auto;
   right: 0;
 }
.olControlZoomPanel {
  left: auto;
  right: 23px;
  top: 8px;
}

JavaScript

(function($) {

    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://vmap0.tiles.osgeo.org/wms/vmap0', {
            layers: 'basic'
        });
        map.addLayers([wms]);

        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    }

    init();
})(jQuery);