Search code examples
javascriptamchartsamcharts4ammap

amcharts, disable panning only when zoomed out

How can I disable panning (dragging) in AmCharts map only when it's fully zoomed out.

I tried using chart.seriesContainer.draggable = false; but it completely disable the panning, but i wanna be able to drag the map when I zoom in.

Solution

  • You can adjust map interaction behavior via the MapChart.panBehavior property and monitor for when the zoomLevel has changed via the "zoomlevelchanged" event, e.g.:

    chart.panBehavior = "none";
chart.events.on("zoomlevelchanged", function(){
  // queue event loop so a final zoomlevelchanged can be "cauight"
  setTimeout(
    function() {
      if (chart.zoomLevel <= 1) {
        chart.panBehavior = "none";
      } else if (chart.zoomLevel > 1) {
        chart.panBehavior = "move";
      }
    }, 0);
});

    Here's a demo:

    https://codepen.io/team/amcharts/pen/8d767bd62c8cb238ecb633e2123317ed