topic Arrow symbol on polyline graphic in ArcGIS JavaScript Maps SDK Questions

Arrow symbol on polyline graphic

KyleDixon — Thu, 26 Jan 2012 14:34:43 GMT

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.

Re: Arrow symbol on polyline graphic

derekswingley1 — Sat, 11 Dec 2021 14:59:59 GMT

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.

Re: Arrow symbol on polyline graphic

NickCameron2 — Sat, 22 Aug 2015 13:41:26 GMT

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