topic Change cursor on hover marks in ArcGIS JavaScript Maps SDK Questions

Change cursor on hover marks

FredListy — Mon, 16 May 2022 16:29:25 GMT

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);

Re: Change cursor on hover marks

UndralBatsukh — Mon, 16 May 2022 19:24:50 GMT

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"; } }); }

Re: Change cursor on hover marks

FredListy — Tue, 17 May 2022 14:08:36 GMT

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.

Re: Change cursor on hover marks

UndralBatsukh — Tue, 17 May 2022 16:34:49 GMT

Hi there,

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

Re: Change cursor on hover marks

zjaffe_MapIT — Thu, 26 Sep 2024 16:07:41 GMT

@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!

Re: Change cursor on hover marks

EirikH — Fri, 21 Feb 2025 09:39:27 GMT

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))