Docs

Geoman Logo

Toolbar

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

MethodReturnsDescription
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.

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);
OptionDefaultDescription
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.
actionsAction 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
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.

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("πŸ™‹β€β™‚οΈ");
    },
  },
];

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:

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