Add the textSymbol to the center of polyLine

4871
10
12-19-2014 01:43 AM
SunilKalagata
New Contributor

Hi,

I would like to print a textSymbol on center of the ployLine using the Longitude and Latitude.

I Have written the below code, but Unable to print the textSymbol.

var labelGraphic = null;

var startX = lLong[0];// These are string values

var endX = lLong[lLong.length-1];

var startY= lLat[0];

var endY = lLat[lLat.length-1];

var midPointX = ((endX - startX) / 2);

var midPointY = ((endY - startY) / 2);

var font = new Font("12px", Font.STYLE_NORMAL, Font.STYLE_NULL, Font.VARIANT_NORMAL, Font.WEIGHT_NULL, "Arial");  

var pipePoint = new Point(((parseFloat(lLong[0]))+midPointX ) , ((parseFloat(lLat[0]))+ midPointY), map.spatialReference);

// create a text symbol 


var textSymbol = new TextSymbol("LABEL TEXT!!!", font, new Color([0, 0, 0])); 

labelGraphic = new Graphic(pipePoint, textSymbol);

if (labelGraphic != null)

        map.graphics.add(labelGraphic);

Please help me how to add the textSymbol to the polyline.

0 Kudos
10 Replies
HeikoHeijenga
Esri Contributor

Try to use the midpoint formula:

midpoint.png

(this of course only works if you're dealing with straight lines)

0 Kudos
SunilKalagata
New Contributor

Thankyou for help. But here my polyLine is dynamically changes the direction. I want to display the text along with the line. How do I do that?

Even I tried with

textSymbol.setVerticalAlignment()/ setHorizontalMethods also.

0 Kudos
HeikoHeijenga
Esri Contributor

Calculate the angle of the line and set the rotation of the text symbol accordingly.

0 Kudos
SunilKalagata
New Contributor

Is there any example to calculate the PolyLine angle?

0 Kudos
HeikoHeijenga
Esri Contributor

Are your lines straight lines or real polylines?

0 Kudos
SunilKalagata
New Contributor

Real polylines, we are drawing those using latitude and longitude.

0 Kudos
TyroneLigon
Occasional Contributor

I got this from an earlier post and used it to place an "arrow" (actually the letter "V") at the center of a polyline. Using your variables:

var rise = endX - startX;

var run = endY - startY;

var angle = (180/Math.PI) * Math.atan2(run,rise);

...

textSymbol.angle = angle;

0 Kudos
SunilKalagata
New Contributor

Hi Tyrone,

Thank you for your update. But here I am using Latitude and Longitude to draw my polyLine.

Please help us to find the angle for PloyLine.

Thankyou!!

0 Kudos
JoshHevenor
Occasional Contributor II

You can convert lat/long to XY

esri/geometry/webMercatorUtils | API Reference | ArcGIS API for JavaScript

You might consider using a label layer instead?

0 Kudos