How it's built

Tissot is a map of the Earth that can turn into any of twelve flat maps, and show you what each one gets wrong. Everything runs in your browser; nothing is sent anywhere.

The maths

• Twenty-four map projections are written from scratch in TypeScript, each with its inverse. Where John Snyder's Map Projections: A Working Manual (a US government publication) gives a worked example for a projection, a test checks it; for the rest, tests check the published formulas, the published map shapes, and each map's own promises (equal area, true shape) on thousands of random points.
• Maps that claim to keep area really keep it, and maps that claim to keep shape really do: tests check this on thousands of random points, with formulas written separately from the code under test.
• Each circle you see is an exact small circle on the sphere, projected point by point, so large circles show the real, finite distortion. The numbers in the inspector come from the same projection's local scale in each direction.

The layers

• The heat maps colour every point of the map by how much its area is stretched or how far its shapes are bent. The numbers are found by measuring the map itself: Tissot nudges a point a hair in each direction and sees how the map moves.
• The dashed lines are isolines, traced by marching squares on a 360 by 180 grid of the globe in a background worker, so the line for twice-true-size on Mercator really does fall at 45 degrees.
• Routes draw the great circle, the shortest path, and the rhumb line, the path of constant compass bearing, and compare their lengths. Gnomonic draws every great circle straight; Mercator draws every rhumb line straight.
• Carry a country picks it up by rotating the globe underneath it, so its true size never changes while its size on the map does.
• The atlas formulas are written in native MathML, with no maths library.

The drawing

• The globe is one mesh of triangles, cut along the lobe edges for interrupted maps so their gaps are real gaps. Morphing blends two projections point by point, and dragging turns the sphere underneath, so any projection can be tilted.
• The map is drawn on the graphics card when it is trustworthy. At start-up a tiny test picture is drawn twice, once by the graphics card and once by a plain CPU version, and if they disagree Tissot quietly uses the CPU version. The map is never blank.
• The sea's water lining comes from an exact distance transform of the coastline, computed in a background worker.

Who was Tissot

Nicolas Auguste Tissot was a French cartographer. In 1859 and 1881 he showed that the distortion of a map at any point can be drawn as a small ellipse, which is why the circles on this map are called Tissot's indicatrices.

Data and licences

Coastlines come from Natural Earth, which is in the public domain, packaged as TopoJSON by the world-atlas project. Fonts are Source Serif 4 and Overpass, under the SIL Open Font License. Made with Natural Earth.

Made by Talha Munir.