I'm using amCharts to show a World Map, and I have this code for when the user clicks on a country:
var groupData = [
{
"name": "America",
"color": "#7DB378",
"data": [{
"title": "USA",
"id": "US",
"customData": "Data 1"
}, {
"title": "Mexico",
"id": "MX",
"customData": "Data 2"
}]
},
{
"name": "Europe",
"color": "#1AE5B9",
"data": [{
"title": "Spain",
"id": "ES",
"customData": "Data 3"
}]
},
{
"name": "Asia",
"color": "#193387",
"data": [{
"title": "China",
"id": "CN",
"customData": "Data 4"
}]
}
];
var excludedCountries = ["AQ"]; // Exclude Antarctica
// Create a series for each group, and populate the above array
groupData.forEach(function (group) {
var series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
var includedCountries = [];
group.data.forEach(function (country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);
});
series.include = includedCountries;
series.fill = am4core.color(group.color);
series.setStateOnChildren = true;
var seriesHoverState = series.states.create("hover");
// Country shape properties & behaviors
var mapPolygonTemplate = series.mapPolygons.template;
// Events
mapPolygonTemplate.events.on("hit", function(ev) {
// zoom to an object
ev.target.series.chart.zoomToMapObject(ev.target);
});
});
This code works fine for all countries except the USA. When clicking on it, it doesn't zoom, just centers a bit the World Map and that's it. Why is this only failing to zoom in the USA? What am I doing wrong?
