Tag: usability

Some useful and aesthetic free map markers collections.

Posted by – Tuesday 2013-01-22

When creating a web map with OpenLayers, Leaflet, Google Maps or similar, a problem that sometimes arises is finding useful and aesthetic map markers, especially when it is required that the markers themselves have a meaning – for instance, points of interest – that is inmediate to users.

Under this requirement the default marker icons usually provided might not be good enough, or not suit a particular need. In this post we will list some collections of free map markers icons that might fill this gap.

1. Google Maps icons, and more.

A set of map marker icons intended to be used to represent points of interest can be found at http://www.lass.it/Web/viewer.aspx?id=4.

Google Maps map markers

2. OpenStreetMap map icons

The Open Street Map project has its own set of map icons, that can be found at http://wiki.openstreetmap.org/wiki/Osmarender/Symbols.

Open Street Map icons

The Open Street Map icons themselves can be found at the Subversion repository http://svn.openstreetmap.org/applications/share/map-icons/svg/, which is accessible via a web browser.


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.