amcharts angular zoomlevelchanged event - amcharts

Question

When I click on a country the zoomlevelchanged event is fired a hundred times! I expect that it fires a maximum of 2 times.
Is that intentional or did I do something wrong?
I wanted to provide a codepen sample post however it will break if I insert the code below:
chart.events.on("zoomlevelchanged", function(e) {
console.log(e);
});
The event shouldn't be triggered that often in my opinion because it will take some resource if it needs to compute s.th. based on the zoom level.
Is it possible to use another event to react when somebody zoomed in the map? It shouldn't be bound by the direction of the zoom like up or down and also it shouldn't be different between mouse and smartphone inputs.
The complete code:
import { Component, NgZone, AfterViewInit, OnDestroy } from "#angular/core";
import * as am4core from "#amcharts/amcharts4/core";
import * as am4maps from "#amcharts/amcharts4/maps";
import am4geodata_worldLow from "#amcharts/amcharts4-geodata/worldLow";
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnDestroy {
private chart: am4maps.MapChart;
constructor(private zone: NgZone) { }
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
// create map instance
let chart = am4core.create("mapdiv", am4maps.MapChart);
// set map definition
chart.geodata = am4geodata_worldLow;
// set projection
chart.projection = new am4maps.projections.Miller();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// Configure series
let polygonTemplate = this.configureTemplate(polygonSeries.mapPolygons.template);
// Make map load polygon (like country names) from GeoJSON
polygonSeries.useGeodata = true;
// Use data instead for additional information
polygonSeries.data = [{
"id": "US",
"name": "United States",
"value": 100,
"fill": am4core.color("#F05C5C")
}, {
"id": "FR",
"name": "France",
"value": 50,
"fill": am4core.color("#5C5CFF")
}];
polygonTemplate.propertyFields.fill = "fill";
// exclude antarktika
polygonSeries.exclude = ["AQ"];
// include germany only
// polygonSeries.include = ["DE"];
// ImageSeries (for adding visual objects like markers)
let imageSeries = chart.series.push(new am4maps.MapImageSeries());
// Basic Circle Image
let imageSeriesTemplate = imageSeries.mapImages.template;
let circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#B27799");
circle.stroke = am4core.color("#FFFFFF");
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = "{title}";
// Binding Marker Properties to Data
imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";
// Adding 3 Markers to the Map
imageSeries.data = [{
"latitude": 48.856614,
"longitude": 2.352222,
"title": "Paris"
}, {
"latitude": 40.712775,
"longitude": -74.005973,
"title": "New York"
}, {
"latitude": 49.282729,
"longitude": -123.120738,
"title": "Vancouver"
}];
// Adding Zoom Controls
// chart.zoomControl = new am4maps.ZoomControl();
// Heat map based on the value property in data
// polygonSeries.heatRules.push({
// "property": "fill",
// "target": polygonSeries.mapPolygons.template,
// "min": am4core.color("#ffffff"),
// "max": am4core.color("#AAAA00")
// });
chart.events.on("zoomlevelchanged", function(e) {
console.log(e);
});
// chart code goes here
this.chart = chart;
});
}
configureTemplate(polygonTemplate) {
// Create ToolTip
polygonTemplate.tooltipText = "{name}";
// Fill Template Color
polygonTemplate.fill = am4core.color("#BADA55");
// Create hover state
let hoverState = polygonTemplate.states.create("hover");
// set alternative Fill Color when hovering
hoverState.properties.fill = am4core.color("#367B25");
// show additional data in tooltip, akquired from polygonSeries.data
polygonTemplate.tooltipText = "{name}: {value}";
// Zooming to map area on click
polygonTemplate.events.on("hit", function(ev){
ev.target.series.chart.zoomToMapObject(ev.target)
});
return polygonTemplate;
}
ngOnDestroy() {
this.zone.runOutsideAngular(() => {
if (this.chart) {
this.chart.dispose();
}
});
}
}