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

Question

Below is the code I found to move the marker, but I want to move the marker in a straight path between two coordinates, can anyone help these coordinates

[90.40237426757811,23.75015391301012],[88.34930419921875,22.573438264572406] 

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

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 are the lines to you? Try something like this:

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 is inaccurate because the world is not flat and over long distances it will start to look wrong.

, : http://www.movable-type.co.uk/scripts/latlong.html .

, , , , , .

Answer 2

. 2d.

fromXy toXy - , .

pref.canvas.size , .

pref.color - , .

setPx() , x y.

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

, .

, .

Answer 3

:) , , , http://nandinibhotika.com/compass/discover.htm http://nandinibhotika.com/portfolio/compass-exploring-stories/

var geojson = {

type: 'LineString',

coordinates: []

},

start = [90.4010009765625, 23.74763991365265];

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

= [.025,.01429];

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

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());

}