Adding a Custom Button in Sketch Widget Toolbar

PaulAnderson2k

I want to add my own button into the sketch widget toolbar.

This forum post will create the button in a new div outside of the Sketch Widget.

With the code:

view.when(() => {
    const sketch = new Sketch({
      layer: graphicsLayer,
      view: view,
      // graphic will be selected as soon as it is created
      creationMode: "update"
    });

    view.ui.add(sketch, "top-right");

    var element = document.createElement('div');
    element.className = "esri-icon-collection esri-widget--button esri-widget esri-interactive";
    element.addEventListener('click', function (evt) {
      console.log("clicked");
    })

    view.ui.add(element, "top-right");

  });

I'd really want to include that button alongside all of the other buttons - and still control what tools are available.

Is there a recommended ways to do this? Are there any articles?

 

ReneRubalcava

The widget isn't extensible, so you can't add more buttons. You can use the SketchViewModel and build a custom component around that.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html

Depending what you want it to do though, you could have a container that wraps the Sketch widget and your custom button along side each other, so it looks like a new button, but when you click it, you can call methods on the Sketch widget or the layer, not sure what your button would do.