topic Re: How to draw arrow line in ArcGIS JavaScript Maps SDK Questions

How to draw arrow line

daewoongkim — Thu, 07 Mar 2013 11:19:56 GMT

Hi.
I'm making the tracking program using javascript.
as you know the tracking program need to search their history.
so,
I want to draw arrow head line.
I used catographic symbol, but not solve.

Is someone have a solution??
Do you have a sample source, if you know the link, please tell me a little

Re: How to draw arrow line

JohnGravois — Fri, 08 Mar 2013 15:14:03 GMT

the arrow graphic symbol displayed here is actually a polygon geometry type, but i still thought i'd forward it along.

Re: How to draw arrow line

JasonZou — Tue, 14 Jan 2014 17:09:02 GMT

Hi John,

I noticed that the draw toolbar provides the arrow options. But the arrow width seems to be fixed no matter how I draw the arrow. Is it possible to control the width of the arrow polygon? The default is pretty wide.

Thanks,

Jason

Re: How to draw arrow line

JohnGravois — Tue, 14 Jan 2014 18:44:21 GMT

not positive, but i don't think there is way to get control over the arrow width in the draw toolbar.

Re: How to draw arrow line

JasonZou — Tue, 14 Jan 2014 18:46:54 GMT

Thanks for the response, John. Hopefully ESRI can come up with some better option for arrows in the near future.

Re: How to draw arrow line

NickCameron2 — Sat, 22 Aug 2015 13:46:45 GMT

Hi Mate,

I know this this is really old - but came across it looking for the same thing. I ended up creating a custom line symbol to display direction - it's on github here:

nickcam/DirectionalLineSymbol · GitHub

May help yourself or others coming across this post.

Thanks,

Nick

Re: How to draw arrow line

MihkelMänna — Sun, 27 Dec 2015 14:15:11 GMT

Hi Nick,

Thank you so much for sharing your code on directional line symbols! I've been using your approach for some custom graphics of my own and it's been working super good for me.

But when using the graphics in an Web AppBuilder app, I discovered that I can't print the graphics with the Print widget. It either ends up throwing an error (for your DirectionalLine grahics) or just prints the basemap (for my graphics). I guess it has something to do with the way the additional paths are added to the map/graphicslayers.

Do you have any idea what might be causing this issue and how to resolve it? I'd be really thankful.

Mihkel

Re: How to draw arrow line

RobertScheitlin__GISP — Sun, 27 Dec 2015 21:25:14 GMT

Mihkel,

Custom graphic types are not supported by the esri print task.

Re: How to draw arrow line

JordanBaumgardner — Sun, 27 Dec 2015 21:32:41 GMT

I would approach this a little different. I would separate the line from the arrow head.

something Like this: (please forgive the hodgepodge of code)

var trackingLayer;

var trackingPath;

var trackingCurrentSymbol;

var trackingCurrentGraphic;

init {

var trackingLayer = new esriGraphicsLayer({ id: "trackingLayer" });

map.addLayer(trackingLayer);

// init line as usual

trackingCurrentSymbol = new SimpleMarkerSymbol(

{

"color": { r: 255, g: 99, b: 3, a: 1 },

"path": "M29.225,23.567l-3.778-6.542c-1.139-1.972-3.002-5.2-4.141-7.172l-3.778-6.542c-1.14-1.973-3.003-1.973-4.142,0L9.609,9.853c-1.139,1.972-3.003,5.201-4.142,7.172L1.69,23.567c-1.139,1.974-0.207,3.587,2.071,3.587h23.391C29.432,27.154,30.363,25.541,29.225,23.567zM16.536,24.58h-2.241v-2.151h2.241V24.58zM16.428,20.844h-2.023l-0.201-9.204h2.407L16.428,20.844z",

"size": 21,

"style": "esriSMSPath",

"type": "esriSMS",

"xoffset": 0,

"yoffset": 0

}

);

}

onUpdateCurrent {

// Get GPS

// Add vertices to path

// Update arrow.

lastPosition = me.currentPosition;

currentPosition = new Point(long, lat);

currentHeading = me.computeAngle(me.lastPosition, me.currentPosition);

trackingCurrentGraphic.setGeometry(currentPosition);

trackingCurrentSymbol.setAngle(currentHeading);

trackingCurrentGraphic.setSymbol(trackingCurrentSymbol);

}

computeAngle = function(pointA, pointB) {

var dLon = (pointB.x - pointA.x) * Math.PI / 180;

var lat1 = pointA.y * Math.PI / 180;

var lat2 = pointB.y * Math.PI / 180;

var y = Math.sin(dLon) * Math.cos(lat2);

var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);

var bearing = (Math.atan2(y, x) * 180 / Math.PI) + 180;

bearing = ((bearing + 360) % 360).toFixed(1); //Converting -ve to +ve (0-360)

if (isNaN(bearing)) bearing = 0;

return bearing;

};

SVG Icons:

Icons