Pass DrawBox polygon into a query

[Helenpeng]

I am developing a Validation Widget that can tell if the free-drawn-polygon is inside the state boundary or not. I have the ArcGIS JavaScript code which run well in the Sandbox. The code is to use button-click to draw a polygon, and pass the polygon geometry into a query, then check the length of result. See the sandbox code (works) attached.

In the widget.js, I have added the jimu/dijit/DrawBox in the widget. I cannot figure out passing the drawn-polygon created by the DrawBox into my query. I tried the code attached and the error message showed “geometry null” and “queryTask.execute is not a function”. I am new to WAB and would appreciate some suggestions. The widget.js (not working) is attached.

Additionally, I know the WAB has a Query Widget. I look at the widget.js, which uses dojo/query, instead of esri/tasks/query. I wonder if I need to replace with dojo/query to make my widget run.

Thanks,

Helen

[RobertScheitlin__GISP]

Helen,

  Can you provide your Widget.html?

[RobertScheitlin__GISP · Accepted solution]

Helen,

   Here is how your code should look like in a WAB widget.

//Create a widget to validate if a polygon is inside the state boundary
define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    'dijit/_WidgetsInTemplateMixin',
    'esri/graphic',
    'esri/layers/GraphicsLayer',
    'esri/Color',
    'esri/symbols/SimpleLineSymbol',
    'esri/symbols/SimpleFillSymbol',
    'esri/tasks/query',
    'esri/tasks/QueryTask',
    'dojo/on',
    'jimu/dijit/DrawBox'
  ], function(
    declare,
    BaseWidget,
    _WidgetsInTemplateMixin,
    Graphic,
    GraphicsLayer,
    Color,
    SimpleLineSymbol,
    SimpleFillSymbol,
    Query,
    QueryTask,
    on,
    DrawBox
  ){
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
      baseClass: 'jimu-widget-myvalidate',
      name: 'MyValidate',

      _graphicsLayer: null,
      _polygonLayer: null,
      drawBox: null,

      postCreate: function() {
        this.inherited(arguments);
        this._initLayers();
        this.drawBox.setMap(this.map);
        this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));
      },

      startup: function() {
        this.inherited(arguments);
      },

      _initLayers: function() {
        this._graphicsLayer = new GraphicsLayer();
        this.map.addLayer(this._graphicsLayer);
      },

      _onDrawComplete: function(graphic) {
        var geometry = graphic.geometry;
        queryTask = new QueryTask("https://mapsdev02.os.uga.edu:6443/arcgis/rest/services/test_internal/test2/MapServer/1");
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["*"];
        query.outSpatialReference = map.SPATIAL_REL_INTERSECTS;
        query.geometry = geometry;
        console.log("geometry " + JSON.stringify(geometry));
        console.log("query " + JSON.stringify(query));

        queryTask.execute(query);

        queryTask.on("complete", lang.hitch(this, function(evt) {
          var fset = evt.featureSet;
          var resultFeatures = fset.features;
          if(resultFeatures.length == 0) {
            alert("Polygon is outside of Georgia boundary. ");
            return;
          }

          var newSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0, 38, 115, 1]), 2), new Color([0, 112, 255, 0.37]));
          this._graphicsLayer.add(new Graphic(geometry, newSymbol));
        }));
      }

    });
  });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[KenBuja]

Robert,

Should line 41 be

this.own(on(this.drawBox, 'draw-end', lang.hitch(this, this._onDrawComplete)));‍‍‍‍

[RobertScheitlin__GISP]

Ken,

   They both work, but you are right 'draw-end' is the more standardized event name.

[KenBuja]

Wouldn't your example use "onDrawEnd"? That's the name of the function in the DrawBox.js, which emits "draw-end"

[RobertScheitlin__GISP]

Ken,

  Actually that would be the event handler not the event itself. It is like the fact that DrawEnd is a constant for draw-end or vice versa.

[RobertScheitlin__GISP]

Interesting thing is esri Draw widget still uses the DrawEnd too:

this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawEnd)));‍

[KenBuja]

I noticed that as I researched this question. I was wondering where that constant comes from (and how do we know to use it). It doesn't appear in the DrawBox.js at all

[RobertScheitlin__GISP]

I know right. I think it is left over from 1.x of WAB. I took that line from my eSearch which I began development on back in WAB Beta.