Tag: OpenLayers 2

Styling OpenLayers NavigationHistory control.

Posted by – Tuesday 2012-07-10

In this post we will see how to style the default OpenLayers NavigationHistory control, that is, changing the icons shown by the two buttons created by this control.

1. The arena.

First, the Javascript code used to create this control and to add it to the map is the shown below:

var map 
   = new OpenLayers.map(document.getElementById('map'));


var navHistory 
   = new OpenLayers.Controls.NavigationHistory();


var element
   = document.getElementById('navigation-history');
var navHistoryPanel 
   = new OpenLayers.Control.Panel({div: element});


OpenLayers: Can a base layer of WMS type be transparent?

Posted by – Wednesday 2011-03-30

I am about to teach an introductory course on GIS. One of the taught subjects is the OpenLayers library. Part of the course consists on exercises that the attendees will have to complete. Obviously, the very first OpenLayers exercise is creating a very simple map viewer.

Unexpectedly, I had problems with this simple example. The JavaScript code is shown below; the line causing the problem is highlighted:

// OpenLayers version: 2.10
function initMap() {
	var WMS_SERVER = 'http://path/to/wms-server';

	var map = new OpenLayers.Map('map', {
		'projection': 'epsg:...',
		'units': 'm',
		'maxExtent': new OpenLayers.Bounds(..., ..., ..., ...),
		'maxResolution': 'auto'

	var layer = new OpenLayers.Layer.WMS('municipalities', WMS_SERVER, {
		'layers': 'municipalities',
		'format': 'image/png',
                'transparent': true



Changing mouse pointer style in OpenLayers.

Posted by – Sunday 2010-10-17

In this post we will see how to change mouse pointer style in a OpenLayers (version 2.9.1) based map viewer depending on the control currently active. This is a feature frequently demanded by end users who want, for example, that the mouse pointer becomes a hand when the drag control is active.

The first section is a brief introduction to mouse pointer styles in web browsers. In the second section we will see how change the mouse pointer style. Finally, in the third section we will see how to supply some eye candy by (a) Creating custom mouse pointers in a Ubuntu Linux environment and (b) Using them in OpenLayers.

1. Mouse pointer styles.

In a web browser the mouse pointer style can be changed by setting the value of the CSS cursor property of document.body.style. There are a number of predefined styles. For example, the ‘default’ style shows the usual arrow, and the ‘wait’ style – used to indicate that the program is busy – shows an hourglass or a loading indicator [1]; actual mouse styles are web browser dependent.

Custom mouse pointer styles can be created and used in web browsers. The custom mouse pointer must be stored as a raster image, and uploaded to the server. The most usual formats are .ani (animated cursors) and .cur (not animated cursors) [2], both supported by Microsoft’s web browsers and sometimes by its non-Microsoft counterparts.

2. Changing mouse pointer style depending on OpenLayers active control.

Let’s suppose that our OpenLayers based map viewer has two controls that can be selected by users: DragPan and ZoomBox. When the DragPan control is active, mouse pointer style will be a hand. When the ZoomBox control is active, mouse pointer style will be a cross. Since these controls belong to a panel, it is not possible that both are simultaneously active: if one of them is active, the another one will be inactive.


Running two (or more) instances of TileCache.

Posted by – Thursday 2010-09-16

TileCache is caching system that caches a Web Map Service (WMS) at a discrete set of map resolutions. Sometimes two (or more) WMS caches working at different sets of map resolutions are needed, and a possible solution can be running two (or more) instances of TileCache.

In first section we briefly introduce WMS caches and TileCache.

In the second section, it is seen why running two instances of TileCache it is needed. We have created a dynamic map, based on the OpenLayers library, which is inserted in a web page. Depending on client display resolution, the map can be shown cropped. To avoid it, on map initialization its resolution (map units per pixel) is changed in function of client display resolution. A side effect of this solution is that in case the WMS layers are cached, we will need to run more than one instance of TileCache.

In the third section we show how to install and configure one instance of TileCache on a Linux server.

Finally, in the fourth section the previous setup is generalized to install two instances of TileCache.

1. About WMS caches and TileCache.

Rendering WMS images is a CPU intensive task, usually resulting in high load times on client side. Thus, WMS cache systems, that store and send already rendered images as response to WMS GetMap requests, are of interest for two resasons: on server side the rendering work already done by the computer is reused, and on client side load times decrease by orders of magnitude.

WMS caches are conceptually very similar to other types of caches. When a WMS GetMap request is received by a WMS cache, a cache hit or a cache miss will happen. In case of cache hit, the requested image is already rendered and stored in the WMS cache and it is sent to the requesting client. In case of cache miss, the requested image is not present in the WMS cache, so (a) the request is forwarded to the WMS server, (b) the WMS server renders the image, (c) the rendered image is sent to the WMS cache, (d) the rendered image is sent to client and (e) it is also stored in the WMS cache. Note that it is assumed that clients must always send all their WMS requests to the WMS cache, not to the WMS server.