topic Re: Change mouse pointer onMouseOver of graphic/feature in ArcGIS JavaScript Maps SDK Questions

Change mouse pointer onMouseOver of graphic/feature

StephenLead — Thu, 09 Sep 2010 05:04:02 GMT

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

Re: Change mouse pointer onMouseOver of graphic/feature

derekswingley1 — Thu, 09 Sep 2010 16:48:07 GMT

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

Re: Change mouse pointer onMouseOver of graphic/feature

StephenLead — Fri, 10 Sep 2010 02:35:07 GMT

thanks again for the help!

Re: Change mouse pointer onMouseOver of graphic/feature

BrandonFlessner — Sat, 11 Dec 2021 14:55:08 GMT

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!

Re: Change mouse pointer onMouseOver of graphic/feature

CynthiaEchavarria — Thu, 19 Nov 2015 20:01:51 GMT

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

<!DOCTYPE html>

<html>

<head>

<title>Create a Web Map</title>

<style>

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

padding:0;

margin:0;

height:100%;

}

</style>

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>

</body>

</html>

Re: Change mouse pointer onMouseOver of graphic/feature

BrandonFlessner — Thu, 19 Nov 2015 20:37:32 GMT

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

Re: Change mouse pointer onMouseOver of graphic/feature

CynthiaEchavarria — Thu, 19 Nov 2015 20:43:53 GMT

Thanks for the help Brandon.

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

Cynthia

Re: Change mouse pointer onMouseOver of graphic/feature

CynthiaEchavarria — Thu, 19 Nov 2015 21:02:20 GMT

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?

Re: Change mouse pointer onMouseOver of graphic/feature

BrandonFlessner — Thu, 19 Nov 2015 21:14:44 GMT

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.

Re: Change mouse pointer onMouseOver of graphic/feature

CynthiaEchavarria — Thu, 19 Nov 2015 21:20:08 GMT

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