Draw a polygon from widget

[Alexwang]

I am a newbie to WAB development and Dojo. I am working a custom widget which allows user Draw a Polygon on the map and does some spatial queries. can anybody share the codes or point me to the resources (sample codes and projects) how to achieve this? I have explored the out-of-box Draw widget, but what I need is just the Draw Polygon feature. Please help! Thanks,

[RobertScheitlin__GISP · Accepted solution]

Gang,

  If you look at code in the custom eLocate widget you will see that I use the JS API DrawTool to draw a point on the map (you of course would choose Polygon instead).

Here are the main three functions I am using for that:

_reverseGeocodeToggle: function () {
        var node = this.revGeocodeBtn;
        if(domClass.contains(node, 'selected')){
          domClass.remove(node, "selected");
          this.drawToolBar.deactivate();
          this.drawActive = false;
          esriBundle.toolbars.draw.addPoint = this._defaultAddPointStr;
          this.enableWebMapPopup();
        } else {
          domClass.add(node, "selected");
          this.disableWebMapPopup();
          esriBundle.toolbars.draw.addPoint = this.nls.drawpointtooltip;
          this.drawToolBar.activate(Draw.POINT);
          this.drawActive = true;
        }
      },

      _initDraw: function () {
        this._defaultAddPointStr = esriBundle.toolbars.draw.addPoint;
        this.drawToolBar = new Draw(this.map);
        this.map.addLayer(this.drawLayer);
        this.pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X, 12, null, new Color(255,0,0,255));
        this.drawToolBar.setMarkerSymbol(this.pointSymbol);
        this.own(on(this.drawToolBar, 'draw-end', lang.hitch(this, this._onDrawEnd)));
      },

      _onDrawEnd: function(event) {
        var g = new Graphic(event.geometry, this.pointSymbol, null, null);
        this.drawLayer.clear();
        this.drawLayer.add(g);
        this.locator.locationToAddress(event.geometry, 30, lang.hitch(this, this.rlocateResult),
                                      lang.hitch(this, this.locateError));
        if(!this.config.keepinspectoractive){
          var node = this.revGeocodeBtn;
          domClass.remove(node, "selected");
          this.drawToolBar.deactivate();
          this.drawActive = false;
          esriBundle.toolbars.draw.addPoint = this._defaultAddPointStr;
          this.enableWebMapPopup();
        }
      },

[Alexwang]

Thanks Robert for your quick response. Where can i find your eLocate widget?

[RobertScheitlin__GISP]

Enhanced Locate Widget Version 2.0.1 - 04/26/2016

For a listing of custom WAB widget look here:

Web AppBuilder Custom Widgets 

[Alexwang]

Thanks Robert. I was able to modify your codes and make them for my purpose.

One more question - can you please point me to a good site which well explain the life cycle of widget such as startup, postCreate and so on?

[RobertScheitlin__GISP]

Gang,

  Sure here is the reference: dijit._WidgetBase — The Dojo Toolkit - Reference Guide

Be sure to mark this thread as answered by clicking on the "Correct Answer" link on the thread that answered your question.

[Alexwang]

Great! Thanks Robert.