Equal Earth on the GPU

An interactive world map in the Equal Earth projection
equal-area · WebGPU with a WebGL2 fallback · central meridian follows the view · morph from the globe

A globe shows only half of the Earth at a time. For the whole Earth on one sheet, Ortho Earth uses the Equal Earth projection (Šavrič, Patterson and Jenny, 2018): an equal-area pseudocylindrical projection, so every country is drawn at its true relative size. You can try it at /equal/, or open the globe on its Equal Earth side at /globe/?start=equal.

1. The projection in the shader

The world data (Natural Earth 10m borders, coasts, lakes, rivers and cities, read as Gint) is sent to the GPU once, in longitude and latitude. The projection itself is in the shader: the vertex stage turns each point into Equal Earth coordinates every frame. The same formulas run on the CPU only for the camera (the center, the anchor under the pointer, and the smallest zoom).

// Equal Earth (unit sphere). θ = parametric latitude, Δλ = longitude minus the central meridian
sin θ = (√3 / 2) · sin φ
y  = θ · (A1 + A2·θ² + θ⁶·(A3 + A4·θ²))
x  = Δλ · cos θ / ((√3 / 2) · (A1 + 3·A2·θ² + θ⁶·(7·A3 + 9·A4·θ²)))
// A1 = 1.340264, A2 = −0.081106, A3 = 0.000893, A4 = 0.003796

Both backends draw the same picture: WebGPU by default, WebGL2 when WebGPU is not there, compared against each other on a real GPU.

2. The central meridian follows the view

The central meridian is always the longitude at the center of the screen. Longitude enters the projection only as Δλ, the difference from that center, so when you scroll sideways the map is projected again around the new center: it goes on east and west without a seam, and the place you are looking at is always where the projection distorts least. Zoom and scroll never show empty space outside the map's outline.

3. A morph from the globe

In the globe pages, the Equal Earth map opens out of the globe you are looking at. Its first frame is the same globe, with the same camera, matched to the pixel; the sphere then unfolds into the Equal Earth sheet in a little over a second, and the map data loads while it moves. Right-click a point on the globe and choose to center the world map there; going back folds the sheet into a globe at your current view. Both run in the same page and share one engine, so nothing is loaded twice.

4. On the map

• Country and city names in 26 languages.
• Choropleths from the world ledger, or from your own CSV joined by country.
• Relief (GEBCO) and climate (Köppen) layers.

Coming from another library? See MapLibre GL JS code on a 3D globe and Coming from CesiumJS.