nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Vind meer berichten getagd met

Accepted answers

UndralBatsukh

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

All comments

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

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!

UndralBatsukh

Hi there,

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

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.

UndralBatsukh

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.