In the previous section, we saw how easy it is to have a basic map with a few lines of code. After creating a map object, we are able to fill it with one or more layers that can have a different nature (images and vector data) and be obtained from a plethora of sources. Here we will see how to use layers obtained as images.

In the previous section, we saw how easy it is to have a basic map with a few lines of code. After creating a map object, we are able to fill it with one or more layers that can have a different nature (raster/image and vector data) and be obtained from different kind of sources. In this paragraph, we will focus on image data provided by three of the main third-party map services: Google Maps, Microsoft Bing, and OpenStreetMap. The common feature of these services is that they give access to a set of images (tiles), served by their public web servers, which OpenLayers collects on the basis of our mapping needs (map dimensions, geographical extent, zoom level, and so on) and positions inside our map viewport.

Each of these map services are represented by their own layer type:

These layers have some common features that we will briefly illustrate.

When set on a map object, they are considered by default base layers.

Base layer is an important concept to grasp because OpenLayers gives them prominent importance in managing the way the map object and the other layers work together. A base layer is positioned at the base of the layers stack as the background layer, and the map object treats it as the "leader" layer, which the other overlay layers obey. For example, the overlay layer's projection must be compatible with the base layer's projection, their geographical extent boundaries are limited by the boundaries set on the base layers, and so on. A map can have only one active base layer while many overlays can be visible at the same time.

Another common denominator for the three types of layers is that the images they refer to maps are projected through a Web Mercator projection, also called as Spherical Mercator, because it treats coordinates as if they were spherical, to simplify computational costs. This is a planar projection, specifically developed for the purposes of World Wide Web mapping services, popularly identified by the code EPSG:900913, extending -180° to 180° W-E, and 85.05113 S and 85.05113 N. These extents allow to visualize a good portion of the Earth with two square images horizontally aligned.

In the Quick start example we wrote the following piece of code:

map.setCenter(
  new OpenLayers.LonLat(10.50, 45.00).transform(
    new OpenLayers.Projection("EPSG:4326"),
    new OpenLayers.Projection("EPSG:900913")
  ),5
);

Why do we need to transform our lat/lon? If you notice we never said that our map has a EPSG:900913 projection. This follows from the two previous features. The OSM layer is a base layer, so it wants us and the map to consider it as the leader and behave accordingly. Whenever we act on the map, for example, move it, zoom it, click on it, or overlay other layers, we need to obey the base layer's requirements. In this case, we wanted to move the map to a certain position, given in EPSG:4326 lat/lon coordinates, but OSM layer's projection is EPSG:900913. Never try to have words with a base layer. Instead, transform your coordinates as it wishes, and you will get on well with it!

Back to the three layers. Let's see how to set up a Google Map layer. I will add this layer to the map before the OSM layer we set in the previous example.

Expanding the layer switcher, you will be able to change the active base layer. Notice that layer stacking follows the order inside the array used in map.addLayers().

As you will notice, we had to provide some more information compared to the OSM layer. Options are always passed to the layer as a JavaScript literal object (which is defined within curly brackets). In this case we are using two options:

And what about Bing? Simply do the same as for OSM and Google Maps, create the respective layer, and add it to the map.

var road = new OpenLayers.Layer.Bing({
                name: "Road",
                key: apiKey,
                type: "Road"
            });

The type option is similar to the Google Maps layer. In this case we can use Road, Aerial, and AerialWithLabels. We have one more specific option, key. This is a string that you must obtain from the Bing web portal, to be able to use their Map API.

A final note! Instead of adding the layers one by one, we can group them in one single call to map.addLayers, passing an array with our layers. The first layer will be the default one.

map.addLayers([gs,osm,bing]);

Many of you will probably know or have heard about OGC services, WMS and WFS in particular. They are two of the most widely used web map services standards created by the Open Geospatial Consortium (OGC), an international consortium of about 400 companies, government agencies, and universities, which develops public standards in the field of geographical and location-based information systems.

First we'll see WMS services, which stands for Web Mapping Service. WMS defines a common language to interact between applications and web services to exchange rendered maps in the form of images. The Google Maps service also provides the means to access a repository of maps as images, but it doesn't follow a standard protocol standard interface.

OpenLayers provides the OpenLayers.Layer.WMS layer type. We will use it to load a thematic geological map of California (USA), published by the United States Geological Survey (USGS) map servers. Let's start our new example.

The OGC WMS specification defines the GetFeatureInfo method to obtain information about the features rendered on the map, for example, data attributes. If the layer has the queryable attribute set to 1 inside the GetCapabilites response, it means you can send a GetFeatureInfo request on it.

The OpenLayers.Control.WMSGetFeatureInfo object is what we require to perform the request. We will talk about controls later, at this moment it's enough to say that they are objects that let the user interact with the map.

Notice that GetFeatureInfo will perform a cross-domain request. We need to set up proxy.cgi, as explained earlier in this book, and populate the OpenLayers.Proxy property, otherwise no response will be received.

OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
function initMap(){
  (…)
}

The three map providers we used in recipre_01_gio.html share a common trait; they all serve the images as a set of tiles of fixed dimension, 256 px wide and 256 px high, each one reachable through its own URL (for example, http://a.tile.openstreetmap.org/0/0/0.png). These are, generally, prerendered images kept in a cache to avoid live map rendering. OpenLayers will do several requests to obtain the set of images, which finally will be composed in a continuous, single layer. Tiles are organized in a hierarchical structure, such as a filesystem. Every zooming level (the folder in the filesystem metaphor) has its own set of tiles (the single files), laid in a grid shape where each tile occupies a cell. The tile dimensions are always the same, but starting at minimum zooming level the whole world will be contained in a single tile (refer to the following screenshot), while at the maximum zooming level you may need over a billion tiles to obtain a single image of the earth!

While Google, Bing, and many other commercial services use their own tile scheme, various standards have been developed to define a common scheme, such as WMST from OGC, TMS, WMS-C. Here we will use OpenLayer.Layer.XYZ, which provides a generic, configurable scheme. The names recall the tile coordinates; z is the zooming level, and x and y are the coordinates in the grid of tiles for that zooming level.

Let's see how to load an XYZ layer from a map published through MapBox. Here we will use a base layer, offered out of the box by MapBox, whose source comes from the NaturalEarth public domain dataset.

To highlight the fact that the map is a composition of a set of square images, 256 px x 256 px, we can add a CSS style class to the <style> element of our page, which will override the default one that OpenLayers applies to each tile image and will apply a red border to the tiles.

.olTileImage{ border: 1px solid red; }

So far we have overlooked the explanation of the map.addControl method. We have used it in all our examples and it's time to spend some time on it. It adds OpenLayers.Control to the map. There are several kinds of controls available in OpenLayers, which can be roughly subdivided in two broad classes; those that permit you to interact with the map (panning, zooming, selecting features, and so on) and those which provide map widgets and visual information feedback. Here we will only see some of them.

The following basic interaction controls are probably the most widely used:

Let's see some visual controls now:

In addition to zoom, another control is added by default to the map object, the OpenLayers.Control.Navigation. It doesn't have a GUI component, but it provides the invisible mechanism to click-and-drag the map and zoom with the mouse wheel.

Back to our map! We want to enrich it with an overview map, substitute the zoom control with the panzoom control, and add a scale bar.

Technically and in general, a vector layer is an object composed by an array of features, and every feature is an object containing a geometry and an array of attributes.

Vector layers are client side, so once data is downloaded and rendered in your browser, there's no need to send new requests to the server to retrieve information. This characteristic permits a real-time interaction with the features on top of the map, but on the other side, you must be careful in managing large datasets such as vector layers, because they can really slow down things and make your map unusable and unattractive.

With vector layers, we can also create mash-ups, that is, web applications integrating data from external resources and services. An important thing to be aware of is that when we want to populate a vector layer for retrieving information from external web resources, we need to perform cross-domain requests. To be able to retrieve data, we must have set up proxy.cgi, as explained earlier in this book.

A vector layer can be added to the map from a variety of sources, as files and web services. In this example, we will see how to create a vector layer based on a GeoJSON file stored on a local folder. Let's go!

Let's explain what happened:

When talking about image-based layers, we have seen the OGC WMS standard. A closely related standard is OGC WFS, which stands for Web Feature Service. Unlike WMS, it defines a protocol to exchange vector data. We will see OpenLayers.Protocol.WFS in action to load a geological layer from the Arizona Geological Survey and overlay it on a Google Maps Satellite base.

The WFS service GetCapabilities response lists only one supported CRS, EPSG: 26912. OpenLayers isn't shipped with all of the information and mechanisms to manage the whole range of CRS on the Earth. We have seen that it can transform EPSG:4326 coordinates to EPSG:900913, because they're included by default, but how will we overlay EPSG:26912 geometries on a Google Maps base, which is EPSG:900913?

An external library that helps in this case is Proj4js. It is the JavaScript port of a powerful library, Proj4, dedicated to CRS transformations and reprojections. Proj4js isn't shipped with OpenLayers, but it can cooperate when the former is loaded in our page. We need to download it first from http://trac.osgeo.org/proj4js/wiki/Download (the present version is proj4js-1.1.0.zip) and extract it inside our web server in the OpenLayers-2.12 folder.

Let's start our new example.

OpenLayers will now be able to transform the coordinates to EPSG:900913 coordinates, so we can superimpose the vectors on OSM, Google Maps, Bing, and so on.

Back to WFS.

The GeoRSS is an OCG standard file format for encoding location as part of a web feed. It would be interesting to use the mash-up approach, because, for example, a GeoRSS source can also be read by common news aggregators (as a normal RSS). An idea would be to use this kind of data source to build a web mapping application that shows a map view and a list of news in the same page. Explaining how to retrieve web feeds in your page is beyond the scope of this book, but there are a bunch of alternatives to accomplish this task (take a look at jFeed, a plugin for the super popular jQuery framework).

There are two encodings for GeoRSS:

After this brief introduction, let's prepare our GeoRSS example. In the paragraph about the proxy installation, we added the USGS domain to retrieve remote data from it. In this example, you will learn how to add a GeoRSS source as a vector layer to your map by using the public real-time data that USGS exposes. In our example, we will use GeoRSS Simple for Atom files (available at http://earthquake.usgs.gov/earthquakes/feed/).

An important aspect of GIS is its interactivity, that is, the ability to retrieve information about the elements populating a map. This is true also for web mapping applications and users who, typically, approach them expecting something to happen even before knowing what they are looking for!

OpenLayers provides you with an effective way to build interactivity, and in this example, we will see how to use the selection control and popups to retrieve and show information.

Here's what happens:

In this section, you will learn how to create a thematic map by using the OpenLayers styling capabilities.

First of all, we will use the StyleMap and Style classes to customize the graphic appearance of the features.

What we've just seen is a very basic styling example, but obviously we can do much more. In the next example, thanks to the Rule and Filter classes, we will explain how to style features depending on the values stored into their attributes:

At the beginning of this book we said that it is important to make our web maps easy to understand for users and as fast as possible. We looked at styles, rules, and filters objects, now we will introduce the strategy class that is responsible for how OpenLayers requests remote data and what it does with the returned features.

We have already used Strategy.Fixed in the previous examples, now we will introduce the Strategy.BBOX and Strategy.Cluster classes:

In the next example, we will combine the Strategy.BBOX and Strategy.Cluster classes. This is a solution that could actually save you when working with vector layers . It containing tons of point features and maintaining your web map responsive and easy to read. Moreover, this strategy combo can be used to obtain very expressive representations through a simple but powerful feature called attributes replacement. It is achieved by defining a context object inside the OpenLayers.Style object specified for your vector layer.

If you look at the previous example's map, what you see could be a little confusing! There are areas in which points representing earthquakes overlap each other and it is difficult to understand what is happening. Let's clarify things!

Let's explain what happened: