nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

All comments

SelectivelySocial

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.

AamirSuleman1

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

SelectivelySocial

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

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

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.

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.

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.

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.

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

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

(draw on the map to draw an arrow)

ThomasSolow

The 3.21 API has a draw tool that can draw arrows. This does not yet exist in 4.xyz 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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.