Map with Orthographic (globe) projection in Lightning

Orthographic projection can easily be created in AmCharts. This post is to make that globe in Lightning component.

As AmChart is third part library, we have to include it using Static Resource.  Download below JS files and add in Static Resource.

1. https://www.amcharts.com/lib/4/core.js
2. https://www.amcharts.com/lib/4/maps.js
3. https://www.amcharts.com/lib/4/geodata/worldLow.js
4. https://www.amcharts.com/lib/4/themes/animated.js

After adding it in Static Resource, add reference in lightning component.

<ltng:require scripts="{!join(',', 
    $Resource.amcharts + '/core.js', 
	$Resource.amcharts + '/maps.js', 
 	$Resource.amcharts + '/worldLow.js',                            
    $Resource.amcharts + '/animated.js')}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />

Creating map instance

am4core.create() function is used to create of map instance.

var chart = am4core.create("chartdiv", am4maps.MapChart);

geodata property will set specific map definition.

chart.geodata = am4geodata_worldLow;  // Set map definition

Setting projection

By default all maps are shown in Equirectangular projection. To display map in another projection we can use projection property.

 // Set projection
chart.projection = new am4maps.projections.Orthographic();
chart.panBehavior = "rotateLongLat";
chart.deltaLatitude = -20;
chart.padding(20,20,20,20);

After projection is set, Map data is passed using MapPolygonSeries for configuring map geographical areas, such as countries.

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;

We can configure appearance and behavior of its items by accessing templates. To make the map more interactive set tooltipText so that it would display a tool tip.

 // Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#47c78a");
polygonTemplate.stroke = am4core.color("#454a58");
polygonTemplate.strokeWidth = 0.5;

To enable grid on map, we can use GraticuleSeries method.

var graticuleSeries = chart.series.push(new am4maps.GraticuleSeries());
graticuleSeries.mapLines.template.line.stroke = a`m4core.color("#ffffff");
graticuleSeries.mapLines.template.line.strokeOpacity = 0.08;
graticuleSeries.fitExtent = false;

Animate map with chart.animate function.

let animation;
setTimeout(function(){
         animation = chart.animate({property:"deltaLongitude", to:100000}, 20000000);
}, 3000)
            
chart.seriesContainer.events.on("down", function(){
 if(animation){
     animation.stop();
       }
})

Rotation can have different setting. Below are map rotation setting, which we can utilize.

• "move" (default) – moves the whole of the map without modifying it.
• "rotateLong" – rotates the map using its vertical axis.
• "rotateLat" – rotates the map using its horizontal axis.
• "rotateLongLat" – rotates the map freely around both of its axes.

Full Code :  https://github.com/dhaniksahni/rotateGlobeInLightning

Reference : https://www.amcharts.com/docs/v4/