1
votes

In the image below, you can see that there 3 lines drawn from one point (the black circle) to its 3 related points ().

IMAGE

enter image description here

QUESTION

How to calculate latitude and longitude point between points along each line, using a percentage of the distance between the two points?

For example, if I wanted to get the position to be able to draw additional circles along each line with a 20% difference?

WHAT CODE I HAVE NOW

var data = [
  { "coords" : [ 53.409045, -2.985406 ]},
  { "coords" : [ 53.408747, -2.982862 ]},
  { "coords" : [ 53.407630, -2.984136 ]},
  { "coords" : [ 53.407142, -2.986931 ]}
];


var pointA = new L.LatLng(53.409045, -2.985406);
var pointB; 

data.forEach(function(d) {
  pointB = new L.LatLng(d.coords[0], d.coords[1]);
  L.polyline([pointA, pointB]).addTo(map);
  L.circle([d.coords[0], d.coords[1]], 10).addTo(map);
});

The only things the code above is doing is drawing a circle for each point and a line from the main circle (pointA) to the other circles (pointB)

I pretty much need to know how to calculate multiple coordinates, by percentage of distance, between the pointA and and its related points.

I need to make sure all green circle are the same distance from the center circle

CODEPEN TO TEST WITH

Codepen Link

EDIT - IMAGES OF WHAT i HAVE SO FAR USING THE CORRECT ANSWER BELOW

enter image description here enter image description here

2
For your searching work, the points you're looking for are known as "waypoints" along a Great Circle Route.O. Jones
@OllieJones Thanks. I know how to get the distance. between the two points now. So I now need to figure out how to get the "waypoint" based on a percentage of the distance? Do you know of any links to help with the calculation for this?Alan
Here: en.wikipedia.org/wiki/… Notice linear interpolation will work acceptably well if you're tracing a line from your apartment to the local supermarket, but terribly if you're going from New York to New Delhi.O. Jones
@OllieJones Thanks for the advice and linkAlan

2 Answers

6
votes

See this page for your different equations. http://www.movable-type.co.uk/scripts/latlong.html

  1. Get distance and bearing from origin to destination.
  2. Convert percentage to distance in the applicable units.
  3. Use bearing from #1, distance from #2 and origin to get resulting location

    function destination(lat, lon, bearing, distance) {
        var R = 6378.1, lat, lon, latDest, lonDest;
    
        // convert to radians
        lat = lat * (Math.PI / 180);
        lon = lon * (Math.PI / 180);
        bearing = bearing * (Math.PI / 180);
    
        latDest = Math.asin(Math.sin(lat) * Math.cos(distance / R) +
            Math.cos(lat) * Math.sin(distance / R) * Math.cos(bearing));
    
        lonDest = lon + Math.atan2(Math.sin(bearing) * Math.sin(distance / R) * Math.cos(lat),
                Math.cos(distance / R) - Math.sin(lat) * Math.sin(latDest));
    
        return [latDest * (180 / Math.PI), lonDest * (180 / Math.PI)];
    }
    
3
votes

Warning : this works on a linear coordinates. As Ollie Jones mentioned, while this is a reasonable approximation for short distances (or for certain cases depending on your projection), this won't work for long distance or if you want a very accurate point at percent

The function you are looking for is pointAtPercent. Red is the start point (your center circle) and green the end point (your end circles)

var ctx = document.getElementById("myChart").getContext("2d");

function drawPoint(color, point) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI, false);
    ctx.fill();
}

function drawLine(point1, point2) {
    ctx.strokeStyle = 'gray';
    ctx.setLineDash([5, 5]);    
    ctx.beginPath();
    ctx.moveTo(point1.x, point1.y);
    ctx.lineTo(point2.x, point2.y);
    ctx.stroke();    
}


function pointAtPercent(p0, p1, percent) {
    drawPoint('red', p0);
    drawPoint('green', p1);
    drawLine(p0, p1);

    var x;
    if (p0.x !== p1.x)
        x = p0.x + percent * (p1.x - p0.x);
    else
        x = p0.x;

    var y;
    if (p0.y !== p1.y)
        y = p0.y + percent * (p1.y - p0.y);
    else
        y = p0.y;

    var p = {
        x: x,
        y: y
    };
    drawPoint('blue', p);

    return p;
}


pointAtPercent({ x: 50, y: 25 }, { x: 200, y: 300 }, 0.2)
pointAtPercent({ x: 150, y: 25 }, { x: 300, y: 100 }, 0.6)
pointAtPercent({ x: 650, y: 300 }, { x: 100, y: 400 }, 0.4)

Fiddle - https://jsfiddle.net/goev47aL/