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

any luck figuring it out! ? – mireille raad Feb 26 '15 at 02:11 — mireille raad, Feb 26 '15 at 02:11
yes i answered this ques below. Thanks for asking :) – Pushpender Mar 27 '15 at 09:23 — Pushpender, Mar 27 '15 at 09:23

Daniel · Accepted Answer · 2015-03-04T23:17:02.860

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.

@Kerndog73 thanks guys for your answers :) i know i am very late — Pushpender, Mar 27 '15 at 08:48

Indiana Kernick · Answer 2 · 2015-02-26T02:48:07.790

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.

score 0 · Answer 3 · answered Mar 27 '15 at 09:06

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

}

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

3 Answers3

Linked