By default, all the controls are placed on the map. This way, controls such as the PanPanel, EditingToolbar, or MousePosition are rendered on top of the map and over any layer. This is the default behavior, but OpenLayers is flexible enough to allow us to put controls outside the map:
In this recipe we are going to create a map where the navigation toolbar and the mouse position controls are placed outside and above the map.
- Create an HTML file and add the OpenLayers dependencies. Add the following CSS code required to redefine some aspects of the controls we are going to use:
<style> .olControlNavToolbar { top: 0px; left: 0px; float: left; } .olControlNavToolbar div { float: left; } </style> - Now, add the HTML code to place the two controls above the map:
<table> <tr> <td> Navigation: <div id="navigation" class="olControlNavToolbar"></div> </td> <td> Position: <div id="mouseposition" style="font-size: smaller;"></div> </td> </tr> </table> <div id="ch05_control_outside" style="width: 100%; height: 90%;"></div> - Create the map instance and add a base layer:
<script type="text/javascript"> // Create map var map = new OpenLayers.Map("ch05_control_outside"); var osm = new OpenLayers.Layer.OSM(); map.addLayer(osm); map.setCenter(new OpenLayers.LonLat(0, 0), 3); - Now, add the mouse position and navigation toolbar controls:
var mousePosition = new OpenLayers.Control.MousePosition({ div: document.getElementById('mouseposition') }); map.addControl(mousePosition); var navToolbarControl = new OpenLayers.Control.NavToolbar({ div: document.getElementById("navigation") }); map.addControl(navToolbarControl); </script>
The previous code seems pretty simple. We have added two controls to our map: an OpenLayers.Control.MousePosition control, which shows the current coordinates of the mouse on the map, and OpenLayers.Control.NavToolbar.
The
OpenLayers.Control.NavToolbar control is nothing more than a panel control that contains other controls: an OpenLayers.Control.Navigation control, the hand icon (to move the map), and an OpenLayers.Control.Zoo
mBox control, the magnifying glass icon (to zoom on a given box).
So, where is the secret in the recipe for placing the controls outside the map? The answer is in the construction of each control.
The base class OpenLayers.Control has a div property that points to the div element that will be used to hold the control. By default, no div element is specified in the constructor, so the control creates a new one to be used.
If you specify a div element in the control instantiation, then it is used as the place where the control will be rendered.
For the MousePosition control, we have used the following code:
Position: <div id="mouseposition" style="font-size: smaller;"></div>
…
var mousePosition = new OpenLayers.Control.MousePosition({
div: document.getElementById('mouseposition')
});This means we are placing the control on the previously created div element, identified by the mouseposition string.
For the navigation toolbar, it differs a bit:
Navigation: <div id="navigation" class="olControlNavToolbar"></div>
...
var navToolbarControl = new OpenLayers.Control.NavToolbar({
div: document.getElementById("navigation")
});In this case we have set the CSS class olControlNavToolbar, defined by OpenLayers. Why?
Note
When we do not specify the div property, the control creates one and applies some default CSS classes that set the control icon, borders, background color, and so on. Remove the div property from the navigation toolbar and see the results. A div element will be created and placed on the map with some classes, such as olControlNavToolbar, attached to it and will contain some other elements representing the buttons for the pan and zoom actions.
When we specify the div property to be used, no style is automatically created and, because of this, controls can disappear or not be rendered nicely if we do not specify some CSS.
Once this is clear, we can say we have not used the CSS class with the mouse position control because it only contains some text. Well, we have only set the font size.
The navigation control is a more complex control, it contains two other controls and we need to tune p its style a bit.
In the CSS code that we have set at the beginning of the recipe, we are redefining the place of the navigation toolbar within the div and indicating that we want the contained elements, buttons, and flows in the left direction:
<style>
.olControlNavToolbar {
top: 0px;
left: 0px;
float: left;
}
.olControlNavToolbar div {
float: left;
}
</style>- Chapter 6, Theming