Draw a polygon from widget

1727
6
Jump to solution
05-10-2016 06:32 AM
Alexwang
Occasional Contributor II

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,

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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();
        }
      },
0 Kudos
Alexwang
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
0 Kudos
Alexwang
Occasional Contributor II

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
Alexwang
Occasional Contributor II

Great! Thanks Robert.

0 Kudos