Get latitude and longitude points along a line between two points, by percentage

Question

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

IMAGE

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

Answer 1

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/

Answer 2

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)];
   }