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
body
element of the document, add thediv
element to hold the map:<div id="ch06_theming_theme" style="width: 100%; height: 90%;"></div>
Within a
script
element, add the code to create the map with a base layer:var map = new OpenLayers.Map("ch06_theming_img...