topic Re: Find a point at a given distance along a line in Web AppBuilder Custom Widgets Questions

Find a point at a given distance along a line

GregRieck — Wed, 28 Dec 2016 20:13:59 GMT

Hello everyone,

Does anyone have any experience with or sample code or sample geoprocessing events etc. that will return a point X,Y along a line (polyline) given a specific distance? For example if the polyline is 1000 feet long I want to know where along that line 250 feet is from it's starting vertex. I want the results as a point string format {"x" : -118.15, "y" : 33.80, "spatialReference" : {"wkid" : 4326}} so I can mark that location with an image on the web site.

Thank You,

Greg

Re: Find a point at a given distance along a line

RebeccaStrauch__GISP — Wed, 28 Dec 2016 20:30:52 GMT

I wonder if this would be a good starting point...

https://community.esri.com/docs/DOC-9065-traverse-widget-220

find this, other custom widgets and other announcements from the community

/blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list?sr=search&searchId=d596b683-e0bc-40e8-b42c-d3260d0e6c94&searchIndex=0‌

Re: Find a point at a given distance along a line

GregRieck — Thu, 29 Dec 2016 16:33:08 GMT

Rebecca,

Thank you for your reply.

No that's not quite what I'm looking for. Something more along the lines of this:

Polyline—Help | ArcGIS Desktop search for positionAlongLine.

I'm looking for the point location along a line. If I provide the polyline feature and a distance it should return the point along the line at that distance. It should take into consideration any curve of the line. The point location will then be used to mark the position on the line where the point occurs.

I'm thinking I need to do this as a geoprocessing service for JS to be able to access it. I've do not have any experience in ArcPy or creating a service for JS to access. I was hoping someone might have utilize the positionAlongLine method in ArcPy and be willing to share their script. That would be a huge start for me. Meanwhile I'm reading and attempting to create this script on my own.

Greg

Re: Find a point at a given distance along a line

RebeccaStrauch__GISP — Thu, 29 Dec 2016 17:53:46 GMT

A GP service was going to be my next suggestion. I have used positionAlongLine in arcpy scripts, but never as a GP service. For example, taking a contour and creating a transect for 1/2 a given length, from the centroid (and shifting if needed), so probably more than what you are needing. But I seem to always have to convert the line to a route.

Re: Find a point at a given distance along a line

TomSellsted — Fri, 30 Dec 2016 00:44:30 GMT

Greg,

I have a sample that may work the way you are suggesting. Please take a look at:

Position Along

It is completely client based, so no geoprocessing scripts required.

Regards,

Tom

Re: Find a point at a given distance along a line

RebeccaStrauch__GISP — Fri, 30 Dec 2016 00:54:41 GMT

I like it! Do you have code you can share? .....or is it already a widget you have out there?

It looks to work with graphics you draw. Do you think it can be modified to work with a feature from a layer? Maybe have to grab and copy first? I could see when this might be useful for some of my projects.

Edit:

Tom Sellsted

I noticed that if I change the value in the box, the slider does not change. Just fyi.

Also, my numeric pad was acting strange, sometimes taking the numbers, sometimes using the directional functions. btw - using a Desktop Win7, using Firefox, num lock was on. Since it is client side, my guess is it is a client side (user) error/problem.. Again, just an fyi.

Re: Find a point at a given distance along a line

TomSellsted — Fri, 30 Dec 2016 01:02:16 GMT

Rebecca,

You can certainly do a "View Source" in your browser to look at the code. It is not a widget. It could be any polyline feature in your app. The demo here allows you to key in a specific value or use the slider to calculate a percent of the total length of the polyline.

There are five functions that do the calculation for placing the point along the polyline. About 90 lines of code. It can be easily modified for your purposes.

Regards,

Tom

Re: Find a point at a given distance along a line

GregRieck — Fri, 30 Dec 2016 19:37:33 GMT

Thank You Tom.

I think I can extract what I need from what you have provided to create a result that gives me a point X,Y that I can use to mark my location.

Greg

Re: Find a point at a given distance along a line

TomSellsted — Tue, 03 Jan 2017 18:21:42 GMT

Greg,

You are welcome! I had used this method for placing arrows that represent bus locations based on their current schedule. The original code was in ActionScript, but works well in JS too.

Regards,

Tom

Re: Find a point at a given distance along a line

GregRieck — Fri, 06 Jan 2017 01:28:35 GMT

Tom,

Having a small issue. I'm positive its a spatial projection issue. My data is in 26912

NAD83 / UTM zone 12N: EPSG Projection -- Spatial Reference

How can I get this working with my spatial reference? The big difference here is I am querying a polyline from my database and using that as the "var pl" variable. Instead of coming from a line drawn on the map like you do.

Greg

Re: Find a point at a given distance along a line

TomSellsted — Fri, 06 Jan 2017 16:44:24 GMT

Greg,

Is the basemap in your app also in that projection? or is it web mercator? If your basemap is in web mercator, you can set the outSpatialReference for the query to web mercator. Something like:

query.outSpatialReference = new SpatialReference(102100);

Regards,

Tom

Re: Find a point at a given distance along a line

TomSellsted — Fri, 06 Jan 2017 16:56:08 GMT

Greg,

There was also a post from a couple of years ago that uses a similar method, but might work on your projection.

https://community.esri.com/servlet/JiveServlet/download/525576-1-135992/pointAlongLine.txt.zip

Regards,

Tom

Re: Find a point at a given distance along a line

GregRieck — Fri, 06 Jan 2017 19:24:51 GMT

Tom,

Thanks for the response, I was able to figure it out and get it working. Still doing some final testing but it's looking great. Again thanks for posting that project it was exactly what I needed.

Greg

Re: Find a point at a given distance along a line

TomSellsted — Fri, 06 Jan 2017 19:29:56 GMT

Greg,

You are welcome! Glad you got things working!

Regards,

Tom

Re: Find a point at a given distance along a line

YueWu1 — Fri, 06 Jan 2017 22:25:09 GMT

Good stuff！

Re: Find a point at a given distance along a line

GregRieck — Mon, 20 Mar 2017 14:52:12 GMT

Tom,

I have found a small issue with this method. It seems to always determine the position of the point along the line starting from the "From" point of the line. In some cases I need it to start from the other end of the line the "To" point of the line. How can I change the calculatePositionAlong so that it starts from the TO position and works toward the FROM position? I'm pretty sure I can come up with something that can be used to determine which way to start from.

Greg

Re: Find a point at a given distance along a line

TomSellsted — Sun, 12 Dec 2021 10:22:10 GMT

Greg,

Probably the simplest solution would be to reverse the order of the path points in the polyline used. I have updated my example to show how to do this. Here is a function that will reverse the path order:

function reversePolylineOrder() {
     var newPL = new Polyline(map.spatialReference);
     var newPath = [];
     for (var i = pl.paths[0].length - 1; i >= 0; i--) {
          newPath.push(pl.getPoint(0, i));
     }
     newPL.addPath(newPath);
     pl = newPL;
}‍‍‍‍‍‍‍‍‍

Regards,

Tom

Re: Find a point at a given distance along a line

GregRieck — Mon, 20 Mar 2017 23:31:47 GMT

Tom, thank you for the continued support. This is where I got with what you provide me.

I got a few errors and fixed those by adding geometry as indicated below. However, after I assign pl = newPL, pl has no geometry. Which is important because calculatePositionAlong uses it:

arrayUtils.forEach(pl.geometry.paths[0], function (coords) {

And I use it to create a new graphic used to display myimage at the found point along the line,

var graphic = new Graphic(pl.geometry, myimage);

var newPL = new Polyline(map.spatialReference);
var newPath = [];
for (var i = pl.geometry.paths[0].length - 1; i >= 0; i--) {
newPath.push(pl.geometry.getPoint(0, i));
}
newPL.addPath(newPath);
pl = newPL;

How can I make sure pl has geometry?

Greg

Re: Find a point at a given distance along a line

TomSellsted — Tue, 21 Mar 2017 17:19:06 GMT

Greg,

Sorry for the late reply. I am on the road today and have limited access to the internet.

I would set a breakpoint on the last line and then you can examine the values for both the pl and newPL variables. The code looks correct, the pl variable may not have a value set.

Regards,

Tom

46° 36' 17.86"N 120° 30' 18.23"W