Map Controls Example

http://openlayers.org/dev/examples/controls.html Note: Navigation doesn't show up.

HTML

<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://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
        <h1 id="title">Map Controls Example</h1>

        <div id="tags">
            control, basic
        </div>

        <p id="shortdesc">
            Attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window.
        </p>

        <div id="map" class="smallmap"></div>
        <a href="#" id="permalink">Permalink</a>

        <div id="docs"></div>

  <br />
  <p>Note: Navigation doesn't show up. <a href="http://openlayers.org/dev/examples/controls.html">Original
  OpenLayers Example</a>.</p>

CSS

/* round corners of layer switcher, and make it transparent */
        .olControlLayerSwitcher .layersDiv {
            border-radius: 10px 0 0 10px;
            opacity: 0.75;
            filter: alpha(opacity=75);
        }

JavaScript

(function($) {

    var map;

    function init() {
        map = new OpenLayers.Map('map', {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher({
                'ascending': false
            }),
                new OpenLayers.Control.Permalink(),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.Permalink('permalink'),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.OverviewMap(),
                new OpenLayers.Control.KeyboardDefaults()
                ],
            numZoomLevels: 6

        });

        var ol_wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {
            layers: 'basic'
        });

        var gwc = new OpenLayers.Layer.WMS('Global Imagery', 'http://maps.opengeo.org/geowebcache/service/wms', {
            layers: 'bluemarble'
        }, {
            tileOrigin: new OpenLayers.LonLat(-180, -90)
        });
        var dm_wms = new OpenLayers.Layer.WMS('DM Solutions Demo', 'http://www2.dmsolutions.ca/cgi-bin/mswms_gmap', {
            layers: 'bathymetry,land_fn,park,drain_fn,drainage,' + 'prov_bound,fedlimit,rail,road,popplace',
            transparent: 'true',
            format: 'image/png'
        }, {
            visibility: true
        });

        map.addLayers([ol_wms, gwc, dm_wms]);

        if (!map.getCenter()) {
            map.zoomToMaxExtent();
        }
    }

    init();
})(jQuery);