How to draw arrow line

[daewoongkim]

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

[JohnGravois]

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

[JasonZou]

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

[JohnGravois]

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

[JasonZou]

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

[NickCameron2]

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

[MihkelMänna]

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

[RobertScheitlin__GISP]

Mihkel,

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

[JordanBaumgardner]

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