In this chapter we will cover:
img
foldertheme
folderIt is worth mentioning that in software applications, the first impressions are the most important things, and they are given by two factors: the look and feel.
This chapter is all oriented to show how we can improve the look and feel of our web mapping application by theming OpenLayers.
As many other web applications, the look and feel of the OpenLayers library is controlled using images and CSS classes, which define the position, dimensions, and visual aspects of any OpenLayers component.
At this moment, with the Version 2.11, we can find the img
and theme
folders within the bundle distribution, and both are used to control the look of the OpenLayers applications.
Remember to place these folders in your project when using OpenLayers as mentioned in the Different ways to include OpenLayers recipe in Chapter 1, Web Mapping Basics.
The theme
folder contains CSS files, as well as some images used within the CSS, while the img
folder contains only images, used by some controls in a more hardcoded (and not recommended) way.
We can say, the use of the
theme
folder with CSS styles is the preferred way to implement controls, while the use of the img
folder remains for those controls that are not updated to work with CSS styles.
Becoming a great web designer is out of the scope of this book, but it is true that if we want to tune up the OpenLayers appearance a bit, we need to have some knowledge of HTML and how CSS works.
We can find a description of the CSS standard at http://en.wikipedia.org/wiki/Cascading_Style_Sheets but we can find tons of great tutorials looking on the Net, such as http://www.csstutorial.net.
The browsers work with three main technologies: HTML, CSS, and JavaScript. Summarized in really short sentences, we can say:
OpenLayers belongs to the third category. It is a JavaScript library that allows us to create web mapping applications using concepts such as maps, layers, or features, but abstracting us from the HTML DOM elements and the CSS aspects required to render them.
When we create an OpenLayers component, such as a map, a layer, or a control instance, it also creates the required HTML elements to render them and puts them at the right place of the DOM structure of our HTML page.
The goal of this chapter is to show how to theme the most important OpenLayers components. So, using many of the next recipes, we will be able to create a fresh web-mapping application with a customized look.
3.137.217.220