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:
- Cycle through a list of country IDs and use
getPolygonById(id)
to get actual polygon object. - Find out the north-, south-, west-, and east-most coordinates among all of these countries (each polygon object has
north
,south
,west
, andeast
properties). - 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.