Normally, you can pan and zoom the Map Chart wit mouse and touch. This tutorial will explain how you can disable one or both of these actions.
Disabling pan
Panning (drag) events on a Map Chart are attached to a special container that holds all the series of the map. It's accessible via chart's seriesContainer
property.
So, to disable all panning, we simply have to make it non-draggable:
chart.seriesContainer.draggable = false; chart.seriesContainer.resizable = false;
chart.seriesContainer.draggable = false; chart.seriesContainer.resizable = false;
{ // ... "seriesContainer": { "draggable": false, "resizable": false } }
Disabling zoom
Disabling zoom is even easier. To do so we can simply use map's maxZoomLevel
and set it to 1
.
chart.maxZoomLevel = 1;
chart.maxZoomLevel = 1;
{ // ... "maxZoomLevel": 1 }
And, just in case we want to retain the auto-zoom functionality when users click on a country, we can temporarily reset maxZoomLevel
when click happens, zoom to country, then set it back to one:
polygonTemplate.events.on("hit", function (event) { chart.maxZoomLevel = 32; chart.zoomToMapObject(event.target); chart.maxZoomLevel = 1; });
polygonTemplate.events.on("hit", function (event) { chart.maxZoomLevel = 32; chart.zoomToMapObject(event.target); chart.maxZoomLevel = 1; });
{ // ... "series": [{ // ... "mapPolygons" : { "events": { "hit": function(event) { chart.maxZoomLevel = 32; chart.zoomToMapObject(event.target); chart.maxZoomLevel = 1; } } } }] }
Disabling double-click zoom
Double-click zooming reacts to double click (or tap) on two sets of containers: chartContainer
and seriesContainer
.
The trick is to disable "doublehit"
event on both:
chart.seriesContainer.events.disableType("doublehit"); chart.chartContainer.background.events.disableType("doublehit");
chart.seriesContainer.events.disableType("doublehit"); chart.chartContainer.background.events.disableType("doublehit");
{ // ... "events": { "inited": function(ev) { var chart = ev.target; chart.seriesContainer.events.disableType("doublehit"); chart.chartContainer.background.events.disableType("doublehit"); } } }
Full example
Here's a full working example with everything above in it:
See the Pen amCharts 4: Disabling pan and zoom on Map Chart by amCharts (@amcharts) on CodePen.24419
Further reading
If you ended up here, you might also be interested in the following: