Skip to main content

Toolbar

Leaflet-Geoman Toolbar

Leaflet-Geoman Toolbar

You can add a toolbar to the map to use Leaflet-Geoman features via a user interface.

// add Leaflet-Geoman controls with some options to the map  
map.pm.addControls({
position: 'topleft',
drawCircleMarker: false,
rotateMode: false,
});

The following methods are available on map.pm:

MethodReturnsDescription
addControls(options)-Adds the Toolbar to the map. The options are optional. Buttons can be removed with setting them to false.
removeControls()-Removes the Toolbar from the map.
toggleControls()-Toggle the visiblity of the Toolbar.
controlsVisible()BooleanReturns true if the Toolbar is visible on the map.

See the available options in the table below.

OptionDefaultDescription
position'topleft'Toolbar position, possible values are 'topleft', 'topright', 'bottomleft', 'bottomright'
positionsObjectThe position of each block (draw, edit, custom, options⭐) can be customized. If not set, the value from position is taken. Default: {draw: '', edit: '', options: '', custom: ''} Block Position
drawMarkertrueAdds button to draw Markers.
drawCircleMarkertrueAdds button to draw CircleMarkers.
drawPolylinetrueAdds button to draw Line.
drawRectangletrueAdds button to draw Rectangle.
drawPolygontrueAdds button to draw Polygon.
drawCircletrueAdds button to draw Circle.
drawTexttrueAdds button to draw Text.
editModetrueAdds button to toggle Edit Mode for all layers.
dragModetrueAdds button to toggle Drag Mode for all layers.
cutPolygontrueAdds button to cut a hole in a Polygon or Line.
removalModetrueAdds a button to remove layers.
rotateModetrueAdds a button to rotate layers.
oneBlockfalseAll buttons will be displayed as one block Customize Controls.
drawControlstrueShows all draw buttons / buttons in the draw block.
editControlstrueShows all edit buttons / buttons in the edit block.
customControlstrueShows all buttons in the custom block.
optionsControlstrueShows all options buttons / buttons in the option block ⭐.
pinningOptiontrueAdds a button to toggle the Pinning Option ⭐.
snappingOptiontrueAdds a button to toggle the Snapping Option ⭐.
splitModetrueAdds a button to toggle the Split Mode for all layers ⭐.
scaleModetrueAdds a button to toggle the Scale Mode for all layers ⭐.
autoTracingOptionfalseAdds a button to toggle the Auto Tracing Option ⭐.

To pass options to the buttons you have two ways:

// make polygon not snappable during draw  
map.pm.enableDraw('Polygon',{ snappable: false });
map.pm.disableDraw();
// make all layers not snappable during draw  
map.pm.setGlobalOptions({ snappable: false });

The options will persist, even when the mode is enabled/disabled via the toolbar.

All available options for drawing and editing are specified in the sections below.

Customization

To customize the toolbar, please look at the customization page