Using Javascipt API to draw an arrow

[BjörnPaulström]

I have a list with tuples containing latitude and longitudes, and I need to draw an arrow between the two points in the tuple. I cannot however find any easy way to do this. How would i go about drawing an arrow with the javascript API? Also it needs to scale with zoom level so the arrow isnt giantly large if u zoom in on it

[ThomasSolow]

The 3.21 API has a draw tool that can draw arrows.  This does not yet exist in 4.XX unfortunately.

Here's the 3.21 tool (click arrow) ArcGIS API for JavaScript Sandbox 

A question though: you say the arrow should be drawn between point A and point B, but if A and B are fixed long/lats then the arrow has to scale as you zoom in and out.  For example, in the 3.21 draw tool, both ends of the arrow are fixed long/lats, so the arrow must change sizes as the user zooms in and out.  If it didn't change size, then it would no longer be fit to those two points.

If the 3.21 tool matches what you need I can probably make a quick sample that does roughly the same thing for the 4.X API.

[ThomasSolow]

here's a sample showing how to make an arrow drawing tool in the 4.XX API: https://jsbin.com/xicojevuni/edit?html,output 

(draw on the map to draw an arrow)

[BjörnPaulström]

Thank you for your answer, however this approach has the side effect i am trying to avoid (probably wasnt a good description, english is not my native language). Since you place the coordinates in worldspace the arrow occupies the whole view when you zoom in.

I was looking for something closer to how google solves it, 
Arrows (Symbols)  |  Google Maps JavaScript API  |  Google Developers 
where the arrow is the same size even if u zoom in, thought this would be something simple already included in the api...

[ThomasSolow]

Some types of symbols remain the same size as you zoom in and out.  For example, PictureMarkerSymbols and SimpleMarkerSymbols do this.

I think you could get something like this working using two graphics, one of them symbolized by a PictureMarkerSymbol to represent the head of the arrow and the other a polyline represented by a SimpleLineSymbol representing the rest of the arrow.  You'd have to rotate the PMS based on the direction the arrow is facing.

[ThomasSolow]

Here's a sample showing how you might do this: JS Bin - Collaborative JavaScript Debugging 

The arrowhead image is a base64 svg, but you could use whatever image you wanted for the arrowhead.  You might have to play with how the angle of rotation is calculated based on the orientation of the image you use.

[PutriDewi_Purnamasari]

Hi, if you looking for something that is look same with Arrows (Symbols) | Google Maps JavaScript API | Google Developers, then I'll suggest you this one: DirectionalLineSymbol.

You can create polyline and arrow at the end of line or make it repeatly along the line.

[ChristianHoward]

There is no arrow in the Esri Sketch Widget in the 4.x api (as of February 2020), so I took Thomas's drag arrow functionality and tweaked it for use with the sketch widget in this codepen.

[GavinRehkemper]

Here's a version using the ArcGIS API for JavaScript version 4.16. It uses the CIMSymbol which is in beta and has some caveats (read those before using):

https://codepen.io/gavinr/pen/BaKpbYd 

See also: Arrows along a line | ArcGIS API for JavaScript 4.16 

[SelectivelySocial]

I had a question, do you think the print service will work for this ?