First let's talk about the navigation control. Using it is not a mystery. Simply create a control instance and add it to the map:

    var navigation = new OpenLayers.Control.Navigation();
    ….
    ….
    map.addControls([navigation, ...]);

The button created at the beginning makes use of the Dojo Toolkit, which allows us to easily convert it to a toggle button. In addition, we have added a listener function to check when the button's state changes between checked and unchecked. The navigationChanged function activates or deactivates the control depending on the checked value:

    function navigationChanged(checked) {
        if(checked) {
            navigation.activate();
        } else {
            navigation.deactivate();
        }
    }

Each control has an activate() and deactivate() method. They are defined in the base class, OpenLayers.Control, and all concrete controls inherit or override these methods.

The use of activate and deactivate is preferred over removing and adding the control from/to the map. This way, there is no need to either create or attach instances of the control. The control is simply in standby until we activate it again.

That is all related to the navigation control, let's take a look at how to add the navigation history control, because this is just a two-step process.

The OpenLayers.Control.NavigationHistory control is a bit more special. It contains stacks to store the previous and next visited places and, among others, also contains references to two buttons (instances of the OpenLayers.Control.Button control class), which allows us to go back and forward in the navigation history. The references to these buttons can be found in the previous and next properties.

By default, after adding a NavigationHistory control to the map, no button appears. It is our responsibility to show the previous and next buttons on the map. For this, and other similar purposes, OpenLayers offers us the OpenLayers.Control.Panel control class. It is a special kind of control that can contain or group together other controls. So, with all this in mind, we can now explain the way the Navigation History control is added to the map.

First we need to create the OpenLayers.Control.NavigationHistory instance and add it to the map. Second, we need to add a panel to show the two buttons and add the two buttons:

    var history = new OpenLayers.Control.NavigationHistory();
    var panel = new OpenLayers.Control.Panel();
    panel.addControls([history.next, history.previous]);

Finally, the panel itself must be added to the map as a new control:

    map.addControls([navigation, history, panel]);

As you can see, we have added the navigation, the navigation history, and the panel with the buttons as map controls, simply because all three are controls.

In Chapter 6, Theming, we will see how we can change the icons used by this control.