Map with Orthographic (globe) projection

This short tutorial will show how you can create a Globe out of your map using Orthographic projection.

Setting projection

As you may already know, each map can be displayed in a number of ways - projections. (more about it here)

Each one has it's own advantages and disadvantages. However, only one can be used to create a Globe-like representation of the world - Orthographic.

To set this projection we use map's projection property:

chart.projection = new am4maps.projections.Orthographic();
chart.projection = new am4maps.projections.Orthographic();
{
  // ...
  "projection": "Orthographic",
  // ...
}

This alone is enough to convert your regular flat map into a globe!

Setting globe rotation

Normally, the our newly created globe will have its zero longitude in the middle.

You can set the initial start position using deltaLongitude setting.

It works by adjusting the middle one way or another by longitude degrees.

chart.deltaLongitude = -60;
chart.deltaLongitude = -60;
{
  // ...
  "deltaLongitude": -60,
  // ...
}

The demo

We've fitted the following demo with a slider, to see how changing deltaLongitude affects our globe:

See the Pen amCharts 4: Orthographic projection by amCharts (@amcharts) on CodePen.24419

And, just because we can, here's another demo that shows rotation of the globe by dragging the map itself:

See the Pen amCharts 4: Orthographic projection (dragging) by amCharts (@amcharts) on CodePen.24419