Zooming in WebViewer

WebViewer provides several APIs for working with the zoom level.

To get the current zoom level, you can use the getZoomLevel API. It will return the current zoom level value in decimal. For example, if the returned value is 0.5, it means the current zoom level is 50%.

WebViewer({
  // options here
}, document.getElementById('viewer'))
  .then(instance => {
    // returns the value in decimal, ex. 0.5
    console.log(instance.UI.getZoomLevel());
  });

To get the maximum/minimum zoom level, you can use getMaxZoomLevel or getMinZoomLevel. The returned value is a decimal that represents the zoom level. For example, if the returned value is 2.5, it means a 250% zoom level.

WebViewer(...)
  .then(instance => {
    // max zoom level
    // returns 99.99, indicates the maximum zoom level is 9999% in the viewer
    console.log(instance.UI.getMaxZoomLevel());
    // min zoom level
    // returns 0.05, indicates the minimum zoom level is 5% in the viewer 
    console.log(instance.UI.getMinZoomLevel());
  });

To modify the zoom level with code, you can simply use the setZoomLevel API. It takes percentage in a string or a number as parameter.

WebViewer(...)
  .then(instance => {
    // set the zoom level with percentage
    instance.UI.setZoomLevel('150%');
    // set the zoom leve with a number
    instance.UI.setZoomLevel(1.5);
  });

To modify the maximum/mininum zoom level, you can achieve by using setMaxZoomLevel and setMinZoomLevel. Similar to the setZoomLevel, both methods take percentage in a string or a number as parameter.

WebViewer(...)
  .then(instance => {
    // set the max zoom level
    instance.UI.setMaxZoomLevel('150%') // or instance.UI.setMaxZoomLevel(1.5)

    // set the min zoom level
    instance.UI.setMinZoomLevel('150%') // or instance.UI.setMinZoomLevel(1.5)
  });

A zoom step is the percentage increase/decrease when you click the zoom in/out button in the tool bar, with the mouse wheel scrolling, or keyboard shortcuts.

WebViewer provides APIs that allows user to inspect and customize the zoom step size.

To inspect the configuration of zoom step size, you can use the getZoomStepFactors API.

WebViewer(...)
  .then(instance => {
    const zoomStepFactors = instance.UI.getZoomStepFactors();
    console.log(zoomStepFactors);
    // zoomStepFactors has the structure as follow:
    //  [
    //    {step: 7.5, startZoom: 0},
    //    {step: 25, startZoom: 80},
    //    {step: 50, startZoom: 150},
    //    {step: 100, startZoom: 250},
    //    {step: 200, startZoom: 400},
    //    {step: 400, startZoom: 800},
    //    {step: 800, startZoom: 3200},
    //    {step: 1600, startZoom: 6400},
    //  ]
  });

In this example, the returned zoomStepFactors array indicates each zoom step is 7.5% when the zoom level is between 0% and 80%. Furthermore, each zoom step will be 25% when the zoom level is between 80% and 150%.

To change the zoom step, you can use the setZoomStepFactors API. For example, if you want the zoom step to be more precise as 5% between zoom level 0% to 200%, and 10% as the zoom step after zoom level 200%, simply pass the zoomStepFactors object describing the various zoom behaviors at various levels.

WebViewer(...)
  .then(instance => {
    instance.UI.setZoomStepFactors(
      [
        {
          step: 5,
          startZoom: 0
        },
        {
          step: 10,
          startZoom: 200
        }
      ]
    );
  })