Category: 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();
map.addControl(navHistory);

...

var element
   = document.getElementById('navigation-history');
var navHistoryPanel 
   = new OpenLayers.Control.Panel({div: element});
navHistoryPanel.addControls([
   navigationHistory.previous, 
   navigationHistory.next
]);
map.addControl(naviHistoryPanel);

More…

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
	});

	map.addLayer(layer);
	map.zoomToMaxExtent();
}

More…

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.

More…