How to set a limit for zoom in / out feature?

plotly.js
1

Hi There

I try to set a limit for zoom in / out, the purpose of this is to stop the chart looks too small / big in the container.

I try to find a event for zoom in / out only, but I only can find a example using event “plotly_relayout”. So all relayout action will trigger this event not only zoom in / out. Also I am not sure how to do a min/max zoom level check or calculation, is there any existing function / event I can use to solve this problem.

Thanks
Tony

2

This http://codepen.io/etpinard/pen/vXrRLR might help you get started.

3

Hi etienne
Thanks for you suggestion, but I still not sure what’s the best way to stop relayout (zoom in / zoom out). Inside the relayout event callback function, the resize action is already done.
any suggestion?

Thanks

4

Hello there!
I can tell you what i do, it’s not a perfect solution because i haven’t find a way to stop relayout if the zoom level is too low or too hight.
In the event object i get the max and min values of the x axis and do the relayout again:
var update = {‘xaxis.range’: [min_val, max_val]};
Plotly.relayout(“placeholder”, update);

5

Thanks Narghast, that could be a solution :slight_smile:

6

Hi. I used the technique below. Therefore, I can dynamically set the minimum zoom level

 var initialCountries = [...new Set(markerPoints.map(e => e.country))];
    var initialLat= 55.4414;
    var initialLon= 65.3181;
    var initialZoom = 2;

    if (initialCountries.length === 1){
      initialLat = markerPoints[0].lat;
      initialLon = markerPoints[0].lon;
      initialZoom = 3; 
    }

myPlot.on('plotly_relayout',(e)=>{
    var zoom_level = e['mapbox.zoom'];
    if (zoom_level < initialZoom){
      layout.mapbox.zoom = initialZoom
      layout.mapbox.center = {lat: initialLat, lon: initialLon}
      Plotly.relayout(myPlot, layout)
    }
  })