Change cursor on hover marks

864
3
Jump to solution
05-16-2022 09:29 AM
FredListy
New Contributor II

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);
0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

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

View solution in original post

3 Replies
UndralBatsukh
Esri Regular Contributor

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
New Contributor II

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.

0 Kudos
UndralBatsukh
Esri Regular Contributor

Hi there, 

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