topic Re: Arrow heads on lines in ArcGIS JavaScript Maps SDK Questions

Arrow heads on lines

FredHejazi — Mon, 24 Sep 2012 18:31:47 GMT

Does anyone know how to create arrow heads on lines. More specifically, a line with intermittent arrows. This is a line that is output from a route. So, the arrows would help the person determine the direction of travel for the route.

Someone else posted the same question, then apparently figured it out. But there is no additional information.

Thanks

Re: Arrow heads on lines

StephenLead — Tue, 25 Sep 2012 00:35:44 GMT

I haven't tested this so can't verify it will work. But you could try setting the symbology that you want (including the dashed lines and arrowheads) in ArcMap, then publish that as a map service.

Now create a Dynamic Map layer from the service. With luck this will contain the arrow heads and dashed lines.

If that doesn't work, you could create a point at the end of each line, and use a PictureMarkerSymbol to display the arrow heads.

Steve

Re: Arrow heads on lines

FredHejazi — Tue, 25 Sep 2012 18:55:57 GMT

I am working in Arcgis Online. The line is being creating using the Routetask. So, I am not sure an Arcmap solution would work. Or maybe I am not exactly following what you are suggesting.

As far as the point at the end of the line. I did consider that. The problem is the direction of it. Which would mean I would have to break the line, get a bearing of the last segment and then align the symbol. Seems a little too much work for something that should be a simple line style. That would still not fix the arrows along the length of the line. I would need a lot of processing for that.

Anyway I was hopping for something simple that I might have overlooked. Like an arrow line style.

Re: Arrow heads on lines

StephenLead — Wed, 26 Sep 2012 22:33:07 GMT

I was hopping for something simple that I might have overlooked. Like an arrow line style.

As far as I can see, that doesn't exist yet - cartographicLineSymbol would seem the obvious place for this, but it doesn't have the option.

Re: Arrow heads on lines

AR — Sat, 11 Dec 2021 20:44:13 GMT

Forget cartographic lines. Here's what I use. Seems to work really well. The great thing is that since it's a text symbol, you can angle it.

//text symbol//
var arrow = function(pt1,pt2){    
          return new esri.symbol.TextSymbol({
          text : "�?�",
       angle: setAngle(pt1, pt2),
       type: "esriTS",
             color: new dojo.Color([0,0,255,0.5]),
             font: {
              size: 13, 
              style: 'normal', 
              type: 'font',
              variant: "normal",
              weight: "normal",
              family: "Lucida Grande Console"

             }             
      });
};

//grab points//

//loop over the points on your line//
for(var x in "[linename]".geometry.paths[0]){

 var pt1 = "[linename]".geometry.paths[0]; 
 var pt2 = "[linename]".geometry.paths[0][x-1]; 

 var point = new esri.geometry.Point(pt1);
 var arrowGraphic =  new esri.Graphic(point, arrow(pt1,pt2));

//angle function//

var setAngle = function (p1, p2){
        var rise = p2[1] - p1[1];
        var run = p2[0] - p1[0];
        var angle = ((180/Math.PI) * Math.atan2(run, rise))
  return angle-180;
}

Hope this helps.

Re: Arrow heads on lines

StephenLead — Fri, 22 Mar 2013 00:51:12 GMT

Very nice workaround - thanks for sharing.

Re: Arrow heads on lines

AR — Tue, 26 Mar 2013 14:48:16 GMT

Thanks! 😉

Re: Arrow heads on lines

JasonZou — Wed, 09 Oct 2013 17:41:09 GMT

Hi roessera, how do you assign the triangle to text like text : "�?�"? When I copy the triangle and paste to the code and try to save the change, I got the attached error. But if I use the unicode like text : "▲", it will display just like ▲, not the triangle.
[ATTACH=CONFIG]28194[/ATTACH]

Re: Arrow heads on lines

NickCameron2 — Sat, 22 Aug 2015 13:59:26 GMT

Hi guys,

I know this is super old - I've been using A R's solution for a while, which works great, thanks! Eventually needed some more flexibility and wanted to create symbols with direction in a single class - so created a custom line symbol to handle this. On github here:

nickcam/DirectionalLineSymbol · GitHub

It may help.

Thanks,

Nick

Re: Arrow heads on lines

MihkelMänna — Sun, 27 Dec 2015 14:14:17 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: Arrow heads on lines

RobertScheitlin__GISP — Sun, 27 Dec 2015 21:20:46 GMT

Mihkel,

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

Re: Arrow heads on lines

MihkelMänna — Sun, 27 Dec 2015 21:59:25 GMT

Thanks for the reply, Robert!

So does this mean that all the graphics that I want to print had to be disguised as some type of ESRI symbols? Would it make sense to convert the SVG paths to PNG data URIs and then to ESRI's PictureMarkerSymbols? Are there any other possible workarounds?

Thanks,

Mihkel

Re: Arrow heads on lines

RobertScheitlin__GISP — Sun, 27 Dec 2015 22:55:09 GMT

Mihkel,

Graphics are converted to json when they are sent to the print service and the print service attempts to draw these graphics on the map server side so all the graphics have to be in some format that the server understands (i.e standard graphics). Using a custom graphics type like Nick's will cause an error as the server does not know how to handle it. You would have to sent all standard graphics like a simple line with a point graphic for the arrow head using the lines beginning point as the geometry and assign the proper rotation to the point using math calculations for the line angle. I believe that a comment was made on the other thread you are following and some code provided that should work.

Re: Arrow heads on lines

NickCameron2 — Sun, 27 Dec 2015 22:58:05 GMT

Hi Mihkel,

I never tested it with the print widget...I'm not surprised it doesn't work actually.

Will take a look, it's something I may need soon as well - won't be able to for a couple of weeks though unfortunately.

If you raise an issue on the github page describing the problem, that would be helpful...mainly as a reminder to take a look :).

Thanks,

Nick

Re: Arrow heads on lines

NickCameron2 — Thu, 14 Jan 2016 03:11:58 GMT

Hi Mikhel,

Have updated the github repo. It should be working ok now. Just refactored to use standard SimpleMarkerSymbols for the directional symbols with custom paths. Alternatively you can pass in you're own SimpleMarkerSymbol or PictureMarkerSymbol as part of the constructor options.

Had to override some toJson methods to keep the print task happy as well.

Thanks,

Nick

Re: Arrow heads on lines

RobertScheitlin__GISP — Tue, 12 Jul 2016 14:08:26 GMT

Jason,

You need to use the unicode representation: '\u25BC'

Re: Arrow heads on lines

roshnibasu — Mon, 03 Apr 2017 14:03:33 GMT

Hi,

I could somehow add arrows to the lines. But when I zoom in zoom out, the arrow positions keep changing. How to handle this?