OpenLayers Cookbook: The best method to learn the many ways OpenLayers can be used to render data on maps is to dive straight into these recipes. With a mix of basic and advanced techniques, it's ideal for JavaScript novices and experts alike.

This chapter is all about working with raster layers. We have tried to summarize, with a set of recipes, the most common and important use cases you can find day-to-day when working with OpenLayers.

Imagery is one of the most important kinds of data to work with in a GIS system.

OpenLayers offers several classes to integrate with different imagery providers, from proprietary providers such as Google Maps and Bing Maps, to Open Source ones such as OpenStreetMap or even any WMS service provider.

The base class for any layer type is the OpenLayers.Layer class, which offers a set of common properties and defines the common behavior for any other classes.

In addition, many layers inherit from the OpenLayers.Layer.Grid class, which divides the layer into zoom levels. This way each zoom level covers the same area but uses a greater set of tiles. For example, at level zero a grid with one tile covers the whole world, at level one a grid with four tiles covers the whole world, and so on...

Google Maps is probably the most known web map application around the world. Their imageries, in the way of tiled layers, are well known by people; they are accustomed to their layer style and because of this you may be interested in using them in your own web mapping project.

OpenLayers counts with the OpenLayers.Layer.Google class, which is in fact a wrapper code around the Google Maps API, that allows us to use the Google Maps tiles in a homogeneous way within the OpenLayers API.

Bing Maps, previously known as Virtual Earth, is the mapping service provided by Microsoft.

In the same way as Google Maps, OpenLayers offers an OpenLayers.Layer.Bing class, which brings us the possibility to add Bing imagery in our projects.

Web Map Service (WMS),is a standard developed by the Open Geospatial Consortium (OGC) implemented by many geospatial servers, among which we can find the free and open source projects GeoServer (http://geoserver.org) and MapServer (http://mapserver.org). More information on WMS can be found at http://en.wikipedia.org/wiki/Web_Map_Service.

As a very basic summary, you can understand a WMS server as a normal HTTP web server that accepts request with some GIS-related parameters (such as projection, bounding box, and so on) and returns a map similar to the following screenshot:

There might be situations where you do not want your map ends at -180 or +180 longitude degrees as you are working in that area and need a continuous map. For example, imagine a map where on the left you can see the end of Russia and at the right Alaska, as shown in the following screenshot:

This property is a common attribute from base class OpenLayers.Layer and is called the wrapDateLine.

The panning and zoom effects are very important actions related to the user navigation experience.

In Chapter 1, Web Mapping Basics, the recipe Moving around the map view shows how you can control and create the way the map can be panned.

In the same way you can control the transition effect between two zoom levels on the layers.

The OpenLayers.Layer class has a transitionEffect property, which determines the effect applied to the layer when the zoom level is changed. For the moment only two values are allowed: null and resize.

The null value means no transition effect will be applied, because when you change the zoom level you probably see how the layer disappears until the tiles at the new zoom level are loaded.

With the resize value when we zoom into a level, the current tiles are resized, adapting to the new zoom, until the tiles at the new level are loaded in background. This way images are always visible and we avoid the ugly effect of seeing a blank map for...

When you are working with many layers—both raster and vector layers—you will probably find situations where a layer that is on top of another layer hides the one below it. This is more common when working with raster WMS layers without the transparent property set to true or tiled layers such as, OpenStreetMaps, Google, and Bing. The layer opacity is set to 50% in the following screenshot:

The OpenLayers.Layer base class has an opacity property, implemented by concrete subclasses, that allows us to modify the opacity of the layers. It is a float value that can range from 0.0 (completely transparent) to 1.0 (completely opaque).

Web Map Service (WMS) is a protocol to serve georeferenced map images.

The basic idea is that, given a bounding box and some other parameters, such as a layer name, the client makes an HTTP request to the WMS server, which computes and returns an image with all the data for the specified layers and within the specified bounding box.

In OpenLayers, when you add a WMS layer to your map, the OpenLayers.Layer.WMS instance is provided with some parameters, such as resolutions and tile size. The WMS server computes the right number of tiles for each zoom level and divides the layer in that number of tiles.

This way, when you add a WMS layer to the map, there is not only one request to the server, but one by each tile that forms the current zoom level.

Map navigation is an important factor to take into account to make the user experience better.

When we pan the map, many times we get to see blank areas (meaning that the content is loading) and after a few seconds the image appears.

On gridded layers and WMS layers working in single tile mode, we can improve this at the cost of increasing the requests number or increasing the computation time at the server side.

The idea behind improving map navigation is simple; load the tiles outside the map view so that they are loaded before the user pans the map view in that direction.

This recipe shows you how to preload content outside the map view, both for gridded layers and also for WMS layers...

Sometimes a tiled layer, such as Google Maps, OpenStreetMap, or WMS, is not what you need. It is quite possible that you have a georeferenced image, knowing its projection and bounding box, and want to render it on the map.

In these cases, OpenLayers offers the OpenLayers.Layer.Image class that allows us to create a layer based on a simple image. A georeferenced image is shown in the following screenshot:

The OpenLayers.Layer.Grid class is a special kind of layer, which divides the layer in different zoom levels composed of a grid of tiles.

The OpenLayers.Layer.WMS class is a subclass of the preceding one and, in addition to working in single tile mode, it can work in tiled mode as well.

Of course, controlling the size of the tiles of the WMS request can affect the performance. By default, the tile size is 256 x 256 pixels, but we can set this to any desired value. Bigger tile sizes means less request to the server but more computation time to generate a bigger image. On the contrary, smaller tile sizes means more server requests and less time to compute smaller images.