can I use my custom control bar to draw?

[dyh333]

hi, can I use my custom control bar to draw, not use the MapboxDraw's controls? thanks

[fxi]

You can simply use mapbox-gl-js method to add your controls : https://docs.mapbox.com/mapbox-gl-js/api/#icontrol

That, with hiding the default bar controls would do the trick.

You can also make a monkey patch (demo) to add more buttons to the bar :

var draw = new MapboxDraw();
var drawBar = new extendDrawBar({
  draw: draw,
  buttons: [
    {
      on: 'click',
      action: save,
      classes: ['fa', 'fa-floppy-o']
    }
  ]
});

map.addControl(drawBar, 'top-left');

/**
* Helpers
*/
function save() {
  console.log('saved');
}

/**
 * Patch
 */

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();
  }
}

I just started to use it. There is maybe a better way.

[tomasdev]

@fxi thoughts on having buttons be setupable via onSetup() of a mode? currently buttonElements is a private object from ui.js that would be very useful to be able to extend it without having to create this whole extend class you provided.
I could make a PR for it

[fxi]

Yep, a PR with a proper way of doing that could be more useful than the thing I wrote.
No idea if that fits the need for other people. Try to reach one of the maintainers. :)
And by the way, I had no idea what mode was before 3 minutes ago : I'm definitely useless here.

[rodmaz]

@tomasdev Does this mean we cannot right now use the default mapbox-gl-draw control box and simply add additional buttons to it? I could not find any example on how to do it.

[Aliber009]

hello , how I can add an icone with the patch monkey

[fxi]

@Aliber009 You should probably use modes instead – but as you ask :

 [...]
  //  add a save button using the "monkey patch"
  const draw = new MapboxDraw();
  const drawBar = new extendDrawBar({
    draw: draw,
    buttons: [{
      on: 'click',
      action: ()=>{ alert('🐒')},
      // Here ⤵️⤵️⤵️⤵️  you can change classes. E.g. using font awesome classes or your own. 
      classes: ['fa', 'fa-floppy-o']
    }]
  });
  map.addControl(drawBar);

Or you can modify the patch to add text content :
https://jsfiddle.net/fxi/vr10g3zc/

[jo-chemla]

@Aliber009 You should probably use modes instead – but as you ask :

Hi there! From my understanding, the modes property only allows you to select togglable modes. Controls to be displayed on the toolbar can only be selected from existing controls (draw polygon, line, trash etc). Custom Controls cannot be added to the toolbar. Or should I define the icon associated to the custom control somewhere in the definition of that control?

const modes = MapboxDraw.modes
modes['draw_rectangle'] = DrawRectangle;
// ...
<MapboxDraw>
  modes={modes}
  displayControlsDefault={false}
  controls={{
    polygon: true,
    trash: true, 
    // rectangle: true // custom control display
  }}
</MapboxDraw>

Adding rectangle to the controls property results in this error:
Type '{ polygon: true; trash: true; rectangle: true; }' is not assignable to type 'MapboxDrawControls'. Object literal may only specify known properties, and 'rectangle' does not exist in type 'MapboxDrawControls'.ts(2322)

Edit: seems this is because the DrawRectangle custom control does not implement draw.activateUiButton('image') on setup as shown in other default polygon/line_string components here: activateUiButton

[Aliber009]

Thanks it worked

[mtjosue]

@Aliber009 You should probably use modes instead – but as you ask :

 [...]
  //  add a save button using the "monkey patch"
  const draw = new MapboxDraw();
  const drawBar = new extendDrawBar({
    draw: draw,
    buttons: [{
      on: 'click',
      action: ()=>{ alert('🐒')},
      // Here ⤵️⤵️⤵️⤵️  you can change classes. E.g. using font awesome classes or your own. 
      classes: ['fa', 'fa-floppy-o']
    }]
  });
  map.addControl(drawBar);

Or you can modify the patch to add text content : https://jsfiddle.net/fxi/vr10g3zc/

Hello, I'm trying to simply give all the functionality of the draw_polygon button to a new custom button. It just seems like it can be hard to understand its functionality, replacing this icon with the word/text = "Draw" might be more intuitive for the regular user. Any guidance on how I can accomplish this functionality?, thank you ahead of time

[mtjosue]

something like this but the functionality in