Understanding how themes work using the theme folder

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:

How to do it...

1. Create an HTML page and add the OpenLayers ibrary dependencies:

   <script type="text/javascript" src="./js/OpenLayers-2.11/lib/OpenLayers.js"></script> 

2. 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">

3. Within the body element of the document, add the div element to hold the map:

   <div id="ch06_theming_theme" style="width: 100%; height: 90%;"></div>

4. Within a script element, add the code to create the map with a base layer:

       var map = new OpenLayers.Map("ch06_theming_img...