Skip to main content
Skip table of contents

Drawing Tools

This feature is still in the Beta-version!

While we tried to ensure that everything already works as expected, please let us know if that is not the case or if you find features missing.

The drawing tools feature can be used to create or edit point and line data. Points can be added, moved or removed. With the available settings, it’s possible to fine tune the drawing tools to the needs of the user.

Multiple restrictions are available which can be used to restrict the point movement to either a grid, angular connections to neighboring lines or other geometry.

The complete API documentation of the attribute visualization module can be found here.

This is a feature that can be added via a separate CDN or npm-module on top of our viewer module.

To install it call

npm install --save @shapediver/viewer.features.drawing-tools

or if you use the viewer via a CDN just can just get the SDVDrawingTools property from the window object.

Initial Setup

The initial setup of the drawing tools is quite straightforward. After creating a viewport (and a session) you can create the drawing tools as follows:

  * Define the settings you want to use for the drawing tools
const customizationProperties: Settings = {
  // add your settings here  

  * Callback function for the drawing tool
  * executed when the drawing tool is updated
  * @param geometryData 
const onUpdate = async (pointsData: PointsData) => {
    console.log('Drawing tools updated', pointsData);

  * Callback function for the drawing tool
  * executed when the drawing tool is cancelled
const onCancel = () => {
    console.log('Drawing tools cancelled');

const drawingToolsApi: IDrawingToolsApi | undefined = createDrawingTools(viewport, { onUpdate, onCancel }, customizationProperties);

The settings object of the drawing tools is the most important part to fine tune the drawing tools. For further information on the settings that are available, please visit the API documentation.


In this example you can see how a line can be edited. The corresponding geometry data is then used as an input for the model to create the building.

Additional Examples

Additional example can be found on the viewer examples page in the drawing tools section.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.