Change cursor symbol on hover of polygon graphic

rsharma · ‎09-03-2020

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

RobertScheitlin__GISP · ‎09-03-2020

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]">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the view-hittest sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/view-hittest/index.html
  -->
  <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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Egge-Jan_Pollé · ‎09-03-2020

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