Solution 1 :

You can apply the drawing mode using draw.changeMode(‘draw_polygon’). This would trigger the same event as the original button would do. Therefore you can get rid of that.

document.getElementById('button').onclick = function () {


Problem :

I am trying to build a custom controller for a map using Mapbox GL JS which includes a Draw polygon functionality. But when I wish to include the Draw polygon as per the Mapbox Documentation, it shows a menu on top right of the screen.

This is how it looks whenever I add the JS shown in

This is the JS code which works Mapbox GL JS documentation has provided

var draw = new MapboxDraw({
// Instead of showing all the draw tools, show only the line string and delete tools
displayControlsDefault: false,
controls: {
    line_string: true,
    polygon: true,
    point: true,
    trash: true


// Add the draw tool to the map

I want to build a custom button which does the same function of allowing me to draw over a map.

I wish to use this button and it should open the draw cursor similar to when I click on draw function in their default menu

How can I going about doing this?


Comment posted by Alexander

But this way the original control is visible too!

Comment posted by botivegh

@Alexander even if you remove the: controls: {line_string: true,polygon: true, point: true, trash: true} lines from your code?

Comment posted by Alexander

Yep. Even for plain constuctor initialization. There is approach to patch the original MapboxDraw and add custom buttons. But it was such a pain that eventually I’ve sticked to the original MapboxDraw and decided to live with it 🙂

Comment posted by DocC

works for me if I set ‘false’ for controls explicitly