Graphic Layer graphics redraw incorrectly after map zoom event

Question

I have a web map application which adds arrows onto street segments signifying direction as a Graphics Layer. The direction of each arrow is calculated by this process: 1) build an array of the street segments from a query 2) find the from and to node of each segment, and get the geometry of each 3) calculate the slope of the line from these two nodes 4) use the slope to calculate the angle of the arrow graphic, which is drawn on top of the line segment st its midpoint.

This works as expected after I added a short timeout to the function. Before I added a timeout, it appeared that some arrows were drawn before each new angle was calculated, resulting in some arrows being drawn in the wrong direction (although all arrow were in the right location). Since I added the timeout, I do not have this problem on the initial graphics add.

The problem I have now is that if I zoom in or out of the map, many of the arrow are redrawn incorrectly. I believe the same thing is happening here as was before I added the timeout; the arrows are drawn before the angle for each arrow is calculated.

How can I fix this? Can I somehow disable the redraw function, or do I need to rerun the query and angle calculation?

I am using ArcGIS Javascript API 3.8.

Answer 1

The problem was that I was calculating the angle for the marker symbol variable, rather than each instance of the symbol added to the graphics array. I changed the loop where the graphics are added, so that each new addition created a new instance of the marker symbol with its own angle calculated. Now the orientation of the symbol stays consistent.