topic Re: Using Javascipt API to draw an arrow in ArcGIS JavaScript Maps SDK Questions

Using Javascipt API to draw an arrow

BjörnPaulström — Mon, 17 Jul 2017 13:52:16 GMT

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

Re: Using Javascipt API to draw an arrow

ThomasSolow — Mon, 17 Jul 2017 15:24:46 GMT

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.

Re: Using Javascipt API to draw an arrow

ThomasSolow — Mon, 17 Jul 2017 19:21:39 GMT

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)

Re: Using Javascipt API to draw an arrow

BjörnPaulström — Tue, 18 Jul 2017 07:58:41 GMT

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...

Re: Using Javascipt API to draw an arrow

ThomasSolow — Tue, 18 Jul 2017 13:02:05 GMT

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.

Re: Using Javascipt API to draw an arrow

ThomasSolow — Tue, 18 Jul 2017 13:38:28 GMT

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.

Re: Using Javascipt API to draw an arrow

PutriDewi_Purnamasari — Thu, 20 Jul 2017 02:17:11 GMT

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.

Re: Using Javascipt API to draw an arrow

ChristianHoward — Wed, 05 Feb 2020 20:31:45 GMT

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.

Re: Using Javascipt API to draw an arrow

GavinRehkemper — Mon, 24 Aug 2020 18:14:13 GMT

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

Re: Using Javascipt API to draw an arrow

SelectivelySocial — Fri, 23 Apr 2021 13:48:42 GMT

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

Re: Using Javascipt API to draw an arrow

AamirSuleman1 — Fri, 28 May 2021 18:58:11 GMT

From 4.16 you have the ability to add a marker of type LineSymbolMarker to a line. Arrow is one of the style option with settings of placement and color.

https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-LineSymbolMarker.html

Re: Using Javascipt API to draw an arrow

SelectivelySocial — Mon, 14 Jun 2021 07:16:18 GMT

Hello,

So I tried this and it works perfectly fine, but there's one issue when I try to use print service then it simply removes the arrow symbol from the print, do you know any workaround for this.

Thanks.