How to use zoomFactor on ZoomControls in AmCharts V4

user_6243865 0
Viewed 1289

Hello I want to use larger zooming factors via the ZoomControl Buttons.

How is that possible in AmCharts (Maps) Version 4?

I could find an old documentation which describes my wanted feature:

https://docs.amcharts.com/javascriptmaps/ZoomControl (zoomFactor)

In the new docs I can only find it in "components".

The only way I think I could make it work is listening into the "hit" event on the zoomControl Button, then determine if it was a positive(zoomIn) or negative(zoomOut) event and zoom manually the Chart because the Chart extends the Component which contains the zoomFactor im looking for.

amcharts javascript
1 Answers

amCharts 4.0.14+: chart.zoomStep

With amCharts 4.0.14+ a MapChart.zoomStep has been implemented which is precisely what you're looking for. As of this writing (January 2, 2019), it is not yet documented except in the changelog.

All you would have to do is:

chart.zoomStep = 3;

Our Zooming to Countries Map demo's default zoomStep is 2. Here's a fork where it's 3:

https://codepen.io/team/amcharts/pen/d454553836da95fe2345a608e1a0efbd

amCharts <= 4.0.13: custom "zoom factor"

If you're referring to Component.zoomFactor, then all charts have this property. Even though it's called zoomFactor, it's not what you're thinking, also, it's read-only anyway.

Unfortunately what you describe as a "zooming factor" cannot be overridden, the buttons basically zoomIn() and zoomOut(), within those methods a zooming factor of 2 is hardcoded. Listening in on the "hit" event wouldn't work because you'd have competing zoom events. If you disabled the original "hit" event and made your own, there is still additional helper logic for keyboards for accessibility purposes, so your custom event and these helpers will have inconsistent zoom factors. So what can be done is to kill the default plusButton and minusButton and roll your own.

To disable them just set their .disabled property to true:

chart.zoomControl.plusButton.disabled = true;
chart.zoomControl.minusButton.disabled = true;

Then we'll make our own versions of the buttons also as children of the ZoomControl container and place them before/after its slider to simulate the original buttons:

var plusButton = chart.zoomControl.createChild(am4core.Button);
plusButton.shouldClone = false;
plusButton.label.text = "+";
plusButton.width = am4core.percent(100);
plusButton.padding(5, 5, 5, 5);
plusButton.marginBottom = 2;
plusButton.insertBefore(chart.zoomControl.slider);

var minusButton = chart.zoomControl.createChild(am4core.Button);
minusButton.shouldClone = false;
minusButton.label.text = "-";
minusButton.width = am4core.percent(100);
minusButton.padding(5, 5, 5, 5);
minusButton.marginTop = 1;
minusButton.insertAfter(chart.zoomControl.slider);

Then we'll provide "hit" events on the buttons that zoom in/out with our own zooming factor (customZoomFactor below):

var customZoomFactor = 3; // default: 2

plusButton.events.on("hit", function() {
  chart.zoomToGeoPoint(
    chart.zoomGeoPoint,
    chart.zoomLevel * customZoomFactor,
    false
  );
});
minusButton.events.on("hit", function() {
  chart.zoomToGeoPoint(
    chart.zoomGeoPoint,
    chart.zoomLevel / customZoomFactor,
    false
  );
});

Here's a fork of our Zooming to Countries Map demo that incorporates all of the above code:

https://codepen.io/team/amcharts/pen/f358095c9ea00d875049b67a7bd13df4

user_7818240
Related