Zooming in WebViewer

WebViewer provides several APIs for working with the zoom level.

Getting 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%.

JavaScript (SDK v8.0+)

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

UI.getZoomLevel

JavaScript (SDK v6.0+)

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

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.

JavaScript (SDK v8.0+)

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());
  });

UI.getMaxZoomLevel UI.getMinZoomLevel

JavaScript (SDK v6.0+)

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

UI.getMaxZoomLevel UI.getMinZoomLevel

Setting the zoom level

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.

JavaScript (SDK v8.0+)

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);
  });

UI.setZoomLevel

JavaScript (SDK v6.0+)

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

UI.setZoomLevel

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.

JavaScript (SDK v8.0+)

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)
  });

UI.setMaxZoomLevel UI.setMinZoomLevel

JavaScript (SDK v6.0+)

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

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

UI.setMaxZoomLevel UI.setMinZoomLevel

Customizing the zoom step

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.

JavaScript (SDK v8.0+)

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},
    //  ]
  });

UI.getZoomStepFactors

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const zoomStepFactors = instance.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},
    //  ]
  });

UI.getZoomStepFactors

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.

JavaScript (SDK v8.0+)

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

UI.setZoomStepFactors

JavaScript (SDK v6.0+)

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

UI.setZoomStepFactors

The units of the step and startZoom parameters are percentages, ex. 5 means 5%. The zoomStepFactors array should always contain a zoomStepFactor object with startZoom set to 0. Otherwise, an error will be printed.