nwebb

Flex, Flash, AIR

GoogleMaps, Custom Cursors & Events

I've just updated the example mapping app with custom cursors ... well, as much as I can for the time-being.

Here are a couple of points relating to issues I encountered (in version 1.3 of the swc):

Possible event bugs

MapMouseEvent.MOUSE_MOVE does not fire in the current version of the swc. This has been reported by others so it's fairly safe to assume that it's a bug (currently this is preventing me from adding the "grab" cursor when the user moves the map).

MapMouseEvent.ROLL_OUT isn't working properly for me either. I have an HBox on the left of my map. When my mouse leaves the map Flex throws null object error (apparently before it gets around to dispatching the event - I pasted the stack trace here.

I got around this by subscribing to the UIComponent's MouseEvent.ROLL_OUT instead:

Actionscript:
  1. _map.addEventListener(MapMouseEvent.ROLL_OVER, mapRollOverHandler);
  2. this.addEventListener(MouseEvent.ROLL_OUT, mapRollOutHandler);//map instance is instantiated inside a UIComponent subclass

Also note that in the above code ROLL_OUT is a constant on MouseEvent, not MapMouseEvent.

Disabling Custom Cursor for map controls

I needed to disable the custom cursor when the mouse rolls over the controls. This was straight forward:

Actionscript:
  1. //"removeCustomCuror" and "addMoveCursor" are custom methods
  2. //which use the CursorManager to add or remove my custom cursor.
  3. _zoomControl = new ZoomControl();
  4. _zoomControl.addEventListener(MouseEvent.MOUSE_OVER, removeCustomCuror);
  5. _zoomControl.addEventListener(MouseEvent.MOUSE_OUT, addMoveCursor);
  6. _map.addControl(_zoomControl);

Disabling Custom Cursor for markers

When it came to markers I expected to be able to do this:

Actionscript:
  1. marker.addEventListener(MouseEvent.ROLL_OVER, removeCustomCuror); // doesn't work

...but found that I had to listen for MapMouseEvent instead:

Actionscript:
  1. marker.addEventListener(MapMouseEvent.ROLL_OVER, removeCustomCuror); //works

I guess this is because markers are map overlays, and so just another part/layer of the map.

Determine Cursor Type At Startup

To do this I listen out to the MOUSE_OVER event from the UIComponent, change the cursor if necessary and remove the listener. It just seemed like less work than determining the position of my mouse or performing a hit-test.

Actionscript:
  1. this.addEventListener(MouseEvent.MOUSE_OVER, determineCursorAtStartUp);
  2.  
  3. /**
  4. * If mouse is over map when application starts, change the cursor
  5. */
  6. private function determineCursorAtStartUp(event:Event):void
  7. {
  8.         addMoveCursor(event); //CursorManager.setCursor(_moveCursor);
  9.         this.removeEventListener(MouseEvent.MOUSE_OVER, determineCursorAtStartUp);
  10. }

Buggy Behaviour In Firefox

Sometimes, when I move the mouse and I'm over the map, the default cursor appears alongside my custom cursor momentarily, but this only happens in Firefox.

4 comments

4 Comments so far

  1. Simon May 23rd, 2008 5:00 pm

    the example link is broken

  2. [...] GoogleMaps, Custom Cursors & Events [...]

  3. nwebb May 24th, 2008 6:58 am

    Fixed :]

  4. Einar Gerdsen May 20th, 2009 1:59 pm

    Yeah the cursor appears momentarily here too on most all examples I’ve found through google of custom cursors. Sucks :P

Leave a reply

Bad Behavior has blocked 517 access attempts in the last 7 days.