Disabling zoom and pan on a Map Chart

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:

Open in CodePen

Further reading

If you ended up here, you might also be interested in the following:

• Resetting Map Position/Zoom