Arrow symbol on polyline graphic

Question

I have a polyline graphic and need directional arrows at least at the start and end of the line. I've used the vertices to place a marker at the start and finish, but I don't know what direction it's going.

NickCameron2 · Answer

Hi Guys,

I know this is super old, but I came across this post while looking for a similar solution, so sharing my eventual solution here. Ended up building a custom line symbol to handle this. It's on github here:

nickcam/DirectionalLineSymbol · GitHub

Might help some others stumbling across this in the near future.

Thanks,

Nick

derekswingley1 · Answer

If I understand correctly, you need to calculate the bearing of a line. I put together a simple way to do this on jsfiddle:  show arrows at the end of a line. The symbol used there is kind of ugly but you get the idea.

The key part is calculating the angle of the line:
p1 = geometry.paths[0][0];
p2 = geometry.paths[0][1];
var rise = p2[1] - p1[1];
var run = p2[0] - p1[0];
angle = (180/Math.PI) * Math.atan2(run, rise);

Once you have the angle, put a picture marker symbol on each end of the line. Rotate the symbol on the end point to the angle you calculated and rotate the symbol on the start of the line to 180 - the angle.