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.
- https://www.amcharts.com/lib/4/core.js
- https://www.amcharts.com/lib/4/maps.js
- https://www.amcharts.com/lib/4/geodata/worldLow.js
- https://www.amcharts.com/lib/4/themes/animated.js
After adding it in Static Resource, add reference in lightning component.
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/
2 comments
Thank You. It is working at my end. Looks amazing.
Excellent. Good to hear this. Keep exploring.