Maps SDK for Web

tt.plugins.DrawingTools

This plugin provides a drawing functionality to your map.

To see the plugin in action, visit: Drawing tools example
or sample use for measuring areas, visit: Area measurement example

CSS stylesheet

DrawingTools.css - CSS declarations for DrawingTools plugin. Without this stylesheet, dependant elements will be broken. It can be imported:

  • in the <head> of your HTML document:
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/DrawingTools/<version>/DrawingTools.css'>
  • or if you're using Webpack with css-loader:
    import '@tomtom-international/web-sdk-plugin-drawingtools/dist/DrawingTools.css';

To find current plugin's version, visit the Downloads page.

For more details on how to use the configuration options, please refer to the documentation below.

Usage

In order to draw a shape, please choose a respective tool by clicking on it or pressing a shortcut.

Context menu

When selecting a feature using the "select tool", a relevant context menu will appear above the feature. The context menu offers controls depending on the selected feature type.
Available context menu controls:

  • fill control - allows to change the feature background
  • border control - allows to change the feature stroke line color
  • line width control - allows to change the feature stroke line width
  • corner amount control - allows to change the feature shape with specified amount of corners
  • delete control - deletes the selected feature

Feature scaling/rotation

A dedicated wrapper tool helps you make precise feature modification.

When you select a feature, please do double click on it or press the "Edit" button from the context menu, a wrapper appears around the feature.

By dragging the wrapper points, the feature inside will be scaled.

You can find the rotation button at the bottom right corner of the wrapper.

Available tools

select
- lets you select objects by clicking or dragging over them
- lets you modify selected object by dragging its corners
- depend on a feature type, above the feature appears a context menu
- shortcut - V
pen
- lets you draw straight segments with great precision
- to start drawing click on the map
- to finish draw action do double click on the map, click on an initial point or press the ESC button
- available context menu controls: fill, border, delete
- shortcut - P
line
- allows you to draw a multipoint line on the map
- to start drawing click on the map
- to finish draw action do double click on the map or press the ESC button
- available context menu controls: line width, border, delete
- shortcut - L
rectangle
- allows you to draw rectangular shapes
- to start drawing do mouse down on the map and drag it
- to finish draw action do mouse up
- available context menu controls: fill, border, delete
- shortcut - R
ellipse
- allows you to draw elliptical shapes
- to start drawing do mouse down on the map and drag it
- to finish draw action do mouse up
- available context menu controls: fill, border, delete
- shortcut - E
polygon
- allows you to draw a feature with defined amount of corners
- to start drawing do mouse down on the map and drag it
- to finish draw action do mouse up
- available context menu controls: fill, border, corner amount, delete
- shortcut - Y

Constructor

tt.plugins.DrawingTools([options])

Example
const ttDrawingTools = new tt.plugins.DrawingTools({
  ttMapsSdk: tt,
  controls: {
      line: false
  }
});

const map = tt.map({
  key: '<your-tomtom-maps-sdk-key>',
  container: 'map'
});

map.addControl(ttDrawingTools, 'top-left');
Parameters
Name Description
options
Object
default:None
The Options object.
options.controls
Object
default:None
The object with tools configuration.
options.controls.select
Boolean
default:true
Hides or shows Select Tool button
options.controls.pen
Boolean
default:true
Hides or shows Pen Tool button
options.controls.line
Boolean
default:true
Hides or shows Line Tool button
options.controls.rectangle
Boolean
default:true
Hides or shows Rectangle Tool button
options.controls.ellipse
Boolean
default:true
Hides or shows Ellipse Tool button
options.controls.polygon
Boolean
default:true
Hides or shows Polygon Tool button
options.orientation
'vertical' | 'horizontal'
default:'vertical'
Sets controls orientation.
options.cssStyleCheck
Boolean
default:true
If true, the plugin will check if required css styles are added.

Methods

exportFeatures( ): Array

Returns

Array containing geojson geometry types: LineString or Polygon.

importFeatures(features): Void

Parameters
Name Description
features
Array
default:None
Array of Geojson geometry types: LineString or Polygon.
Returns

onAdd(map): HTMLElement

Binds the map with the plugin instance.

Parameters
Name Description
map
Maps.Map
default:None
Returns

container

onRemove( ): Void

Removes the plugin from the map.

Returns

Events

All the class events are keys of the Events static member.

To learn more about how to listen events please refer to the Evented class.

tomtom.drawingtools.changed

Fired when feature was: scaled, rotated, changed shape by dragging the feature point.
Properties
Name Description
event
Object
default:None
event.data
Object
default:None
The data object containing event details.
event.data.features
Array
default:None
The array which contains changed features.

tomtom.drawingtools.created

Fired when feature was created.
Properties
Name Description
event
Object
default:None
event.data
Object
default:None
The data object containing event details.
event.data.features
Array
default:None
The array which contains created feature.

tomtom.drawingtools.deleted

Fired when feature was deleted.
Properties
Name Description
event
Object
default:None
event.data
Object
default:None
The data object containing event details.
event.data.features
Array
default:None
The array which contains deleted features.

tomtom.drawingtools.dragged

Fired when feature was dragged.
Properties
Name Description
event
Object
default:None
event.data
Object
default:None
The data object containing event details.
event.data.features
Array
default:None
The array which contains dragged features.