Draw Tool Add-on
Contents
Draw tool allows us to draw on a map. Below are tools available,
- LineString tool
- Polygon tool
- Marker tool
- Delete
Example setup
View a working demo and follow the steps below to create your own
<link href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.3.css" rel="stylesheet">
<!-- Draw tool addon reference css -->
<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.3.js"></script>
<!-- Draw tool addon reference js -->
TrimbleMaps.APIKey = "YOUR_ACCESS_TOKEN";
var map = (window.map = new TrimbleMaps.Map({
container: "map",
style: TrimbleMaps.Common.Style.TRANSPORTATION,
zoom: 12.5,
center: [-77.01866, 38.888],
region: TrimbleMaps.Common.Region.NA,
}));
var Draw = new TrimbleMapsControl.Draw({
// Include other optional customization options
});
// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`.
map.addControl(Draw, "top-left");
Customization Options
| Parameter | Type/Values | Description |
|---|---|---|
displayControlsDefault
|
Boolean | Default: true The default value for controls. For example, if you would like all controls to be off by default, and specify an allowed list with controls, use displayControlsDefault: false
|
controls
|
Object | Hide or show individual controls. Each property’s name is a control, and value is a boolean indicating whether the control is on or off. Available control names are point, line_string, polygon, trash. By default, all controls are on. To change that default, use displayControlsDefault.
|
boxSelect
|
Boolean | Whether or not to enable box selection of features with shift+click+drag. If false, shift+click+drag zooms into an area. |
clickBuffer
|
Number | Number of pixels around any feature or vertex (in every direction) that will respond to a click. |
touchBuffer
|
Number | Number of pixels around any feature of vertex (in every direction) that will respond to a touch. |
Retrieve Coordinates
After you have drawn a feature (polygon, point, line, rectangle), you can retrieve its coordinates using the Draw.getAll(); method. The code below demonstrates how to capture the coordinates on a draw.create event.
TrimbleMaps.APIKey = "YOUR_API_KEY_HERE";
const map = new TrimbleMaps.Map({
container: "map", // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-77.38, 39], // starting position
zoom: 3, // starting zoom
});
var Draw = new TrimbleMapsControl.Draw({
// Include other optional customization options
});
// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`.
map.addControl(Draw, "top-left");
map.on("draw.create", (e) => {
// Once the feature is drawn this event will be triggered.
let data = Draw.getAll();
const coords = data["features"][0]["geometry"]["coordinates"][0];
// here we can capture the drawn feature's coordinates whenever new feature is drawn.
});