OpenLayers. Control

Controls affect the display or behavior of the map.  They allow everything from panning and zooming to displaying a scale indicator.  Controls by default are added to the map they are contained within however it is possible to add a control to an external div by passing the div in the options parameter.

Example

The following example shows how to add many of the common controls to a map.

var map = new OpenLayers.Map('map', { controls: [] });

map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseToolbar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());

The next code fragment is a quick example of how to intercept shift-mouse click to display the extent of the bounding box dragged out by the user.  Usually controls are not created in exactly this manner.  See the source for a more complete example:

var control = new OpenLayers.Control();
OpenLayers.Util.extend(control, {
    draw: function () {
        // this Handler.Box will intercept the shift-mousedown
        // before Control.MouseDefault gets to see it
        this.box = new OpenLayers.Handler.Box( control,
            {"done": this.notice},
            {keyMask: OpenLayers.Handler.MOD_SHIFT});
        this.box.activate();
    },

    notice: function (bounds) {
        OpenLayers.Console.userError(bounds);
    }
});
map.addControl(control);