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');
}
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 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.
How can I going about doing this?
But this way the original control is visible too!
@Alexander even if you remove the: controls: {line_string: true,polygon: true, point: true, trash: true} lines from your code?
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 🙂
works for me if I set ‘false’ for controls explicitly