Change HandCursor while MouseOver GraphicsLayer

3102
5
02-17-2011 11:05 AM
EricSegerson
Emerging Contributor
Hi.  I have some point data from a REST service that I am displaying on my map using pretty icons defined in a GraphicsLayer:

<esri:Map . . .>
    . . .
    <esri:GraphicsLayer>
        <esri:symbol>
            <esri:PictureMarkerSymbol source="...icon.png" />
        </esri:symbol>
    </esri:GraphicsLayer>
</esri:Map>


I have a map click handler to do something when the user clicks a point.  Currently, the "grab" cursor is present anywhere on the map so the user knows to pan.  How do I change the cursor to a finger pointer while hovering over a point?

I tried adding to the GraphicsLayer useHandCursor="true" but this had no effect, even if I set it to false.  I tried setting useHandCursor="true" (and false) to the map itself and still no effect.  Is ESRI overriding the cursor?  How do I take control of it?  Thanks!
Tags (2)
0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus
Eric,

   You need to use the maps cursor manager and set your own cursor and ensure to remove it your self also:

 Code provided by Tom Hill  (esri)

 [Embed(source="assets/images/spotlight.png")]
 private var _spotlightIcon:Class;

 // Mouse cursor management
 private var _cursorID:int = -1;
 private var _currentCursor:Class;

 //--------------------------------------------------------------------------
 //
 //  Cursor management methods
 //
 //--------------------------------------------------------------------------
 
 private function setCursor( cursor:Class ):void
 {
  if (cursor) {
   if (cursor !== _currentCursor) {
    clearCursor();
    _currentCursor = cursor;
    _cursorID = map.cursorManager.setCursor(cursor);
   }
  } else {
   clearCursor();
  }
 }
 
 private function clearCursor():void
 {
  if (_currentCursor) {
   map.cursorManager.removeCursor(_cursorID);
   _cursorID = -1;
   _currentCursor = null;
  }
 }
0 Kudos
EricSegerson
Emerging Contributor
Thanks.  Your code is useful.  I added mouseOver="setCursor(_spotlightIcon)" and mouseOut="clearCursor()" to my GraphicsLayer.

But in order to make this effective, I would need to create a custom finger pointer cursor (apparently called a "hand cursor", which is different from the map pan cursor).  Is there any way to use the built-in cursor?  See http://www.switchonthecode.com/tutorials/showing-the-hand-cursor-in-flex  This has no effect on the map, though.  Any ideas? 

Maybe the "hand cursor" is part of the OS and not part of Flash?  (If so, I might have more flexibility in Flash 10.2.) http://www.adobe.com/devnet/flashplayer/articles/native-mouse-cursors.html  10.2 isn't really a desirable solution for me right now, though.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Eric,

   Easily fixed.

// for mouse over use
                                myMap.openHandCursorVisible = false;
    Mouse.cursor = MouseCursor.BUTTON;
//Mouse out use:
    Mouse.cursor = MouseCursor.AUTO;
    myMap.openHandCursorVisible = true;
0 Kudos
Drew
by
Frequent Contributor
One way I do it is with the code below.

graphic.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
{
 map.panEnabled = false;
 graphic.buttonMode = true;
 graphic.useHandCursor = true;
 
});
graphic.addEventListener(MouseEvent.ROLL_OUT, function(event:MouseEvent):void
{
 graphic.buttonMode = false;
 graphic.useHandCursor = false;
 map.panEnabled = true;
});


Drew
0 Kudos
EricSegerson
Emerging Contributor
Robert, your code worked great!  Thanks!
0 Kudos