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);
});