As we have explained in the chapter's introduction, there are some OpenLayers controls strongly based on CSS classes to be the theme.
In this group, we can find the PanPanel control, a small control formed by a set of four buttons that allows the user to pan the map in four directions:
- Create an HTML page and add the OpenLayers ibrary dependencies:
<script type="text/javascript" src="./js/OpenLayers-2.11/lib/OpenLayers.js"></script>
- After this, we need to include the CSS file with the theme to be used. Here we are using the default theme:
<link rel="stylesheet" href="./js/OpenLayers-2.11/theme/default/style.css" type="text/css">
- Within the
bodyelement of the document, add thedivelement to hold the map:<div id="ch06_theming_theme" style="width: 100%; height: 90%;"></div>
- Within a
scriptelement, add the code to create the map with a base layer:var map = new OpenLayers.Map("ch06_theming_img "); var osm = new OpenLayers.Layer.OSM(); map.addLayer(osm); map.setCenter(new OpenLayers.LonLat(0, 0), 2); - Finally, create an
OpenLayers.Control.PanPanelinstance and add it to the map:var panControl = new OpenLayers.Control.PanPanel(); map.addControl(panControl);
When the OpenLayers.Control.PanPanel instance is added to the map, what really happens is a set of new HTML elements are added to the DOM page structure:
<div id="OpenLayers.Control.PanPanel_71" style="position: absolute; z-index: 1006; " class="olControlPanPanel olControlNoSelect" unselectable="on">
<div class="olControlPanNorthItemInactive"></div>
<div class="olControlPanSouthItemInactive"></div>
<div class="olControlPanEastItemInactive"></div>
<div class="olControlPanWestItemInactive"></div>
</div>There is one main element for the control that contains other elements representing the four buttons.
The main HTML element has an attached CSS class with the name olControlPanPanel. This class name is automatically created by OpenLayers and follows this convention: olControl plus the control name.
All the CSS classes used in the previous HTML code can be found in the source code in the theme/default/style.css theme file.
Looking at the CSS classes used by the control, we can understand a bit better how it works.
First, we change the position of the control by modifying the properties of the CSS class:
.olControlPanPanel {
top: 10px;
left: 5px;
} Next, CSS code sets the image to be used and the size of the buttons:
.olControlPanPanel div {
background-image: url(img/pan-panel.png);
height: 18px;
width: 18px;
cursor: pointer;
position: absolute;
}We can see how the image sprite is taken from the file theme/defaul
t/img/pan-panel.png:
Next, each button defines the required properties to extract the piece of imge to be used as the button:
.olControlPanPanel .olControlPanSouthItemInactive {
top: 36px;
left: 9px;
background-position: 18px 0;
}We can see how with little CSS knowledge we can modify almost any desired thing of the control.