Rotate and zoom the globe to a clicked country

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

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

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);
  }
}

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

See the Pen
Rotate Globe to a Selected Country and zoom, custom coordinates for US & russia by amCharts team (@amcharts)
on CodePen.0