GIS – Maps navigation with OpenLayers

Continuing with the previous post about GIS Map Server, we will see how to navigate in maps

Continuing with the previous post about GIS Map Server, we will see how to navigate in maps generated by a map server. The intention is that the experience of browsing and interacting with the maps be similar to that provided by Google Maps.
In particular, we will discuss about a popular and supported by the community library called Open Layers. It is a javascript library that aims to build a grid of images obtained from a map server and distribute the images so that they can be browsed fluidly. The library also allows to interact with the map marking points, lines and zones.


OpenLayers supports the standard WMS that allows to connect to different map servers that can work with that standard. This means that any other type of MapServer or GeoServer map server could be used as a map provider.
Alternatively, you can use Google´s map server images to browse with OpenLayers. This means that OpenLayers would allow to “move” and “zoom” the map and Google will be in charge of providing the images for each zone. Not only Google can be used as an images provider, but also Yahoo or Bing, among others.
This functionality brings a key advantage in terms of using Google, Yahoo or Bing’s library. It allows abstracting from the map provider, which allows changing it without having to migrate the code. It also allows the developer to use a provider, such as Google, until her own map server is running.


The layers represent the images sources that can be displayed by OpenLayers.
Layers are classified into Base Layers, Non Base layers (Overlays) and Raster Layers.
The most common layer scenario is the BaseLayer, which represents the essential characteristic of the map. A base layer could be a satellite, hydrographic, lifting or streets map.
The base layers are mutually exclusive, meaning that only one base layer can be shown at a time. Fortunately, OpenLayers allows adding a browsing control that provides a switch to change between base layers.
An example of an OpenLayers map with many layers:


1  var map;
3  function initMap() {
4  map = new OpenLayers.Map(‘map’);
5  map.addControl(new OpenLayers.Control.LayerSwitcher());
7  var gphy = new OpenLayers.Layer.Google(
8  “Google Physical”,
9 {type: google.maps.MapTypeId.TERRAIN}
10 );
11  var gmap = new OpenLayers.Layer.Google(
12 “Google Streets”, // the default
13 {numZoomLevels: 20}
14  );
15  var ghyb = new OpenLayers.Layer.Google(
16 “Google Hybrid”,
17  {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
18  );
19  var gsat = new OpenLayers.Layer.Google(
20 “Google Satellite”,
21 {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
22  );
23  var wms = new OpenLayers.Layer.WMS( “WMS”, “http://osgeolive/cgi-bin/mapserv?”,
24 {map: ‘/home/user/Mapas/Argentina/’,
25  layers: ‘default’,
26  transparent: ‘off’},
27  {maxExtent: new OpenLayers.Bounds(-9548635,-5889094,18604187,-597430),
28  scales: [5000,10000,25000,50000,100000,250000,500000,
29  1000000,2500000,5000000,10000000,25000000,50000000,100000000],
30  units: ‘m’,
31   projection:new OpenLayers.Projection(“EPSG:900913″)} );
33  map.addLayers([gphy, gmap, ghyb, gsat, wms]);
35  // Google.v3 uses EPSG:900913 as projection, so we have to
36  // transform our coordinates
37  map.setCenter(new OpenLayers.LonLat(-34.57215,-58.42984), 5);
38  }

For more details on OpenLayers layers, refer to:


The overlays are features that can be added to a map, for instance, a marker, a polygon, or a line that can be drawn over the map.
OpenLayers provides methods that allow adding these overlays to a map on a page.

1 var map;
3  function initMarkerMap() {
4  map = new OpenLayers.Map(‘map’);
5  var wms = new OpenLayers.Layer.WMS(“OpenLayers WMS”,”″,{layers: ‘basic’});
7  var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0, 0), { type: 5 });
8  var points = new OpenLayers.Layer.Vector(“Points”);
9  points.addFeatures(feature);
10 map.addLayers([wms, points]);
12 var select = new OpenLayers.Control.SelectFeature(points, {hover: true});
13 map.addControl(select);
14 select.activate();
16 map.setCenter(new OpenLayers.LonLat(0, 0), 1);
17 }

To set a marker over a point:

1 function addPointOnClic(eventArgs) {
2 var lonlat = map.getLonLatFromViewPortPx(e.xy);
3 var lon = lonlat.lon;
4 var lat =;
6 var pointLayer = new OpenLayers.Layer.Vector(‘Points’, { styleMap: myStyles });
7 map.addLayers([pointLayer]);
8 var bPoint = new OpenLayers.Geometry.Point(lon , lat)
9 newpoint = new OpenLayers.Feature.Vector(bPoint);
10 pointLayer.addFeatures(newpoint);
11 }



As Google Maps, OpenLayers presents events that can be used, such as:
•    mouseover
•    mouseout
•    mousedown
•    mouseup
•    mousemove
•    click
•    dblclick
•    resize
•    focus
•    blur
•    moveend
•    zoomend
•    changelayer
•    changebaselayer

An example of listeners attached to maps:

1 map = new OpenLayers.Map(‘map’, {
2 eventListeners: {
3 “moveend”: mapEvent,
4 “zoomend”: mapEvent,
5 “changelayer”: mapLayerChanged,
6 “changebaselayer”: mapBaseLayerChanged
7 }
8 });

These events rely on functions that know how to handle them when they arise.
It is important to highlight that OpenLayers’ mobile version presents a series of “touch events” that can be used, such as pinch, touch or tap, making it possible to take the advantages of OpenLayers to the mobile world.



Openlayers allows completely customizing all of its controls by changing certain classes of css, creating a different look & feel from other providers, such as Google or Bing.

This page is a good example:
The example’s css file can be found at:


As it was mentioned before, OpenLayers presents a version specifically optimized for mobiles, which includes touch, pinch and tap events. All these features make OpenLayers a good choice for closed solutions, such as Google Maps or Bing Maps.
Versatility and independence are the main characteristics of this library.
Another layer that can be added to GIS stack, with the aim of optimizing the response time to the map server calls, is specially prepared caches. Among which we can find: TileCache and GeoWebCache.


TileCache is an implementation of the WMS Tile Caching protocol written in Python. The implemented protocol is a standard proposed by OSGeo, which can be accessed by any client that supports that communication.

OpenLayers communicates with Tilecache, like any other WMS.C. This allows Openlayers to be independent from any cache to be used.
TileCache only needs to access a disk to function correctly. Besides of using the disk, TileCache can be set to use libraries such as Memcached. The caches it supports can be found at the following link:
The use of one cache improves the map server performance and decreases the CPU usage by reducing the need to access the data base that generates the maps.
The TileCache configuration is simple, but requires GIS knowledge. First the apache must be set to delegate in TileCache by placing the following code inside an apache directory:

1 AddHandler python-program .py
2 PythonHandler TileCache.Service
3 PythonOption TileCacheConfig /var/www/tilecache/tilecache.cfg

After this, the layers that need to be served must be set in tilecache.cfg. An example of a layer is:
description=Basic map

TileCache can be set, among other things, to use different resolutions for each selected layer. An axample of a much more complex configuration is:
projection=@/path/to/target_projection # Either a string, or if prefixed by @, an absolute path to a projection in WKT.

For more information about layers, click here.


With this post we conclude the review on the main layers inside GIS stack.
There are several useful tools for different functions inside the GIS stack. The standards set the path for the development of many tools, which created these ecosystems.
On the GIS posts, our intention is to present the subject with the most simple and comprehensive information, explaining how each of the tools interact.
Getting the whole stack to run correctly is not an easy task, but once we do it, we obtain a complete solution to compete with Google or Bing.

Share this articleShare on LinkedInTweet about this on TwitterShare on FacebookShare on Google+Email this to someone
Go Back