nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change mouse pointer onMouseOver of graphic/feature

StephenLead

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

Najděte více příspěvků označených jako

Accepted answers

derekswingley1

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

All comments

derekswingley1

StephenLead

thanks again for the help!

BrandonFlessner

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

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>

BrandonFlessner

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

CynthiaEchavarria

Thanks for the help Brandon.

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

Cynthia

CynthiaEchavarria

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?

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.