Animated rotation of the globe via API
This demo shows how we can animate rotation of a globe (MapChart with an Orthographic projection) by creating an animation for its deltaLongitude and deltaLatitude properties.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definitionchart.geodata = am4geodata_worldLow;
// Set projectionchart.projection = new am4maps.projections.Orthographic();chart.panBehavior = "rotateLongLat";chart.deltaLatitude = -20;chart.padding(20, 20, 20, 20);
// Create map polygon seriesvar polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// Make map load polygon (like country names) data from GeoJSONpolygonSeries.useGeodata = true;
// Configure seriesvar polygonTemplate = polygonSeries.mapPolygons.template;polygonTemplate.tooltipText = "{name}";polygonTemplate.fill = am4core.color("#47c78a");polygonTemplate.stroke = am4core.color("#454a58");polygonTemplate.strokeWidth = 0.5;
var graticuleSeries = chart.series.push(new am4maps.GraticuleSeries());graticuleSeries.mapLines.template.line.stroke = am4core.color("#ffffff");graticuleSeries.mapLines.template.line.strokeOpacity = 0.08;graticuleSeries.fitExtent = false;
// Waterchart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color("#454a58");chart.backgroundSeries.mapPolygons.template.polygon.fillOpacity = 1;
// Create hover state and set alternative fill colorvar hs = polygonTemplate.states.create("hover");hs.properties.fill = chart.colors.getIndex(0).brighten(-0.5);
// Rotation functionvar animation;function rotateTo(long, lat) { if (animation) { animation.stop(); } animation = chart.animate( [ { property: "deltaLongitude", to: long }, { property: "deltaLatitude", to: lat } ], 2000 );}<div id="chartdiv"></div><input type="button" value="Europe" onclick="rotateTo(0, -20)" /><input type="button" value="Americas" onclick="rotateTo(90, -20)" /><input type="button" value="Asia" onclick="rotateTo(-90, -20)" /><input type="button" value="Australia" onclick="rotateTo(-130, 40)" />body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 500px;}animated-rotation-of-the-globe-via-api