How to move a marker on a straight line between two coordinates in Mapbox.js

Question

Below is some code I found for moving a marker but I want to move a marker on straight path between two coordinates can any one help these are the coordinates

[90.40237426757811,23.75015391301012],[88.34930419921875,22.573438264572406] 

I need the coordinates between these two points for a line. The code is:

var marker = L.marker([0, 0], {

  icon: L.mapbox.marker.icon({
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-77, 37.9]
    },
    properties: { }
  })
});

var t = 0;
window.setInterval(function() {

  // making a lissajous curve here just for fun. this isn't necessary
  // Reassign the features
  marker.setLatLng(L.latLng(
    Math.cos(t * 0.5) * 50,
    Math.sin(t) * 50));
  t += 0.1;
}, 50);

marker.addTo(map);

Answer 1

How accurate do you need the lines to be? Try something like this to begin with:

var start = {lat:90.40237426757811, lng:23.75015391301012}
var end = {lat:88.34930419921875, lng:22.573438264572406}
var n = 100; // the number of coordinates you want

coordinates = []
for(var i = n - 1; i > 0; i--){
    coordinates.push( {lat: start.lat*i/n + end.lat*(n-i)/n,
                       lng: start.lng*i/n + end.lng*(n-i)/n}); 
}

This isn't accurate because the world isn't flat and over long distances it will begin to look wrong.

The full maths of plotting straight lines on projected globes is more difficult but there's a great explanation here: http://www.movable-type.co.uk/scripts/latlong.html Not far down the page there's a formula to calculate the midpoint of two given points.

Use that formula, then use the midpoint you've found with each end point to find two more points then use those points and so on until you have enough for a smooth line.

Answer 2

This might help. It draws a line between two points on a 2d plane.

fromXy and toXy are arrays containing the coordinates.

pref.canvas.size is and array containing the width and height of the canvas.

pref.color is the color of the pixel you want to print.

setPx() sets a pixel given x and y coordinates and color.

function line(toXy,fromXy) {
  var y;
  var m = (toXy[1] - fromXy[1]) / (fromXy[0] - toXy[0]);
  var b = (m * toXy[0]) + toXy[1];
  if (Math.abs(fromXy[0] - toXy[0]) >= Math.abs(fromXy[1] - toXy[1])) {
    if (fromXy[0] < toXy[0]) {
      for (var x = fromXy[0]; x <= toXy[0]; x++) {
        y = m * x - b;
        setPx(x,Math.abs(Math.round(y)),pref.color,);
      }
    } else {
      for (var x = fromXy[0]; x >= toXy[0]; x--) {
        y = m * x - b;
        setPx(x,Math.abs(Math.round(y)),pref.color)
      }
    }
  } else {
    if (fromXy[1] <= toXy[1]) {
      for (y = fromXy[1]; y <= toXy[1]; y++) {
        x = (y / -(m)) + Math.abs(b / -(m));
        if (x.toString() == 'Infinity' || x.toString() == 'NaN') {
          x = fromXy[0];
        }
        if (x > pref.canvas.size[0] - 1) {
          continue;
        }
        setPx(Math.abs(Math.round(x)),y,pref.color);
      }
    } else {
      for (y = fromXy[1]; y >= toXy[1]; y--) {
        x = (y / -(m)) + Math.abs(b / -(m));
        if (x.toString() == 'Infinity' || x.toString() == 'NaN') {
          x = fromXy[0];
        }
        if (x > pref.canvas.size[0] - 1) {
          continue;
        }
        setPx(Math.abs(Math.round(x)),y,pref.color);
      }
    }
  }
}

The code basically builds a linear equation out of the two coordinates then graphs that linear equation.

You should be able to edit the code so that it fits your needs pretty easily.

Answer 3

Thank you all for your useful answers :) I used the below code for my use case, its not fully correct and with lot of hard-coding too but it worked fr me here is the link of mock-up app which i developed using this http://nandinibhotika.com/compass/discover.htm here is the project description http://nandinibhotika.com/portfolio/compass-exploring-stories/

var geojson = {

type: 'LineString',

coordinates: []

},

start = [90.4010009765625, 23.74763991365265];

geojson.coordinates.push(start.slice());

momentum = [.025, .01429];

for (var i = 0; i < 557; i++) {

if (start[0] > 88.36878921508789 && start[1] > 22.571377617836507) {

    start[0] -= momentum[0];

    start[1] -= momentum[1];

} else {

    momentum = [.00899, .0231];

    start[0] += momentum[0];

    start[1] -= momentum[1];

}

geojson.coordinates.push(start.slice());

}