[OpenLayers-Dev] mouse cursors

bartvde at osgis.nl bartvde at osgis.nl
Wed Apr 23 07:18:32 EDT 2008


Hi list,

I've been working a bit on mouse cursors in OL, and would like to request
some feedback on the current approach.

I've got an example up in my sandbox:
http://dev.openlayers.org/sandbox/bartvde/cursor/examples/cursor.html

And I've added a very preliminary patch to ticket1484:
http://trac.openlayers.org/attachment/ticket/1484/ticket1484.patch

I'll try and outline my approach a bit. The most difficult decision I found
was whether or not to use css. I find it quite a bit of overhead to make
css classes for all possible cursor combinations. In my case I would need
the following classes (looks already quite cumbersome to me):

.olControlZoomBoxCursor
.olControlZoomBoxOutCursor
.olControlDragPanCursor
.olControlDragPanMouseupCursor
.olControlDragPanMousedownCursor

etc.? As you can see, even control properties (like the out property for
ZoomBox) come into play, so we would need something like a cursorClass
property for people to override the default class names. For the approach
to work, we would need them to start their names with the 'olControl'
prefix, otherwise we don't know which css classes are safe to remove from
the map div when e.g. a different control is activated (we cannot just
remove any css class from the map div, since people might have set stuff on
it, so we should remove all classes that start with 'olControl' or some
similar approach). This can be error-prone IMHO.

I did see there are some utility functions (like addClass, removeClass,
toggleClass) in topp's almanac sandbox which could be used.

Disadvantage ofcourse of my approach is that the mouse cursors cannot
easily be altered by non-programmers, but I wonder how often a chosen
cursor approach will change in a project.

If people feel strongly that css is the way to go though, I can change the
code to add and remove css classes on the map div.

What I've done is briefly:

* add a cursor property on the Control class, which is set on the map div
when the control is activated
* add a cursors property (array) on the Handler class, which makes it
possible to set cursors on the map div in different functions of a Handler
(like mousedown). For now I've only implemented mousedown and mouseup in
the Drag Handler as an example.

I think the example and the patch tells the rest of the story best.

Feedback very much welcome. TIA.

Best regards,
Bart




More information about the Dev mailing list