Map with Orthographic (globe) projection – amCharts 4 Documentation

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!

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,
  // ...
}

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

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