Toolbar

Toolbar

The following methods are available on map.pm.Toolbar:

Method	Returns	Description
changeControlOrder(order)	-	Pass an array of button names to reorder the buttons in the Toolbar.
getControlOrder()	Array	Current 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()	Object	Returns 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)	Object	Creates 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.

map.pm.addControls({
  drawControls: true,
  editControls: false,
  optionsControls: true,
  customControls: true,
  oneBlock: false,
});

Reorder the buttons with:

map.pm.Toolbar.changeControlOrder([
  "drawCircle",
  "drawRectangle",
  "removalMode",
  "editMode",
]);

Receive the current order with:

map.pm.Toolbar.getControlOrder();

Toolbar Block Position

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

Possible values are 'topleft', 'topright', 'bottomleft', 'bottomright'.

map.pm.addControls({
  positions: {
    draw: "topright",
    edit: "topleft",
  },
});

map.pm.Toolbar.setBlockPosition("draw", "topright");

map.pm.Toolbar.getBlockPositions();

Adding New/Custom Controls

// add a new custom control
map.pm.Toolbar.createCustomControl(options);

Option	Default	Description
name	Required	Name 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.
toggle	true	Control can be toggled.
disabled	false	Control is disabled.
disableOtherButtons	true	Control disables other buttons if enabled.
disableByOtherButtons	true	Control 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
map.pm.Toolbar.copyDrawControl("Rectangle", {
  name: "RectangleCopy",
  block: "custom",
  title: "Display text on hover button",
  actions: actions,
});

Actions

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

Option	Default	Description
text	Required	Visible text.
title	''	Text showing when you hover the action.
onClick	-	Function fired when clicking the action.
name	''	CSS class action-{name} is added to the action.

Here, we configure 3 separate actions in an array.

// creates new actions
const actions = [
  // uses the default 'cancel' action
  "cancel",
  // 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: () => {
      alert("🙋‍♂️");
    },
    name: "click-me-action"
  },
];

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

Change actions of an existing button:

map.pm.Toolbar.changeActionsOfControl("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:

Event	Params	Description	Output
pm:buttonclick	e	Fired when a Toolbar button is clicked.	btnName, button
pm:actionclick	e	Fired when a Toolbar action is clicked.	text, action, btnName, button