Draw Control

The Draw Control provides an interface for drawing and editing geometries directly on the map. It supports various drawing modes including points, lines, polygons, and more complex shapes.

Constructor

new GTSWebSDKDrawControl.GTSWebSDKMeasureControl(options) OR new GTSWebSDKDrawControl.GTSWebSDKDrawControl(options)
new GTSWebSDKDrawControl.GTSWebSDKMeasureControl(options?: DrawOptions)
OR
new GTSWebSDKDrawControl.GTSWebSDKDrawControl(options?: DrawOptions)

Creates a new Draw Control with the specified options.

Parameters:

Name Type Description
options DrawOptions Options for configuring the draw control's behavior and available modes.

Example:

const drawMeasureControl = new GTSWebSDKDrawControl.GTSWebSDKMeasureControl({
  modes: [
    'point',
    'linestring',
    'polygon',
    'rectangle',
    'angled-rectangle',
    'circle',
    'sector',
    'sensor',
    'freehand',
    'select',
    'delete-selection',
    'delete',
    'download'
  ],
  open: true,
  computeElevation: false
});
map.addControl(drawMeasureControl, 'top-left');


const drawControl = new GTSWebSDKDrawControl.GTSWebSDKDrawControl({
  modes: [
    'point',
    'linestring',
    'polygon',
    'rectangle',
    'angled-rectangle',
    'circle',
    'sector',
    'sensor',
    'freehand',
    'select',
    'delete-selection',
    'delete',
    'download'
  ],
  open: true,
  computeElevation: false
});

//custom style
drawControl.measureOptions.modeOptions.point.styles= {
    "pointColor": "#FF0000",
    "pointWidth": 5,
    "pointOutlineColor": "#666666",
    "pointOutlineWidth": 1
};
map.addControl(drawControl, 'top-left');

Properties

The following properties are set via the DrawOptions object during construction.

modes
string[]

An array of drawing modes to enable in the control. Available modes include: 'point', 'linestring', 'polygon', 'rectangle', 'angled-rectangle', 'circle', 'sector', 'sensor', 'freehand', 'select', 'delete-selection', 'delete', 'download'.

open
boolean

If true, the draw control UI will be open by default when added to the map. **Default:** false.

computeElevation
boolean

If true, elevation data will be computed for drawn geometries. **Default:** false.

snap
boolean

If true, vertices will snap to existing features when drawing. **Default:** false.

Events

The Draw Control emits events related to drawing activities and geometry changes.

create
Event

Fired when a new geometry is created.

const drawInstance = drawControl.getDrawInstance();
drawInstance.on('create', (features) => {
   const all = drawInstance.getSnapshot();
   console.log('Drawing finished id: ', features);
});
update
Event

Fired when an existing geometry is updated.

const drawInstance = drawControl.getDrawInstance();
drawInstance.on('update', (features) => {
   const all = drawInstance.getSnapshot();
   console.log('Drawing finished id: ', features);
});
delete
Event

Fired when a geometry is deleted.

const drawInstance = drawControl.getDrawInstance();
drawInstance.on('delete', (features) => {
   const all = drawInstance.getSnapshot();
   console.log('Drawing finished id: ', features);
});
select
Event

Fired when the selection of geometries changes.

const drawInstance = drawControl.getDrawInstance();
drawInstance.on('select', (features) => {
   const all = drawInstance.getSnapshot();
   console.log('Drawing finished id: ', features);
});

Methods

getFeatures()
getFeatures(): GeoJSON

Returns all the features currently drawn on the map in GeoJSON format.

drawControl.getFeatures()
drawControl.getFeatures()
clear()
clear()

Clears all features from the map for the current drawing instance.

drawControl.clear();
addFeatures([GeoJSON])
addFeatures([GeoJSON])

Adds one or more GeoJSON features to the control and displays them on the map.