JSXGraph Geography

Example 1

All twelve, with a morph between them

The buttons are laid out in the strip above the drawing area, which is what outerbox is for. The description below the map is read from the projection itself, so it cannot drift from what is drawn.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null
});

map.setProjection('equalearth', true);

Example 2

Equal Earth

Areas are true, and the continents stay recognisable.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'equalearth'
});

Example 3

Mollweide

Areas are true. The whole world fits in an ellipse; shapes are sheared badly towards its edges.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'mollweide'
});

Example 4

Hammer

Areas are true, with less shearing towards the edges than Mollweide.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'hammer'
});

Example 5

Sinusoidal

Areas are true and every parallel keeps its length.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'sinusoidal'
});

Example 6

Plate carrée

Longitude and latitude used directly as x and y.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'platecarree'
});

Example 7

Robinson

A compromise chosen by eye in 1963 — neither areas nor angles.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'robinson'
});

Example 8

Winkel tripel

A compromise as well; National Geographic's world map since 1998.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'winkel'
});

Example 9

Mercator

Angles are true and the meridians are parallel straight lines, so a constant course is a straight line. Areas grow without bound towards the poles, so it is cut at 84 degrees.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'mercator'
});

Example 10

Azimuthal equidistant

Distances from the centre are true, in every direction.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'azimuthalequidistant'
});

Example 11

Lambert azimuthal

Lambert azimuthal equal-area – Areas are true at any distance from the center; shapes are increasingly distorted away from it.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'azimuthalequalarea'
});

Example 12

Stereographic

Angles are true, and every circle on the sphere becomes a circle or a straight line on the map. The point opposite the center lies at infinity, so the whole Earth never fits.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'stereographic'
});

Example 13

Orthographic

The view from infinitely far away — one hemisphere.

JavaScript snippet

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  projection: 'orthographic'
});