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
map.addControl(draw);

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?

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 https://docs.mapbox./mapbox-gl-js/example/mapbox-gl-draw/

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
map.addControl(draw);

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?

• javascript
• html
• css
• mapbox
• mapbox-gl-js

Share Improve this question Follow asked Feb 17, 2020 at 16:59 escigsescigs 3111 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 () {
    draw.changeMode('draw_polygon');

}