Add draw_circle button to MapboxDraw controls

[zakjan]

Currently there is no API for adding custom buttons, see mapbox/mapbox-gl-draw#874

[Aliber009]

Actually there s one , I will share it with you :
class extendDrawBar {
constructor(opt) {
let ctrl = this;
ctrl.draw = opt.draw;
ctrl.buttons = opt.buttons || [];
ctrl.onAddOrig = opt.draw.onAdd;
ctrl.onRemoveOrig = opt.draw.onRemove;
}
onAdd(map) {
let ctrl = this;
ctrl.map = map;
ctrl.elContainer = ctrl.onAddOrig(map);
ctrl.buttons.forEach((b) => {
ctrl.addButton(b);
});
return ctrl.elContainer;
}
onRemove(map) {
let ctrl = this;
ctrl.buttons.forEach((b) => {
ctrl.removeButton(b);
});
ctrl.onRemoveOrig(map);
}
addButton(opt) {
let ctrl = this;
var elButton = document.createElement('button');
elButton.className = 'mapbox-gl-draw_ctrl-draw-btn';
if (opt.classes instanceof Array) {
opt.classes.forEach((c) => {
elButton.classList.add(c);
});
}
elButton.addEventListener(opt.on, opt.action);
ctrl.elContainer.appendChild(elButton);
opt.elButton = elButton;
}
removeButton(opt) {
opt.elButton.removeEventListener(opt.on, opt.action);
opt.elButton.remove();
}
}
now add the draw bar >>> map.addControl(drawBar) with your button

[zakjan]

Thanks, but this is a monkey patch for the entire application with access to MapboxDraw instance. It's not an official plugin API. I can only document this approach in the readme.

[Aliber009]

yes indeed , if you have any idea how I can change the mode using a simple button , im stuck