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