Globe – Properties

With globe3d, it is possible to display the Earth as a sphere with various visualization options. No map projection is involved: the geometry stays on the sphere, the camera shows it as seen from outside, and the horizon does the clipping.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  body: {
    fillColor: '#123a52',
    strokeColor: '#2a5c7d'
  },
  farSide: {
    visible: true,
    fillOpacity: 0.16
  },
  graticule: {
    visible: true,
    strokeColor: '#ffeedd',
    strokeWidth: .5,
    strokeOpacity: 0.6,
    step: [30, 20]
  },
  land: {
    fillColor: '#e0d8c4'
  },
  coast: {
    visible: true,
    strokeColor: '#8d8471',
    strokeWidth: 0.9
  },
  countries: {
    visible: true,
    strokeColor: '#a89a7d',
    strokeWidth: 0.55
  },
  capitals: {
    visible: true
  },
  selectMode: 'multiple',
  highlightStyle: {
    fillColor: '#ffee33',
    fillOpacity: 0.6,
    strokeColor: '#eeaa00',
    strokeWidth: 1
  },
  keepUpright: true
});

...

Without further information, the JSXGraph globe3d is displayed as follows. The two parent arrays are the lower left corner and the size of the drawing rectangle, exactly as for view3d.

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

body is the sphere the layers are drawn on. It has no counterpart on a map: there the ocean layer draws the sheet, here the body is the ocean and the ground for everything else.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  body: {
    fillColor: '#6688aa',
    strokeColor: '#002244',
    strokeWidth: 2
  }
});

A sphere hides half of itself. farSide draws that half a second time, faintly, so the body reads as hollow rather than solid.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  body: {
    fillOpacity: 0.12
  },
  farSide: {
    visible: true,
    fillColor: '#aaccbb',
    fillOpacity: 0.3,
    strokeColor: '#88aa99'
  }
});

graticule draws the network of meridians and parallels; its spacing is controlled by step.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  graticule: {
    visible: true,
    strokeColor: '#eeffdd',
    strokeWidth: .5,
    strokeOpacity: 0.8,
    step: [15, 15]
  }
});

The landmass is an area.

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

The coastlines are displayed as curves — the same geometry as the land layer, drawn as a line rather than as an area.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  coast: {
    visible: true,
    strokeColor: '#ff2299',
    strokeWidth: 1.4
  }
});

The country borders are displayed, and if selectMode is enabled, the countries can also be tapped.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  countries: {
    visible: true,
    strokeColor: '#002244',
    strokeWidth: .4
  }
});

capitals are displayed as small circles. size is their radius in degrees, so a capital keeps its size on the sphere however the globe is turned.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  capitals: {
    visible: true,
    fillColor: '#cf9b3f',
    strokeColor: '#071018',
    strokeWidth: 0.5,
    size: 0.9
  }
});

The following elements can be included: the equator (equator), both tropics (tropics), tropic of Cancer (tropicnorth), tropic of Capricorn (tropicsouth), both polar circles (polarcircles), arctic Circle (arcticcircle), antarctic Circle (antarcticcircle), prime meridian (primemeridian), international Date Line at −180° and +180° (dateline), nominal 15° meridians (timezones), day–night terminator (terminator), and small circle around the subsolar point (subsolar).

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

var equator = globe.addGeoLayer('lines',
  function () {
    return JXG.Geography.features.equator();
  }, {
    strokeColor: '#bb99cc',
    strokeWidth: 1.8,
    layer: 13
  });

var tropics = globe.addGeoLayer('lines',
  function () {
    return JXG.Geography.features.tropics();
  }, {
    strokeColor: '#ffee99',
    strokeWidth: 1,
    dash: 3,
    strokeOpacity: 0.8,
    layer: 13
  });

var primemeridian = globe.addGeoLayer('lines',
  function () {
    return JXG.Geography.features.primemeridian();
  }, {
    strokeColor: '#99ee66',
    strokeWidth: 2,
    dash: 0,
    strokeOpacity: 0.8,
    layer: 13
  });

Circles of equal angular radius on a lattice. On the sphere they are circles, all the same size, because that is what they are. Towards the rim they look like ellipses, but that is only the view foreshortening them, not distortion — which is the point of drawing Tissot's indicatrix here as well as on a map.

var globe = board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
  data: DATA,
  tabindex: null,
  distortion: {
    mode: 'tissot',
    step: 20,
    radius: 5,
    latMax: 60,
    strokeColor: '#aabbff',
    strokeWidth: 1,
    strokeOpacity: .5,
    fillColor: '#ccddff',
    fillOpacity: 0.15
  }
});

body can be shrunk so that something above it fits inside the world cube. Every layer multiplies by the current scale while it draws, so nothing is rebuilt.

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