How to disable Zoom and Pan on a Map Chart of amChart5

960 Views Asked by At

I used the amChart4 Map before and have just switched to amChart5 Map. I know there is a document about disabling zoom and pan on map chart of amChart4, but I can't find any about amChart5.

So I've tried to apply the same concept to amChart5 and it worked only with Zoom. I could disable the map zoom in amChart5 with this code:

var map = root.container.children.push(am5map.MapChart.new(root, {
        panX: "none",
        projection: am5map.geoMercator(),
        maxZoomLevel: 1,
        draggable: false,
        resizeable: false
    })
);

As code shown above, I also added the draggable: false and resizeable: false into it, but it didn't work.

Is there any solution to disable the draggable and resizeable map? I appreciate your kind help.

1

There are 1 best solutions below

0
On

It is my own question, but after I did some testing on the mentioned code above and found the right solution, so I would like to share it here in the answer.

The solution to the question is just by adding

var map = root.container.children.push(am5map.MapChart.new(root, {
        panX: "none",
        panY: "none",
        projection: am5map.geoMercator(),
        maxZoomLevel: 1
    })
);

So the panX: none is to disable the horizontal drag and panY: none is to disable the verticle drag. And the draggable: false and resizeable: false are no longer applied in amChart5 anymore.