Web Mercator Projection

In case you have ever wondered what math is sitting behind the fancy coordinates like $(50.06 \degree, 19.93 \degree)$ and what it takes to transform it to meters – here are the answers.

Worth knowing

If you don't know much about the coordinates and projection (and because you are reading this – chances are you don't) here are some useful facts.

A term Reference ellipsoid was coined to describe the shape of the earth – surprisingly not a sphere, but a slightly flattened one. Geodetic datum is this famous coordinate system involving longitude ($\lambda$) and latitude ($\phi$) that you may have come across.

The Mercator projection focuses on the representation of angles (as it is a cylindrical projection). It also makes the whole ellipsoid a perfect square. But it does it at the cost of the South and North Poles, limiting the latitude to $\pm85.0511\degree$

What makes Web Mercator different from the classic one is that while it uses the same coordinates from the WGS84 standard, it projects them as if they were defined on a sphere. It might sound like a bad idea to completely abandon the notion of Earth being not a perfect sphere. But as it turns out, it doesn't really matter compared to the distortion created by the Mercator itself. And as you can believe, it greatly simplifies computation.

If you started to wonder whether maybe you should use the classic one, keep in mind that the Web Mercator is used by, just to name a few, Google Maps, Bing Maps, Apple Maps, Open Street Maps. This is definitely the one you want to use if you have no clear reason otherwise.

The formulas

Now the most interesting part – the formulas for translating degrees to meters.

Variables

$a$ – semi-major axis of the ellipsoid (radius at the Equator)
$e$ – eccentricity of the ellipsoid (shape of the ellipsoid)\

$\phi$ – latitude (in radians)

$\lambda$ – longitude (in radians)

Classic Mercator

Web Mercator

The JavaScript code for doing the conversion using Web Mercator goes like this (it includes conversion from degrees to radians):

const RADIUS = 6378137.0;

function degreesToMeters(lat, lng) {
  return {
    x: (RADIUS * lng * Math.PI) / 180.0,
    y: RADIUS * Math.atanh(Math.sin((lat * Math.PI) / 180.0)),
  };
}

If you wanted to convert back, from meeters to degrees, here is an inverted function:

function metersToDegrees(x, y) {
  return {
    lng: ((x / RADIUS) * 180.0) / Math.PI,
    lat: (Math.asin(Math.tanh(y / RADIUS)) * 180.0) / Math.PI,
  };
}

Cool resources

NGA's Position on 'Web-Mercator' – I owe them the most readable formulas for conversion on the Internet.

Implications of Web Mercator and Its Use in Online Mapping – cool paper that taught me the difference between the (Web) Mercator.

Wolfram Alpha on the inverse of hyperbolic tangent – thanks to them I learned about the atanh() and stopped converting $\tanh^{-1}$ to other form using $\ln$.