Web Mercator Projection

Coordinates of places around the world are given in latitude and longitude. They are expressed in degrees and look like this: $(50.06 \degree, 19.93 \degree)$ . This post is a short explanation of them and how to convert them to meters.

Worth knowing

A term Reference ellipsoid was coined to describe the shape of the Earth – almost a sphere but slightly flattened. Geodetic datum is the name of the coordinate system involving longitude ( $\lambda$ ) and latitude ( $\phi$ ).

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

On web, starting with Google Maps, another very similar projection, called Web Mercator, is used. What makes it different from the standard 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. Turns out, it doesn’t really matter compared to the distortion created by the Mercator itself. And it makes the math much easier.

Web Mercator is used by, just to name a few, Google Maps, Bing Maps, Apple Maps, Open Street Maps. Pretty much the whole web map industry. So unless for a special use case, there’s little reason to go back to the standard one.

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)

Mercator

x = a \lambda \\ y = a \tanh^{-1}(\sin\phi) - ae \tanh^{-1}(e\sin\phi)

Web Mercator

x = a \lambda \\ y = a \tanh^{-1}(\sin\phi)

The TypeScript 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: number, lng: number) {
  return {
    x: (RADIUS * lng * Math.PI) / 180.0,
    y: RADIUS * Math.atanh(Math.sin((lat * Math.PI) / 180.0)),
  };
}

If you want to convert back, from meters to degrees, here is an inverted function:

\lambda = \frac{x}{a} \\ \phi = \arcsin\left(\tanh\frac{y}{a}\right)

function metersToDegrees(x: number, y: number) {
  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$ .