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.

Map is usually initialized with some predefined controls, have a look at lib/OpenLayers/Map.js file

 * Property: controls
 * {Array(<OpenLayers.Control>)} List of controls associated with the map.
 * If not provided in the map options at construction, the map will
 *     be given the following controls by default:
 *  - <OpenLayers.Control.Navigation>
 *  - <OpenLayers.Control.PanZoom>
 *  - <OpenLayers.Control.ArgParser>
 *  - <OpenLayers.Control.Attribution>
controls: null,

If you want to initialize map with different controls, you have to do it “by hand” (see your 03_controls.html example:

You can add the controls also later in the code:

It has been said, controls can be assigned to specified div

Changing behaviour of some control


Same applies also for Layer and other objects

For example, we want to change how scale information is displayed. In lib/OpenLayers/Control/Scale.js, we can find method updateScale(), let’s rewrite it like this:


 * Method: updateScale
updateScale: function() {
    var scale =;
    if (!scale) {

    if (scale >= 9500 && scale <= 950000) {
        scale = Math.round(scale / 1000) + "K";
    } else if (scale >= 950000) {
        scale = Math.round(scale / 1000000) + "M";
    } else {
        scale = Math.round(scale);

    this.element.innerHTML = OpenLayers.i18n("scale", {'scaleDenom':scale});

In our 03_controls.html example:

Main Menu

Table Of Contents

Previous topic

Special types of vector layers

Next topic

Editing vectors

This Page