ArcGIS JS 4 Rotate Graphic

[BobCowling2]

I am attempting to rotate an arrow based on a mobile phones device orientation. However simply changing the symbol angle does not seem to work. What is the proper way to rotate a graphic? 

Thank you very much. 

const arrowSymbol = {
  type: "simple-marker",
  path: "M10,0 L20,30 L10,20 L0,30 Z",
  color: [0, 0, 255, 1],
  outline: {
    color: [0, 0, 0, 1],
    width: 1
  },
  size: 25
};


const arrowGraphic = new Graphic({
  symbol: arrowSymbol
});

const track = new Track({
  view: view,
  graphic: arrowGraphic,
  useHeadingEnabled: false
});


  // Add the Track widget to the view
  view.ui.add(track, "top-right");
   
  window.addEventListener("deviceorientation", (event) => {
  console.log(`${event.alpha} : ${event.beta} : ${event.gamma} : ${event.absolute} : ${event.webkitCompassHeading}`); 
  // get the heading value from the device
  const heading = event.alpha ? event.alpha * -1 : 0;

  // Rotate the arrow symbol based on the device's heading.
  arrowGraphic.symbol.angle = heading;

[BobCowling2]

Right, that makes sense. I am guessing I simply cannot rotate the track widget graphic, so the arrow should work as a separate graphic from the track widget one. Got it. Thanks for your help!

[JoelBennett]

It's likely you'll have to replace the symbol object itself:

// Rotate the arrow symbol based on the device's heading.
var newSymbol = arrowGraphic.symbol.clone();
newSymbol.angle = heading;

arrowGraphic.symbol = newSymbol;

If that doesn't work, you might try replacing the graphic entirely:

var newGraphic = arrowGraphic.clone();
newGraphic.symbol.angle = heading;

track.graphic = newGraphic;

[BobCowling2]

Thank you, Joel. I did try cloning the arrow but it was making a new arrow every time there was a new position. If this is the only way I will have to test more! 

[JamesIng]

You'll need to manually remove the existing arrow graphic from the graphic layer first before adding the new one and that should prevent the visual stacking of arrows.