Controls

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:

            map = new OpenLayers.Map('map', {
                controls : [new OpenLayers.Control.PanZoomBar()],
                scales: [2000000,1000000,500000,200000,100000,50000,20000,10000,5000,2000,1000,500],
                maxExtent: new OpenLayers.Bounds(-905000,-1230000,-400000,-900000),
                units:"m",
                projection: "epsg:102067",
                maxResolution: "auto"
            });

You can add the controls also later in the code:

            var scale = new OpenLayers.Control.Scale();
            map.addControl(scale);

            map.addControl(new OpenLayers.Control.MousePosition());

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

            map.addControl(new OpenLayers.Control.ScaleLine({div:document.getElementById("scaleline")}));

    <div id="scaleline" style="background: cyan"></div>

Changing behaviour of some control

Note

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:

Original

/**
 * Method: updateScale
 */
updateScale: function() {
    var scale = this.map.getScale();
    if (!scale) {
        return;
    }

    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:

        var updateScale = function() {

            var scale = this.map.getScale();
            if (!scale) {
                return;
            }

            if (scale >= 9500 && scale <= 950000) {
                scale = Math.round(scale / 1000) + " 000";
            } else if (scale >= 950000) {
                scale = Math.round(scale / 1000000) + " 000 000";
            } else {
                scale = Math.round(scale);
            }    
            
            this.element.innerHTML = "1 : "+scale;
        };
            scale.updateScale = updateScale;