Community

Change mouse pointer onMouseOver of graphic/feature

10847
9
Jump to solution
09-08-2010 10:04 PM
StephenLead
by
Regular Contributor III
‎09-08-2010 10:04 PM
Is there a way to change the mouse pointer when hovering over a graphic or feature?

Eg on Google Maps, if you hover over the marker the mouse pointer changes.

There's an onMouseOver event on the graphic/feature - is there a way to change the mouse pointer when this event fires? Or can anyone suggest another method?

Thanks,
Steve
0 Kudos
1 Solution

Accepted Solutions
derekswingley1
by
Frequent Contributor
‎09-09-2010 09:48 AM
Listen to your graphics layer's onMouseOver event:  http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/graphicslayer.htm#onMouseOver

And then use map.setMapCursor to change the cursor:  http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/map.htm#setMapCursor

View solution in original post

0 Kudos
9 Replies
derekswingley1
by
Frequent Contributor
‎09-09-2010 09:48 AM
Listen to your graphics layer's onMouseOver event:  http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/graphicslayer.htm#onMouseOver

And then use map.setMapCursor to change the cursor:  http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/map.htm#setMapCursor
0 Kudos
StephenLead
by
Regular Contributor III
‎09-09-2010 07:35 PM
thanks again for the help!
0 Kudos
BrandonFlessner
by
Occasional Contributor
‎05-27-2015 05:50 AM

The links above didn't work for me, but here's some code that worked for me with the 3.13 version of the API

//show cursor as pointer when hovered over clickable graphic/feature
map.on('load', function() {
     graphicLayer.enableMouseEvents();
     graphicLayer.on("mouse-over", function(){
        map.setMapCursor("pointer");
     });
     graphicLayer.on("mouse-out", function(){
        map.setMapCursor("default");
     });
});

The  graphicLayer object could be map.graphics, a feature layer, or some other graphics layer that has been added to the map. Hope folks find this helpful!

CynthiaEchavarria
by
New Contributor
‎11-19-2015 12:01 PM

New to the API and javascript.  Any help would be appreciated.  Thanks

<!DOCTYPE html>

<html>

<head>

<title>Create a Web Map</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.14/esri/css/esri.css">

<style>

  html,body,#mapDiv,.map.container{

    padding:0;

    margin:0;

    height:100%;

      }

</style>

<script>var dojoConfig = { parseOnLoad:true };</script>

<script src="http://js.arcgis.com/3.14compact/"></script>

<script>

  var map,

      webmapId = "dd487118ba2f4597a0ebc2bcaafb3fb4";

     

  require([

    "esri/map",

    "esri/graphic",

    "esri/arcgis/utils",

    "dojo/domReady!"

    ], function(Map, graphic, arcgisUtils){

    arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) {

    map = response.map;

   

    //show cursor as pointer when hovered over clickable graphic/feature 

  map.on('load', function() { 

       graphicLayer.enableMouseEvents(); 

       graphicLayer.on("mouse-over", function(){ 

          map.setMapCursor("pointer"); 

       }); 

       graphicLayer.on("mouse-out", function(){ 

          map.setMapCursor("default"); 

       }); 

}); 

     

  });

  });

 

</script>

</head>

<body>

  <div id="mapDiv"></div>

</body>

</html>

0 Kudos
BrandonFlessner
by
Occasional Contributor
‎11-19-2015 12:37 PM

Cynthia,

You’ll need to replace graphicLayer with a graphic layer or feature layer. Right now graphicLayer is not defined. Typically I’d do something like:

var featureLayer = new FeatureLayer(url, );

map.addLayer(featureLayer);

map.on(‘load’, function(){

featureLayer.enableMouseEvents();

featureLayer.on(‘mouse-over’, function(){

map.setMapCursor(‘pointer’);

});

});

I’m not sure how best to get that featureLayer object from an AGOL webmap – maybe try:

var layers = map. getLayersVisibleAtScale();

console.log(layers);

then check out the layers object in the developer console and find the layer ID. The assign var featureLayer = map.getLayer(id);

Good Luck,

Brandon

0 Kudos
CynthiaEchavarria
by
New Contributor
‎11-19-2015 12:43 PM

Thanks for the help Brandon. 

I'll let you know if I can get it to work.

Cynthia

0 Kudos
CynthiaEchavarria
by
New Contributor
‎11-19-2015 01:02 PM

Ok I'm giving it a try I don't understand this part:

var layers = map. getLayersVisibleAtScale();

console.log(layers);

then check out the layers object in the developer console and find the layer ID. The assign var featureLayer = map.getLayer(id);

How do I check the layers object in the developer console to get the layer ID?  Is this there a link you have?

0 Kudos
BrandonFlessner
by
Occasional Contributor
‎11-19-2015 01:14 PM

The developer console is a feature that’s pretty standard in most browsers these days. In Google Chrome press CrtlShiftI or in Mozilla Firefox press CrtlShiftk

Then find the web console and you’ll be able to investigate the layers object. Console.log or alert() are really effective debugging tools.

0 Kudos
CynthiaEchavarria
by
New Contributor
‎11-19-2015 01:20 PM

I believe this is for Derek.

>>> Brandon Flessner <geonet@esri.com> 11/19/2015 1:15 PM >>>

Brandon Flessner

replied to the discussion

"Change mouse pointer onMouseOver of graphic/feature"

To view the discussion, visit:

https://community.esri.com/message/569545?et=watches.email.thread#569545

0 Kudos