Calculate distance between pins on a map using Javascript

Updated by Tom Wells on

Calculating the distance between pins or markers on a map? It sounds complicated, right? Well, it is. But, thankfully, there is a well-known and tested formula for calculating this called the haversine formula. This formula uses latitudes and longitudes to determine the distance between two points on a sphere (in our case, the Earth!) using trigonometry. In this tutorial, we'll see how we can apply this formula using javascript in a performant way.

There is a small caveat in this case. The Earth is not a perfect sphere (it is, in fact, an oblate spheroid) so the formula is using the mean radius.

The function

The distanceBetween function below implements the haversine formula in a single function:

const distanceBetween = (lat1, long1, lat2, long2) => {
  // Earth's radius in metres (mean radius = 6,371km)
  const radius = 6371e3

  // Angles need to be radians to pass trig functions!
  const lat1Radian = (lat1 * Math.PI) / 180
  const lat2Radian = (lat2 * Math.PI) / 180
  const latDelta = ((lat2 - lat1) * Math.PI) / 180
  const longDelta = ((long2 - long1) * Math.PI) / 180

  // The square of half the chord length between the points
  const a =
    Math.sin(latDelta / 2) * Math.sin(latDelta / 2) +
    Math.cos(lat1Radian) *
      Math.cos(lat2Radian) *
      Math.sin(longDelta / 2) *
      Math.sin(longDelta / 2)

  // Angular distance in radians
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))

  // Distance is the radius * angular distance
  const distance = radius * c
  return distance
}

The above function accepts two sets of latitudes and longitudes and calculates the distance between them in metres. To change the unit of distance, simply change the radius value. For example, kilometres would be 6371.

How it works

At this point, the internals of the function likely looks a bit like witchcraft. But, the function can be broken down fairly easily:

  • The value of radius is the mean radius of the Earth in the distance unit of choice (in this case, metres).
  • The second variables "block" calculates the radian values of the latitudes along with the deltas of the latitudes and longitudes.
  • The a variable is the square of half the chord length between the points. The "chord length" is a line segment connecting any two points on the circumference of a circle. To get this value, we use some trigonometry functions.
  • The c variable is the angular distance in radians.
  • Finally, the radius is multiplied by the angular distance in radians to return the distance in the distance unit of choice.

I realise there is some advanced mathematics (or at least, advanced to me!) involved, but it's merely a case of breaking down the haversine formula into workable chunks in javascript. Any formula can be converted using the built-in Javascript Math functions with relative ease, and the functions themselves provide reliable performance and precision.

Wrapping up

That about covers the haversine formula and how to implement it in Javascript. Feel free to copy the function into your own code, it works well with both Google Maps and Mapbox, allowing you to display the distance between two markers.

I hope you found this useful and if you have any questions, don't hesitate to contact me on Twitter.

maps