Section:

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

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

Related Links

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.

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

Related Links

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.

1WebViewer(...)
2  .then(instance => {
3    // set the zoom level with percentage
4    instance.UI.setZoomLevel('150%');
5    // set the zoom leve with a number
6    instance.UI.setZoomLevel(1.5);
7  });

Related Links

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.

1WebViewer(...)
2  .then(instance => {
3    // set the max zoom level
4    instance.UI.setMaxZoomLevel('150%') // or instance.UI.setMaxZoomLevel(1.5)
5
6    // set the min zoom level
7    instance.UI.setMinZoomLevel('150%') // or instance.UI.setMinZoomLevel(1.5)
8  });

Related Links

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.

1WebViewer(...)
2  .then(instance => {
3    const zoomStepFactors = instance.UI.getZoomStepFactors();
4    console.log(zoomStepFactors);
5    // zoomStepFactors has the structure as follow:
6    //  [
7    //    {step: 7.5, startZoom: 0},
8    //    {step: 25, startZoom: 80},
9    //    {step: 50, startZoom: 150},
10    //    {step: 100, startZoom: 250},
11    //    {step: 200, startZoom: 400},
12    //    {step: 400, startZoom: 800},
13    //    {step: 800, startZoom: 3200},
14    //    {step: 1600, startZoom: 6400},
15    //  ]
16  });

Related Links

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.

1WebViewer(...)
2  .then(instance => {
3    instance.UI.setZoomStepFactors(
4      [
5        {
6          step: 5,
7          startZoom: 0
8        },
9        {
10          step: 10,
11          startZoom: 200
12        }
13      ]
14    );
15  })

Related Links

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.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales