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 currently active control. 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 accomplish 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 ; 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) , 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 will be inactive.