Get coordinates of a free hand drawn polyline by user

1567
3
Jump to solution
01-18-2013 07:36 AM
DiegoCastillo1
New Contributor
Hello everybody,
I'm new here, and I have been using the esri javascript api for about 2 weeks now.

I have followed this example:

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/graphics_add

And I was able to draw a free hand polyline on the map. Now I need to calculate the coordinates of every single point on that polyline. I have been trying to do it for about 3 days now and I can't figure out how to do it. I would appreciate if any of you could explain me how to do it in detail (since I don't have too much experience).

Thanks in advance,

Diego.
0 Kudos
1 Solution

Accepted Solutions
DiegoCastillo1
New Contributor
The user "Juffy" helped me out on the stackoverflow forum, and finally got it to work. Here's how he taught me how to do it, if anyone is interested:

"You need to inspect the geometry object you get from the event onDrawEnd - this event is already being hooked in the example:

dojo.connect(tb, "onDrawEnd", addGraphic);

but all it does is add the line to the map with an basic symbol. The first trap is that the geometry object won't actually be of type geometry - that's an abstract base class that doesn't really exist. The type will depend on what tool you were using to draw the shape - in your case it sounds like it'll be of type Polyline.

This Polyline object has a property paths, which is a nested array of paths (lines), each of which contains an array of points. So if you wanted to get all the points of all the paths in a Polyline object:"

function addGraphic(geo) {     //For each path...     for ( var path = 0; path < geo.paths.length; path ++ ) {         //For each point in the path...         for ( var pt = 0; pt < geo.paths[path].length; pt++ ) {             //Do something with each point in here...             //X coordinate: geo.paths[path][pt][0]             //Y coordinate: geo.paths[path][pt][1]         }     } }


Thanks to you guys for helping me out too!
Cheers,

Diego.

View solution in original post

0 Kudos
3 Replies
TommyBramble
New Contributor III
What do you mean 'calculate the coordinates'?

You should have some type of 'onDrawEnd' event handling drawing your graphic feature on the map.  In this function you can read the geometry of the graphic and implement whatever custom logic you might need. 

Alternatively, you don't have to use this onDrawEnd handler.  You should be able to access the graphic geometry at any time through your graphicsLayer methods/properties.

If you are using the sample you stated, then inside the addGraphic function you can get access to the polyline coordinates via:

var polylinePointCollection = geometry.paths;
0 Kudos
BrettGreenfield__DNR_
Occasional Contributor II
This might not be the "correct" way to do it, but I wanted to accomplish the same thing and I borrowed from this sample.  Instead of creating a listening event for "onMouseMove" or "onMouseDrag", I listened for a mouse click to start a function that adds the coordinates to an array (make sure to clear the array at the start of the function!).  Then you can just add the elements of the array later to your info window or wherever you want them to go.
0 Kudos
DiegoCastillo1
New Contributor
The user "Juffy" helped me out on the stackoverflow forum, and finally got it to work. Here's how he taught me how to do it, if anyone is interested:

"You need to inspect the geometry object you get from the event onDrawEnd - this event is already being hooked in the example:

dojo.connect(tb, "onDrawEnd", addGraphic);

but all it does is add the line to the map with an basic symbol. The first trap is that the geometry object won't actually be of type geometry - that's an abstract base class that doesn't really exist. The type will depend on what tool you were using to draw the shape - in your case it sounds like it'll be of type Polyline.

This Polyline object has a property paths, which is a nested array of paths (lines), each of which contains an array of points. So if you wanted to get all the points of all the paths in a Polyline object:"

function addGraphic(geo) {     //For each path...     for ( var path = 0; path < geo.paths.length; path ++ ) {         //For each point in the path...         for ( var pt = 0; pt < geo.paths[path].length; pt++ ) {             //Do something with each point in here...             //X coordinate: geo.paths[path][pt][0]             //Y coordinate: geo.paths[path][pt][1]         }     } }


Thanks to you guys for helping me out too!
Cheers,

Diego.
0 Kudos