Custom Control Example

http://openlayers.org/dev/examples/custom-control.html

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://demo.opengeo.org/geoserver/wfs?service=WFS&amp;amp;version=1.0.0&amp;amp;request=GetFeature&amp;amp;typename=topp:states&amp;amp;outputFormat=json&amp;amp;format_options=callback:loadFeatures"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
        <h1 id="title">Custom Control Example</h1>

        <div id="tags">
            control, panel, rectangle, light
        </div>

        <p id="shortdesc">
            Demonstrate the addition of a rectangle to the OpenLayers window.
        </p>
      
        <div id="map" class="" style="height:600px;width:515px></div>

        <div id="docs">
            <p>The control allows you to draw a rectangle, that reports its coordinates
            after creation. Hold down the shift key on your keyboard and draw a 
            rectangle with the mouse.</p>
        </div>

  <br />
  <p><a href="http://openlayers.org/dev/examples/custom-control.html">Original
  OpenLayers Example</a>.</p>

JavaScript

var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
var extent = new OpenLayers.Bounds(-107, 25, -93, 37);

function init() {
    var options = {
        restrictedExtent: extent
    };
    map = new OpenLayers.Map('map', options);
    layer = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {
        layers: 'basic'
    });

    map.addLayer(layer);
    map.zoomToExtent(extent);
    //map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}


init();