Skip to main content



The following methods are available on

changeControlOrder(order)-Pass an array of button names to reorder the buttons in the Toolbar.
getControlOrder()ArrayCurrent order of the buttons in the Toolbar.
setBlockPosition(block,position)-The position of a block (draw, edit, custom, options⭐) in the Toolbar can be changed. If not set, the value from position of the Toolbar is taken. Details
getBlockPositions()ObjectReturns a Object with the positions for all blocks.
setButtonDisabled(name, Boolean)-Enable / disable a button.
createCustomControl(options)-To add a custom Control to the Toolbar. Details
copyDrawControl(instance, options)ObjectCreates a copy of a draw Control. Returns the drawInstance and the control.
changeActionsOfControl(name, actions)-Change the actions of an existing button.

Customize Controls

There are 4 control blocks in the Toolbar: draw, edit, custom and options
You can disable / enable entire blocks. To display the Toolbar as one block instead of 4, use oneBlock: true.{
drawControls: true,
editControls: false,
optionsControls: true,
customControls: true,
oneBlock: false,

Reorder the buttons with:[

Receive the current order with:;

Toolbar Block Position

You can set different positions per block draw, edit, options⭐, custom:

Possible values are 'topleft', 'topright', 'bottomleft', 'bottomright'.{
positions: {
draw: "topright",
edit: "topleft",
});"draw", "topright");;

Adding New/Custom Controls

// add a new custom control;
nameRequiredName of the control.
block''block of the control. draw, edit, custom, options
title''Text showing when you hover the control.
className''CSS class with the Icon.
onClick-Function fired when clicking the control.
afterClick-Function fired after clicking the control.
actions[ ]Action that appears as tooltip. Look under Actions for more information.
toggletrueControl can be toggled.
disabledfalseControl is disabled.
disableOtherButtonstrueControl disables other buttons if enabled.
disableByOtherButtonstrueControl disabled if other buttons is enabled.

Inherit from an Existing Control

This effectively copies an existing control that you can customize.

// copy a rectangle and customize its name, block, title and actions"Rectangle", {
name: "RectangleCopy",
block: "custom",
title: "Display text on hover button",
actions: actions,


You can add your own actions to existing or custom buttons.

Here, we configure 3 separate actions in an array.

// creates new actions
const actions = [
// uses the default 'cancel' action
// creates a new action that has text, no click event
{ text: "Custom text, no click" },
// creates a new action with text and a click event
text: "click me",
onClick: () => {

Default actions available are: cancel, removeLastVertex, finish, finishMode.

Change actions of an existing button:"Rectangle", actions);

Pass actions to your custom buttons through the actions property mentioned under Inherit from an Existing Control

The following events are available on a map instance:

pm:buttonclickeFired when a Toolbar button is clicked.btnName, button
pm:actionclickeFired when a Toolbar action is clicked.text, action, btnName, button