The sixteen elements

A position on the sphere, drawn as a small circle whose radius is given in degrees — so it keeps its size on the globe however the view is turned. Everything else that takes a position will take one of these, and follow it when it moves.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var berlin = globe.geoPoint(13.4, 52.5, { fillColor: '#cf9b3f' });
var cairo = globe.geoPoint(31.2, 30.0, { fillColor: '#7fb3d5' });
var lima = globe.geoPoint(-77.0, -12.0, { fillColor: '#c0392b', size: 1.6 });

A path between two positions. A great circle is the shortest way; a rhumb line holds a constant course instead, and pays for it. On the sphere the difference is plain to see, which is the argument a flat map has to make with words.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var a = [8.57, 50.03], b = [-73.78, 40.64];

globe.geoPath(a, b, {
  mode: 'greatcircle',
  strokeColor: '#7fb3d5',
  strokeWidth: 2
});

globe.geoPath(a, b, {
  mode: 'rhumb',
  strokeColor: '#cf9b3f',
  strokeWidth: 1.4,
  dash: 2
});

The same two paths on a sheet. The great circle — the shorter way — is the one that bends; the rhumb line, which is longer, is the one that looks straight.

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

var a = [8.57, 50.03], b = [-73.78, 40.64];

map.geoPath(a, b, {
  mode: 'greatcircle',
  strokeColor: '#7fb3d5',
  strokeWidth: 2
});

map.geoPath(a, b, {
  mode: 'rhumb',
  strokeColor: '#cf9b3f',
  strokeWidth: 1.4,
  dash: 2
});

Circles of constant distance around a position, in kilometres. On a sphere they are circles.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var center = globe.geoPoint(13.4, 52.5, { fillColor: '#cf9b3f' });
var rings = globe.geoRange(center, [1000, 3000, 6000], {
  strokeColor: '#7fb3d5',
  strokeWidth: 1.2
});

The same three circles on a sheet. They are still 1,000, 3,000 and 6,000 km in radius — the projection is what makes them look otherwise.

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

var mc = map.geoPoint(13.4, 52.5, { fillColor: '#cf9b3f' });
map.geoRange(mc, [1000, 3000, 6000], {
  strokeColor: '#7fb3d5',
  strokeWidth: 1.2
});

A marker riding on a path, placed by a fraction from 0 to 1. Moving it refreshes only its own layer, so the path underneath is not rebuilt — which is what makes an animation cheap.

A fading trail behind a marker. It follows the marker by itself — nothing has to be told to update it — and its length is a fraction of the path.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var route = globe.geoPath([139.7, 35.7], [-122.4, 37.8], {
  mode: 'greatcircle',
  strokeColor: '#31465a',
  strokeWidth: 1
});

var plane = globe.geoMarker(route, { size: 1.1, fillColor: '#cf9b3f' });

globe.geoTrail(plane, { length: 0.3, strokeColor: '#cf9b3f' });

globe.geoAnimate(route, { marker: plane, duration: 9000, loop: true });

Flies a marker along a path. A running animation is replaced rather than added to, so calling restart twice does not leave two loops moving the same marker.

A draggable JSXGraph point bound to a geoPoint. Drag it and everything built on that point follows. It needs a board, and answers null without one.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var a = globe.geoPoint(8.57, 50.03, { fillColor: '#cf9b3f' });
var b = globe.geoPoint(-73.78, 40.64, { fillColor: '#cf9b3f' });

var route = globe.geoPath(a, b, {
  mode: 'greatcircle',
  strokeColor: '#7fb3d5',
  strokeWidth: 2
});

[a, b].forEach(function (p) {
  globe.geoHandle(p, { onMove: function (lon, lat) { … } });
});

A text at a geographic position. It hides itself when the position goes round the back of the globe, and answers null where the host cannot place a position at all.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var p = globe.geoPoint(10, 10, { size: 0.5, fillColor: '#cf9b3f' });

globe.geoLabel(p, 'My text', { fontSize: 11, strokeColor:'#000000',
  cssStyle:
    'border: 1px solid #ffffffbb; ' +
    'border-radius: 15px; ' +
    'margin: 2px; ' +
    'padding: 0px 8px; ' +
    'background-color: #ffffffbb;'
});

Any number of positions joined by great circles, with the area measured over the sphere rather than over the drawing.

The same octant on a sheet. Equal Earth keeps its area — an eighth of the Earth stays an eighth — while the shape is stretched to pay for it.

Three positions joined by great circles. The angles of a spherical triangle add to more than 180 degrees, and the excess is the area — which is why this element reports both. Drag a corner and watch the sum move.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var corners = [
  [0, 0],
  [90, 0],
  [0, 90]
].map(function (c) {
  return globe.geoPoint(c[0], c[1], { fillColor: '#cf9b3f' });
});

var tri = globe.geoTriangle(corners[0], corners[1], corners[2], {
  fillColor: '#cf9b3f',
  fillOpacity: 0.28,
  strokeColor: '#cf9b3f'
});

A closed geographic ring with its true area.

Freehand marking, fed by JSXGraph's own sketch recording. Draw on the globe with the pointer and the stroke becomes a region.

A circular Keplerian orbit with the path it traces on the surface below. The Earth turns underneath, so the ground track walks west each time round.

The night side, as a filled cap around the point opposite the sun. On an equal-area map the dark half really is half the map; on Mercator it is not, which is one more way to read what a projection does. The blur grades the night side alone, because twilight only begins once the sun has set: civil, nautical and astronomical twilight end when it is 6, 12 and 18 degrees below the horizon. The terminator itself is the geometric one, without refraction.

A nominal time zone, highlighted, with its local time.

A target reticle: two concentric rings, four ticks and a centre dot. In screen units it keeps its size in pixels however the globe is scaled; in degrees it sits on the sphere and shrinks with distance. It can draw its far half as well, so a target behind the body still reads.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null
});

var target = globe.geoPoint(31.2, 30.0, { size: 0.4, fillColor: '#cf9b3f' });

globe.geoReticle(target, {
  units: 'degrees',
  px: 6,
  strokeColor: '#cf9b3f',
  strokeWidth: 1.4,
  farSide: true
});

The same reticle on a sheet. In degrees it is a shape on the sphere, so the projection stretches it exactly as it stretches everything else around it.

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

var target = map.geoPoint(31.2, 30.0, { size: 0.4, fillColor: '#cf9b3f' });

map.geoReticle(target, {
  units: 'degrees',
  px: 6,
  strokeColor: '#cf9b3f',
  strokeWidth: 1.4
});