Change Mouse cursor on hover over feature only?

Question

Hello everyone! I'd put together some code below to see if I can change the mouse cursor into a hand Only when hover over the feature. It only work when I remove the basemap( comment it out). If not comment out the basemap (line 71) when instantiating the Map object, the hand cursor appear everywhere, even when not hovering over the feature. Any advice on how to get the hand cursor to appear Only when hovering over the point feature? TIA! <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>GeoJSONLayer - 4.14title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } style> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/">script> <script> require([ "esri/Map", "esri/layers/GeoJSONLayer", "esri/views/MapView", "esri/core/watchUtils" ], function(Map, GeoJSONLayer, MapView, watchUtils) { const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"; const template = { title: "Earthquake Info", content: "Magnitude {mag} {type} hit {place} on {time}", fieldInfos: [ { fieldName: "time", format: { dateFormat: "short-date-short-time" } } ] }; const renderer = { type: "simple", field: "applicant_id", symbol: { type: "simple-marker", color: "orange", size: 10, outline: { color: "white" } } }; const geojsonLayer = new GeoJSONLayer({ url: url, copyright: "USGS Earthquakes", popupTemplate: template, renderer: renderer //optional }); const map = new Map({ basemap: "gray-vector", layers: [geojsonLayer] }); const view = new MapView({ container: "viewDiv", center: [-123.718273, 45.309011], zoom: 8, map: map }); function changeMouseCursor(response) { if (response.results.length > 0) { document.getElementById("viewDiv").style.cursor = "pointer"; } else { document.getElementById("viewDiv").style.cursor = "default"; } } function getNewGraphics(response) { view.graphics.removeAll(); if (response.results.length > 0) { var graphic = response.results[0].graphic; graphic.symbol = { type: "simple-marker", style: "circle", color: [ 17, 114, 212, 0.3 ], outline: { // autocasts as new SimpleLineSymbol() color: "blue", width: 2 } } view.graphics.add(graphic); } } view.when(function () { view.whenLayerView(geojsonLayer).then(function (lview) { watchUtils.whenFalseOnce(lview, "updating", function () { // Set up a click event handler and retrieve the screen x, y coordinates view.on("pointer-move", function (evt) { var screenPoint = { x: evt.x, y: evt.y }; view.hitTest(screenPoint) .then(function (response) { changeMouseCursor(response); getNewGraphics(response); }); }); }); }); }); }); script> head> <body> <div id="viewDiv">div> body> html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Vic, Because the basemap has reference layers that will appear in the hittest results as graphics. Here is the solution. Check if the results graphic layer is of type geojson. function changeMouseCursor(response) { if (response.results.length > 0 && response.results[0].graphic.layer.type === "geojson") { document.getElementById("viewDiv").style.cursor = "pointer"; } else { document.getElementById("viewDiv").style.cursor = "default"; } }‍‍‍‍‍‍‍