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.