Measurement annotations

To create measurement annotations in WebViewer, click the Measure button in the top header, then select one of the measurement tools. Next use the selected tool to create a measurement annotation on the document. An overlay with scale and measurement information will show up when you are creating or selecting a measurement annotation.

If there's no scale created before, the Scale modal will pop up when clicking on the document. Click the Create button to create a new scale. This initial scale will be applied to all the measurement tools.

The following example shows how you can determine if an annotation is a measurement annotation, and logs the scale and precision of it after it's added:

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager } = instance.Core;
4
5    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
6      if (action === 'add') {
7        // An annotation is an measurement annotation if it contains a Measure property
8        const measurementAnnotations = annotations.filter(annotation => annotation.Measure);
9
10        measurementAnnotations.forEach(annotation => {
11          console.log(annotation.Scale);
12          console.log(annotation.Precision);
13        });
14      }
15    });
16  });

1WebViewer(...)
2  .then(instance => {
3    const { docViewer, annotManager } = instance;
4
5    annotManager.on('annotationChanged', (annotations, action) => {
6      if (action === 'add') {
7        // An annotation is an measurement annotation if it contains a Measure property
8        const measurementAnnotations = annotations.filter(annotation => annotation.Measure);
9
10        measurementAnnotations.forEach(annotation => {
11          console.log(annotation.Scale);
12          console.log(annotation.Precision);
13        });
14      }
15    });
16  });