Globe and map together

Both are ordinary JSXGraph elements, so they share a board and a coordinate system. The globe takes a square rectangle on the left, the map a wide one on the right, and neither knows the other is there.

var globe = board.create('globe3d', [[0.3, 0.7], [4.4, 4.4]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true }
});

var map = board.create('geomap', [[6.0, 1.1], [5.6, 3.6]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true }
});

Turning the globe fires viewchange with the position the camera now faces, and the map is recentred on it. An oblique-capable projection is needed for that: the rotation happens before projecting, so the projection has to be able to take a tilted axis. Hammer can.

var globe = board.create('globe3d', [[0.3, 0.7], [4.4, 4.4]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true }
});

var map = board.create('geomap', [[6.0, 1.1], [5.6, 3.6]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true }
});

globe.on('viewchange', function (ev) {
  map.setCenter(ev.lon, ev.lat);
});

Each host tells the other what was selected, and the other adopts it. That only works because setSelection says nothing when the set is unchanged — without that the two announce back and forth until the stack runs out. Tap a country on either one.

var globe = board.create('globe3d', [[0.3, 0.7], [4.4, 4.4]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true },
  selectMode: 'multiple'
});

var map = board.create('geomap', [[6.0, 1.1], [5.6, 3.6]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true },
  selectMode: 'multiple'
});

globe.on('selectionchange', function (ev) {
  map.setSelection(ev.selected);
});

map.on('selectionchange', function (ev) {
  globe.setSelection(ev.selected);
});

The geo elements attach to whatever offers addGeoLayer, so the same two paths are built twice — once on each host. On the sphere the great circle plainly is the shorter way. On the sheet it bends north and the rhumb line looks straight (Mercator), which is exactly the claim a flat map makes and cannot keep.

var globe = board.create('globe3d', [[0.3, 0.7], [4.4, 4.4]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true }
});

var map = board.create('geomap', [[6.0, 1.1], [5.6, 3.6]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true }
});

var FRA = [8.57, 50.03];
var JFK = [-73.78, 40.64];

var drawn = [globe, map].map(function (host) {
  host.geoPoint(FRA[0], FRA[1], { fillColor: '#cf9b3f' });
  host.geoPoint(JFK[0], JFK[1], { fillColor: '#cf9b3f' });
  return {
    direct: host.geoPath(FRA, JFK, {
      mode: 'greatcircle',
      strokeColor: '#7fb3d5',
      strokeWidth: 2
    }),
    rhumb: host.geoPath(FRA, JFK, {
      mode: 'rhumb',
      strokeColor: '#cf9b3f',
      strokeWidth: 1.4,
      dash: 2
    })
  };
});

Circles of equal angular radius on a lattice. On the sphere they are circles, all the same size, because that is what they – even where the view foreshortens them near the rim. On Mercator they swell towards the poles — same circles, same lattice, and the whole argument about map projections in one picture.

var TISSOT = {
  step: 30,
  radius: 6,
  latMax: 60,
  strokeColor: '#cf9b3f',
  strokeWidth: 1,
  fillColor: '#cf9b3f',
  fillOpacity: 0.18
};

var globe = board.create('globe3d', [[0.3, 0.7], [4.4, 4.4]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true },
  distortion: TISSOT
});

var map = board.create('geomap', [[6.0, 1.1], [5.6, 3.6]], {
  data: DATA,
  tabindex: null,
  graticule: { visible: true },
  distortion: TISSOT
});

A Keplerian circle above the body, with the path it traces on the surface below. The Earth turns underneath, so for a low orbit of about 90 minutes the track shifts west by about 22 degrees each time round — which is why the map shows a series of shifted waves rather than one closed curve.

Draw a shape on the globe and it is measured where it lies, not where it is drawn: the area comes from the spherical integral over the ring, so it does not change when the projection does.

A marker riding a great circle, with a trail behind it. Both hosts show the same flight: on the sphere the path plainly is the shorter way, on the sheet it bends north and the rhumb line looks straight.