Skip to content
amCharts 5

Rotate and zoom the globe to a clicked country

This demo shows how we can rotate the MapChart with an Orthographic projection (globe) so that it is centered on a clicked country, then zoom in to it.

Code

Section titled “Code”
var previousPolygon;


polygonSeries.mapPolygons.template.on("active", function(active, target) {
  if (previousPolygon && previousPolygon != target) {
    previousPolygon.set("active", false);
  }
  if (target.get("active")) {
    selectCountry(target.dataItem.get("id"));
  }
  previousPolygon = target;
});


var zoomCoordinates = {
  "US": { longitude: -97.58211458221663, latitude: 38.90787874547481, zoomLevel:3.73 },
  "RU": { longitude: 88.18534934369588, latitude: 60.65391650934546, zoomLevel: 1.78 }
}


function selectCountry(id) {
  var dataItem = polygonSeries.getDataItemById(id);
  var target = dataItem.get("mapPolygon");
  if (target) {
    var centroid = target.geoCentroid();
    if (centroid) {
      chart.animate({ key: "rotationX", to: -centroid.longitude, duration: 1500, easing: am5.ease.inOut(am5.ease.cubic) });
      chart.animate({ key: "rotationY", to: -centroid.latitude, duration: 1500, easing: am5.ease.inOut(am5.ease.cubic) });
    }


    setTimeout(function () {
      var coordinates = zoomCoordinates[dataItem.get("id")];
      if (coordinates) {
        chart.zoomToGeoPoint(coordinates, coordinates.zoomLevel, true);
      }
      else {
        polygonSeries.zoomToDataItem(dataItem)
      }
    }, 1500);
  }
}

Example

Section titled “Example”
Open in CodePen