DrawingTools Plugin
This plugin provides a drawing functionality to your map (@tomtom-international/web-sdk-maps).
Instalation
Just do:
npm i @tomtom-international/web-sdk-plugin-drawingtools
You must also include the drawing tools stylesheet in your project. It's located here:
node_modules/@tomtom-international/web-sdk-plugin-drawingtools/dist/DrawingTools.css
Usage
In this example we assume that you already have the TomTom Maps SDK for Web library included.
import tt from '@tomtom-international/web-sdk-maps';
import DrawingTools from '@tomtom-international/web-sdk-plugin-drawingtools';
const ttDrawingTools = new DrawingTools({
ttMapsSdk: tt
});
const ttMap = tt.map({
key: '<your-tomtom-maps-sdk-key>',
container: 'map',
center: [19.45773, 51.76217],
zoom: 12
});
ttMap.addControl(ttDrawingTools, 'top-left');
Handling events
Drawing tools emits 4 different events:
- tomtom.drawingtools.created - Fired when feature was created.
- tomtom.drawingtools.deleted - Fired when feature was deleted.
- tomtom.drawingtools.dragged - Fired when feature was dragged.
- tomtom.drawingtools.changed - Fired when feature was: scaled, rotated, changed shape by dragging the feature point.
If you want to subscribe to the event:
ttDrawingTools.on('tomtom.drawingtools.created', function(feature) {
console.log(feature);
});