Controls
********
`Controls <http://dev.openlayers.org/releases/OpenLayers-2.9.1/doc/apidocs/files/OpenLayers/Control-js.html>`_ 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
:file:`lib/OpenLayers/Map.js` file

.. code-block:: javascript
    
    [...]
    /**
     * 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 <../_static/03_controls.html>`_ example:

.. literalinclude:: ../_static/03_controls.html
    :linenos:
    :language: javascript
    :lines: 9-16

You can add the controls also later in the code:


.. literalinclude:: ../_static/03_controls.html
    :linenos:
    :language: javascript
    :lines: 19-23

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

.. literalinclude:: ../_static/03_controls.html
    :linenos:
    :language: javascript
    :lines: 25,77,79

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
:file:`lib/OpenLayers/Control/Scale.js`, we can find method
:meth:`updateScale`, let's rewrite it like this:

Original

.. code-block:: javascript

    /**
     * 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:

.. literalinclude:: ../_static/03_controls.html
    :linenos:
    :language: javascript
    :lines: 55-72, 30