Change cursor on hover marks

[FredListy]

Hello, I have this mark in a globe, it's just a circle, and I would like to change the cursor to pointer when hovering it. Can you help me?

        const geometryPolyne = new Polyline({

          paths,

        });

        const symbolLine = new LineSymbol3D({

          symbolLayers: [

            {

              type: "line",

              material: {

                color: "#EB995E",

              },

              size: 3,

              cap: "round",

              join: "round",

            },

          ],

        });

        const polylineGraphic = new Graphic({

          geometry: geometryPolyne,

          symbol: symbolLine,

        });

        view.graphics.add(polylineGraphic);

[UndralBatsukh · Accepted solution]

Hi there, 

You can do something like the following where I am checking if the mouse is over the polyline. 

 view.on("pointer-move", eventHandler);
function eventHandler(event) {
  // only include graphics from graphicslayer in the hitTest
  const opts = {
    include: graphicsLayer
  };
  view.hitTest(event, opts).then((result)=>{
    if (result.results.length > 0) {
      result.results.forEach((r)=>{
        if (r.graphic.geometry.type === "polyline"){
          document.body.style.cursor = "pointer";
        }
     });
    } else {
      document.body.style.cursor = "auto";
    }
  });
}

[FredListy]

It worked, but without opts object. Thanks!

I'm using pointGaphic as SimpleMarkerSymbol now. I tried to add SimpleMarkerSymbol or anything related to this in opts object and didn't work, so I deleted it and now it works.

[EirikH]

For anyone copying this code, please note that the pointer-move fires extremely often.

You should use some kind of throttling for this.

Example using lodash:

import { throttle } from 'lodash';

...

const pointerMoveHandler = (mapView: __esri.MapView) => {
  return throttle(
    (event: __esri.ViewPointerMoveEvent) => {
      const opts = {
        include: mapView.allLayerViews.find((lv) => lv.layer.id === "foo")
          ?.layer,
      };

      void mapView.hitTest(event, opts).then((result) => {
        document.body.style.cursor = result.results?.length > 0 ? 'pointer' : 'auto';
      });
    },
    150,
  );
};

...

mapView.on('pointer-move', pointerMoveHandler(mapView))

[UndralBatsukh]

Hi there, 

Glad you got it working. Please feel free to mark this issue as resolved. 

[zjaffe_MapIT]

@FredListy

@UndralBatsukh

I am looking to change the cursor in my ArcGIS Experience Builder Application. Where would I input the code above? (I do not have a developers background). Any tips or advice would be greatly appreciated.

Thanks!