Skip to content
amCharts 4

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

Section titled “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

Section titled “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);});
Open in CodePen

Related content

Section titled “Related content”