One Earth, two views: map and globe in JSXGraph

Every flat map of a round planet gets something wrong. The only choice is what: Mercator keeps the angles right and blows Greenland up to the size of Africa, which is fourteen times larger. Equal Earth keeps the sizes honest and pays for it in the shapes. Click through them and watch each one give something up.

On 4 September 2026 the UN General Assembly took a side: resolution A/RES/80/307 encourages Equal Earth and its relatives wherever relative size matters. It bans nothing and it settles nothing — and it asks for the harder half too, that people be shown why no flat sheet can keep everything at once. That is what this board is for.

No map projection, no compromise — on a globe everything keeps its true relative size. Two points, and two ways between them: the solid line is the shortest one there is, the dashed one holds a single true bearing — the same angle to every meridian — from start to finish.

And the globe itself is not a picture. It is a JSXGraph construction like any other: turn it with the pointer, drag what sits on it, read values off it. The far side stays faintly visible.

Like any first version, these elements have a few rough edges. They cover the essentials well; some things are still missing, and some are kept simple on purpose. Here is what to keep in mind.

A sphere, not an ellipsoid

Distances and areas are computed on a sphere of 6371 km. That is within a few tenths of a percent of the real shape of the Earth — fine for a classroom, not for surveying.

A coarse dataset

Natural Earth at 1:110 million, about 4000 points for all the coastlines in the world. 29 countries are too small to have an outline at that scale and stand in as circles, which a map meant to be measured from should switch off.

Orbits are textbook orbits

A circle, no drag and no flattening of the Earth. The ground track is right for a demonstration and not for a rendezvous.

Very large regions

A region bigger than half the Earth that does not enclose a pole is measured as the part left over. No coastline is anywhere near that large, but a shape drawn by hand can be.

The far side of the globe

It is drawn in a second pass rather than sorted by depth, so two layers behind the sphere do not hide one another.

…

And no doubt a few more we have not run into yet. If you find one, tell us.

Two elements, a handful of drawable things, and one file of geometry. No tiles, no server, nothing to sign up for — open the page and the Earth is there.

It is a construction, not a picture

Every point can be dragged, every element fires events, and the board is the one you already know. A capital, a flight path and a slider live in the same coordinate system and can be tied to one another.

It answers in kilometres

A path reports the length of the route as drawn — 6190 km along a great circle from Frankfurt to New York, 6499 along a constant course. A triangle reports its angles, their excess over 180 degrees, and the area that follows from it. The numbers come off the sphere, not off the screen.

Twelve projections, and the way between them

Swap one for another while the map is running and it morphs, layer by layer. Seven of them can be re-centred on any point of the globe, not just on a meridian.

The same things work on both

Points, paths, markers, regions, orbits, reference lines — sixteen of them, and none knows whether it is on a sheet or on a sphere. Put a map and a globe on one board and they can drive each other.

The globe is a 3D scene

It inherits from view3d, so the sphere shares its space with anything else JSXGraph can draw in three dimensions. An orbit above the surface is just another curve.

664 KB, and then nothing

The four modules and the Natural Earth data together. No network traffic after the page has loaded, which also means it runs from a memory stick, behind a school firewall, or on a train.

Here is the smallest thing that works, for each element: a complete page you can save and open. One attribute is all either of them needs. Everything else — countries, reference lines, the drawable elements — is added the same way, one attribute at a time.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://jsxgraph.org/distrib/jsxgraph.css">
</head>
<body>

  <h1>Example Map</h1>

  <div id="box" style="width: 600px; aspect-ratio: 12 / 6.1"></div>

  <script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>

  <script src="https://jsxgraph.org/extensions/geo/distrib/jxg-geography.js"></script>
  <script src="https://jsxgraph.org/extensions/geo/distrib/jxg-geomap.js"></script>

  <script src="https://jsxgraph.org/extensions/geo/distrib/dataset.js"></script>
  <!--<script src="https://jsxgraph.org/extensions/geo/distrib/dataset.naturalearth50.js"></script>-->

  <script>
    var board = JXG.board('box', { boundingbox: [0, 6.1, 12, 0], showNavigation: false });

    board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
        data: JXG.Geography.datasets.naturalEarth110
        //data: JXG.Geography.datasets.naturalEarth50
    });
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://jsxgraph.org/distrib/jsxgraph.css">
</head>
<body>

  <h1>Example Globe</h1>

  <div id="box" style="width: 600px; aspect-ratio: 3 / 2"></div>

  <script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>

  <script src="https://jsxgraph.org/extensions/geo/distrib/jxg-geography.js"></script>
  <script src="https://jsxgraph.org/extensions/geo/distrib/jxg-globe3d.js"></script>

  <script src="https://jsxgraph.org/extensions/geo/distrib/dataset.js"></script>
  <!--<script src="https://jsxgraph.org/extensions/geo/distrib/dataset.naturalearth50.js"></script>-->


  <script>
    var board = JXG.board('box', { boundingbox: [0, 8, 12, 0], showNavigation: false });

    board.create('globe3d', [[2.6, 0.6], [6.8, 6.8]], {
        data: JXG.Geography.datasets.naturalEarth110
        //data: JXG.Geography.datasets.naturalEarth50
    });
  </script>

</body>
</html>
        

Demo with 1:110

Demo with 1:50 – This significantly reduces performance.

Extension Files

• jxg-geography.js (main file)
• jxg-geomap.js (geomap)
• jxg-globe3d.js (globe)
• geoelements.js (elements)

Datasets NaturalEarth

• dataset.js (default, equals dataset.naturalearth110.js)
• dataset.naturalearth110.js
• dataset.naturalearth50.js

Rudimentary: every public function with its parameters and return value, generated from the source. Have a look.