Documentation

Pre-zooming Map to a list of countries

In this tutorial we explained how you can pre-zoom your map to a specific country. This tutorial builds on it to produce an example that pre-zooms the map to several countries.

One-country solution

In the previous tutorial we have used Map series' method getPolygonById(id) to extract a polygon object of a specific country by its ISO2 code.

Then we used Map chart's method zoomToMapObject(object) to make the map zoom to that specific country.

Multiple countries

This time around we need to zoom on multiple countries, so zoomToMapObject() won't cut it.

Instead we are going to do the following:

  1. Cycle through a list of country IDs and use getPolygonById(id) to get actual polygon object.
  2. Find out the north-, south-, west-, and east-most coordinates among all of these countries (each polygon object has north, south, west, and east properties).
  3. Use other Map chart's method - zoomToRectangle(north, east, south, west, level, center) - to zoom the map to specific virtual "rectangle".
let zoomTo = ["IN", "CN", "KZ"];

chart.events.on("ready", function(ev) {
  // Init extremes
  var north, south, west, east;

  // Find extreme coordinates for all pre-zoom countries
  for(let i = 0; i < zoomTo.length; i++) {
    var country = polygonSeries.getPolygonById(zoomTo[i]);
    if (north == undefined || (country.north > north)) {
      north = country.north;
    }
    if (south == undefined || (country.south < south)) {
      south = country.south;
    }
    if (west == undefined || (country.west < west)) {
      west = country.west;
    }
    if (east == undefined || (country.east > east)) {
      east = country.east;
    }
    country.isActive = true
  }

  // Pre-zoom
  chart.zoomToRectangle(north, east, south, west, 1, true);
});
var zoomTo = ["IN", "CN", "KZ"];

chart.events.on("ready", function(ev) {
  // Init extremes
  var north, south, west, east;

  // Find extreme coordinates for all pre-zoom countries
  for(var i = 0; i < zoomTo.length; i++) {
    var country = polygonSeries.getPolygonById(zoomTo[i]);
    if (north == undefined || (country.north > north)) {
      north = country.north;
    }
    if (south == undefined || (country.south < south)) {
      south = country.south;
    }
    if (west == undefined || (country.west < west)) {
      west = country.west;
    }
    if (east == undefined || (country.east > east)) {
      east = country.east;
    }
    country.isActive = true
  }

  // Pre-zoom
  chart.zoomToRectangle(north, east, south, west, 1, true);
});
{
  // ...
  "events": {
    "ready": function(ev) {

      // Countries to zoom to
      var zoomTo = ["IN", "CN", "KZ"];
  
      // Init extrems
      var north, south, west, east;
      
      // Find extreme coordinates for all pre-zoom countries
      for(var i = 0; i < zoomTo.length; i++) {
        var country = polygonSeries.getPolygonById(zoomTo[i]);
        if (north == undefined || (country.north > north)) {
          north = country.north;
        }
        if (south == undefined || (country.south < south)) {
          south = country.south;
        }
        if (west == undefined || (country.west < west)) {
          west = country.west;
        }
        if (east == undefined || (country.east > east)) {
          east = country.east;
        }
        
        country.isActive = true;
      }
      
      // Pre-zoom
      chart.zoomToRectangle(north, east, south, west, 1, true);
      
    }
  }
}

See the Pen amCharts 4: Pre-zooming map to a list of countries by amCharts team (@amcharts) on CodePen.0

Related content