topic Point along a line in ArcGIS JavaScript Maps SDK Questions

Point along a line

thejuskambi — Tue, 02 Jun 2015 18:34:59 GMT

I am creating a web application, using javascript api and the requirement is to get a point on the line based on certain distance. If you have worked with ArcObject, then you would have used the QueryPoint method in IPolyline. Does anybody know how this can be achieved in javascript api.

Thanks in advance.

Re: Point along a line

RobertScheitlin__GISP — Tue, 02 Jun 2015 18:42:53 GMT

Thejus,

The JS API does not contain any functionality like this currently. What I suggest is create a GP service for this.

Re: Point along a line

thejuskambi — Tue, 02 Jun 2015 19:04:07 GMT

Hello Robert,

I am aware the js api does not have such functionality currently. But, isnt there a way to achieve this without having to use GP service. some sort of calculation or sort. Surely somebody would have needed or implemented this functionality.

Re: Point along a line

RobertScheitlin__GISP — Tue, 02 Jun 2015 19:11:48 GMT

Thejus,

I have seen a couple of people ask this question over the last couple of years and no one has come up with a way to do it clientside (unless they just choose not to share).

Re: Point along a line

JoelBennett — Sat, 11 Dec 2021 21:09:14 GMT

Based on code I found here:

c# - get closest point to a line - Stack Overflow

I have implemented the following function, which has been working well. As you can see, it is entirely client-side, and I have assigned the function to the Polyline "type" so I can simply call polyline.getClosestPoint(etc), but you can make it a standalone function like:

function getClosestPoint(polyline, point) {

//code

}

...and changing "this" to "polyline".

   Polyline.prototype.getClosestPoint = function(point) {
    var closestDistance = Number.MAX_VALUE;
    var closestPoint = null;
    var abapProduct;
    var sqMagnitude;
    var distance;
    var vectorAP;
    var vectorAB;
    var pointA;
    var pointB;
    var pointC;
    for (var pathIndex = 0; pathIndex < this.paths.length; pathIndex++) {
     for (var pointIndex = 1; pointIndex < this.paths[pathIndex].length; pointIndex++) {
      pointA = this.getPoint(pathIndex, pointIndex);
      pointB = this.getPoint(pathIndex, pointIndex - 1);
      vectorAP = [point.x - pointA.x, point.y - pointA.y];
      vectorAB = [pointB.x - pointA.x, pointB.y - pointA.y];
      sqMagnitude = Math.pow(vectorAB[0], 2) + Math.pow(vectorAB[1], 2);
      abapProduct = (vectorAB[0] * vectorAP[0]) + (vectorAB[1] * vectorAP[1]);
      distance = abapProduct / sqMagnitude;
      if (distance < 0)
       pointC = pointA;
      else if (distance > 1)
       pointC = pointB;
      else
       pointC = new Point(pointA.x + (vectorAB[0] * distance), pointA.y + (vectorAB[1] * distance), this.spatialReference);
      distance = pointC.distanceTo(point);
      if (distance < closestDistance) {
       closestDistance = distance;
       closestPoint = pointC;
      }
     }
    }
    return closestPoint;
   };

Re: Point along a line

JoelBennett — Sat, 11 Dec 2021 21:09:17 GMT

I just realized that included a call to another custom function - distanceTo. Here's the function definition:

   Point.prototype.distanceTo = function(point) {
    return Math.sqrt(Math.pow(this.x - point.x, 2) + (Math.pow(this.y - point.y, 2)));
   };

Re: Point along a line

JeffJacobson — Thu, 04 Jun 2015 00:25:22 GMT

There is a library called turf that is supposed to allow you to do this. (Note that I haven't tried it myself, though.) Since turf uses GeoJSON, you can use Terraformer to convert from ArcGIS geometries to GeoJSON.

Re: Point along a line

JoelBennett — Sat, 11 Dec 2021 21:09:20 GMT

So I noticed I answered a question you didn't ask...I should keep that in mind next time somebody does the same to me.

Anyhow, try this, which is also entirely client side. I've attached a copy since this forum software eliminates my extra line breaks.

Note that I've tested this against ESRI's Measure widget, and concluded the Measure widget doesn't work properly. I've hand calculated the distance between two points after acquiring their coordinates from the map, and it's quite a bit different from what the Measure tool measures between those points. I tested with data in Web Mercator...not sure if that would make a difference.

As such, I think this works properly. It assumes a few things, like a valid polyline with at least one path that has at least 2 points. It returns null if the distance is greater than the path's length, or if the distance is negative.

function distanceBetweenPoints(x1, y1, x2, y2) {
 return Math.sqrt(Math.pow(x2 - x1, 2) + (Math.pow(y2 - y1, 2)));
}
function getPointAlongLine(polyline, distance, pathIndex) {
 if (!pathIndex)
  pathIndex = 0;
 if (!distance)
  distance = 0;
 if ((pathIndex >= 0) && (pathIndex < polyline.paths.length)) {
  var path = polyline.paths[pathIndex];
  var x1, x2, x3, y1, y2, y3;
  var travelledDistance = 0;
  var pathDistance;
  var distanceDiff;
  var angle;
  if (distance === 0)
   return polyline.getPoint(pathIndex, 0);
  else if (distance > 0) {
   for (var i = 1; i < path.length; i++) {
    x1 = path[i-1][0];
    y1 = path[i-1][1];
    x2 = path[0];
    y2 = path[1];
    pathDistance = this._distanceBetweenPoints(x1, y1, x2, y2);
    travelledDistance += pathDistance;
    if (travelledDistance === distance)
     return polyline.getPoint(pathIndex, i);
    else if (travelledDistance > distance) {
     distanceDiff = pathDistance - (travelledDistance - distance);
     angle = Math.atan2(y2-y1, x2-x1);
     x3 = distanceDiff * Math.cos(angle);
     y3 = distanceDiff * Math.sin(angle);
     return new Point(x1 + x3, y1 + y3, polyline.spatialReference);
    }
   }
  }
 }
 return null;
}

Re: Point along a line

thejuskambi — Mon, 08 Jun 2015 13:20:02 GMT

This is exactly what I was looking for. Thanks Joel.

Re: Point along a line

FredSpataro — Fri, 12 Aug 2016 15:05:30 GMT

Hi Joel,

Thanks for posting this function. It should be in the API.

FYI the measurement widget works with "geodesic" math so that you get "true/real world" lengths and areas. The Web Mercator system makes a "nice" picture for web maps but it's really bad for calculating length and area (almost double at the US level latitudes).