topic Re: Draw a polygon from widget in ArcGIS Web AppBuilder Questions

Draw a polygon from widget

Alexwang — Tue, 10 May 2016 13:32:01 GMT

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,

Re: Draw a polygon from widget

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:18:19 GMT

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