Chapter 6. Theming

In this chapter we will cover:

  • Understanding how themes work using the img folder
  • Understanding how themes work using the theme folder
  • Delimiting tiles in a raster layer
  • Creating a new OpenLayers theme
  • Starting actions outside the controls

Introduction

It 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.

Tip

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.

Introduction

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.

Note

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:

  • HTML defines the content of a web page using paragraphs, titles, sections, and so on.
  • CSS defines the visual aspects of the HTML elements, that is, which text color a paragraph must use, the text size of a title, and so on.
  • Finally, JavaScript is a programming language processed by the browser that can be used to manipulate dynamically any aspect of the page. For example, we can add new HTML elements, change CSS, and check if the fields in a form are valid before sending it to the server.

Note

The Document Object Model (DOM) is a standard for accessing and manipulating HTML documents. We can think it decomposes an HTML document like a tree of elements and attributes.

See: http://www.w3schools.com/htmldom/default.asp

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.217.220