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; } } }

Arrow heads on lines

FredHejazi

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

Trouver plus de publications taguées avec

Accepted answers

All comments

roshnibasu

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?

rscheitlin

Jason,

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

MihkelMänna

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

rscheitlin

Mihkel,

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

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

NickCameron2

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

JasonZou

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]

error.png

Thanks! 😉

StephenLead

Very nice workaround - thanks for sharing.

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.

StephenLead

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.

FredHejazi

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.

StephenLead

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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