Change cursor symbol on hover of polygon graphic

Question

HI i want to change cursor symbol on mouse hover of polygon graphic of only graphicslayer not for any other Graphic layer

Egge-Jan_Pollé · Answer

Hi alpha coder‌,

Did you have a look at this question: Change Mouse cursor on hover over feature only?

The answer given there might be useful to you.

HTH,

Egge-Jan

RobertScheitlin__GISP · Answer

Here is a sample for that: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="description" content="[Highlight features with hover events - 4.16]">  <title>Highlight features with hover events - 4.16</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css"> <link rel="stylesheet" href="https://js.arcgis.com/4.16/dijit/themes/claro/claro.css"> <script src="https://js.arcgis.com/4.16/"></script> <script> var dialog, dRenderer; require([ "esri/core/watchUtils", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleLineSymbol", "dojo/dom", "dojo/dom-style", "dijit/popup", "dojo/domReady!" ], function ( watchUtils, Map, MapView, FeatureLayer, UniqueValueRenderer, SimpleLineSymbol, dom, domStyle, dijitPopup ) { var layer = new FeatureLayer({ url: "https://services.arcgis.com/8Pc9XBTAsYuxx9Ny/arcgis/rest/services/BuildingFootprint2D_gdb/FeatureServer/0", outFields: ["*"] }); var map = new Map({ basemap: "dark-gray", layers: [layer] }); var view = new MapView({ container: "viewDiv", map: map, center: [-80.135073, 25.774479], zoom: 16 }); view.when(function () { view.whenLayerView(layer).then(function (lview) { let highlight, lResult = {attributes:{OBJECTID:null}}; watchUtils.whenFalseOnce(lview, "updating", function () { // Set up a click event handler and retrieve the screen x, y coordinates view.on("pointer-move", function (evt) { view.hitTest(evt) .then(function (response) { const result = response.results[0]; if (result) { if(result.graphic.layer.id === layer.id){ if(lResult.attributes.OBJECTID !== result.graphic.attributes.OBJECTID){ highlight && highlight.remove(); highlight = lview.highlight(result.graphic); lResult = result.graphic; document.getElementById("viewDiv").style.cursor = "pointer"; } }else{ highlight && highlight.remove(); document.getElementById("viewDiv").style.cursor = "default"; lResult = {attributes:{OBJECTID:null}}; } }else{ highlight && highlight.remove(); document.getElementById("viewDiv").style.cursor = "default"; lResult = {attributes:{OBJECTID:null}}; } }); }); }); }); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍