topic Re: Web AppBuilder buffer widget in Web AppBuilder Custom Widgets Questions

Web AppBuilder buffer widget

QaziIqbal — Thu, 05 Nov 2015 19:58:49 GMT

Hello

I am trying to create a buffer tool widget and I saw couple of examples. The first example shows creating buffer on point and second is to create buffer on line and polygons. Here are the links.

Buffer a point | ArcGIS API for JavaScript

Geometry Service - Buffer | ArcGIS API for JavaScript

The buffer on point works fine with me, but I have an issue creating the buffer on line and polygon. Below is my code:

var gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

startup: function() {

this.inherited(arguments);

this.toolbar = new Draw(this.map);

this.toolbar.on("draw-end", this._doBuffer);

_doBuffer: function(evtObj) {

var geometry = evtObj.geometry;

switch (geometry.type) {

case "point":

var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1), new Color([0,255,0,0.25]));

break;

case "polyline":

var symbol = new SimpleLineSymbol();

break;

case "polygon":

var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255,0,0]), 2), new Color([255,255,0,0.25]));

break;

}

var graphic = new Graphic(geometry, symbol);

this.map.graphics.add(graphic);

//setup the buffer parameters

var params = new BufferParameters();

params.distances = [ 5 ];

params.bufferSpatialReference = this.map.spatialReference;

params.outSpatialReference = this.map.spatialReference;

//**************BELOW I TRIED DIFFERENT WAYS****************************

//params.unit = GeometryService["UNIT_KILOMETER"];

//params.unit = esri.tasks.GeometryService.UNIT_KILOMETER;

params.unit = GeometryService["UNIT_KILOMETER"];

//params.unit =eval("esri.tasks.GeometryService.UNIT_FOOT");

if (geometry.type === "polygon") {

//if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct.

gsvc.simplify([geometry], function(geometries) {

params.geometries = geometries;

gsvc.buffer(params, this._test);

});

} else {

console.log("The geometry is "+geometry.type);

params.geometries = [geometry];

lang.hitch(this, gsvc.buffer(params, this._test));

//*********************THIS IS WHERE MY CODE BREAKS***************************

//******************IF I USE EITHER OF BELOW CODE, IT DOES NOT DO ANYTHING***********************

gsvc.buffer(params, lang.hitch(this, _test));

gsvc.buffer(params, lang.hitch(this, this._showBuffer));

}

_showBuffer: function(bufferedGeometries) {

//************IT NEVER REACHES HERE TO SHOW BELOW MESSAGE IN CONSOLE **************************

console.log("test");

var symbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([255,0,0,0.65]), 2

new Color([255,0,0,0.35])

);

array.forEach(bufferedGeometries, function(geometry) {

var graphic = new Graphic(geometry, symbol);

this.map.graphics.add(graphic);

});

this.toolbar.deactivate();

//app.map.showZoomSlider();

I would really appreciate if someone can help me.

Thanks

Qazi

Re: Web AppBuilder buffer widget

JakeSkinner — Thu, 05 Nov 2015 20:29:06 GMT

Hi Qazi,

It may be worth your time to take a look at the Incident Analysis widget. I was trying to develop a buffer widget with moderate success, but found that this widget does almost everything I was trying to accomplish.

Re: Web AppBuilder buffer widget

QaziIqbal — Thu, 05 Nov 2015 21:34:30 GMT

Jake

Thanks for pointing me towards this widget. I tried to look into it, but it seems too complicated for me. I dont want any buffers with feature service. I want a simple point, line or polygon buffer created around a graphic and I wonder why it is not working. Any further help will be really appreciated.

Thanks

Qazi

Re: Web AppBuilder buffer widget

RobertScheitlin__GISP — Fri, 06 Nov 2015 13:05:13 GMT

Qazi,

I have plans to introduce a buffer widget but I don't have a timeline for this development.

Re: Web AppBuilder buffer widget

QaziIqbal — Fri, 06 Nov 2015 13:11:47 GMT

Robert

That would be awesome. I wish it was soon.

I would appreciate if you could provide some help to get my code work.

Qazi

Re: Web AppBuilder buffer widget

RobertScheitlin__GISP — Fri, 06 Nov 2015 13:50:19 GMT

I will take a look

Re: Web AppBuilder buffer widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:29:26 GMT

Qazi,

Here is some corrections to your code:

define([
  "dojo/_base/declare",
  "dijit/_WidgetsInTemplateMixin",
  "jimu/BaseWidget",
  "esri/graphic",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/toolbars/draw",
  "dojo/_base/lang",
  "dojo/on",
  "dojo/_base/Color",
  "dojo/_base/array",
  "esri/tasks/GeometryService",
  "esri/tasks/BufferParameters"
  ],
  function (declare, _WidgetsInTemplateMixin, BaseWidget, Graphic,
    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Draw, lang, on,
    Color, array, GeometryService, BufferParameters) {
    return declare([BaseWidget, _WidgetsInTemplateMixin], {

      baseClass: 'buffer-widget',

      //this property is set by the framework when widget is loaded.
      name: 'Buffer',
      gsvc: new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"),
      symbol: null,

      startup: function () {
        this.inherited(arguments);
        this.toolbar = new Draw(this.map);
        this.toolbar.activate(Draw.POLYLINE);
        this.toolbar.on("draw-end", lang.hitch(this, this._doBuffer));
      },

      _doBuffer: function (evtObj) {
        var geometry = evtObj.geometry;
        switch (geometry.type) {
        case "point":
          this.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
          break;
        case "polyline":
          this.symbol = new SimpleLineSymbol();
          break;
        case "polygon":
          this.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
          break;
        }

        var graphic = new Graphic(geometry, this.symbol);
        this.map.graphics.add(graphic);

        //setup the buffer parameters
        var params = new BufferParameters();
        params.distances = [5];
        params.bufferSpatialReference = this.map.spatialReference;
        params.outSpatialReference = this.map.spatialReference;
        params.unit = GeometryService.UNIT_KILOMETER;

        if (geometry.type === "polygon") {
          //if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.
          this.gsvc.simplify([geometry], lang.hitch(this,function (geometries) {
            params.geometries = geometries;
            this.gsvc.buffer(params, lang.hitch(this, this._showBuffer));
          }));
        } else {
          console.log("The geometry is " + geometry.type);
          params.geometries = [geometry];
          //lang.hitch(this, this.gsvc.buffer(params, this._test));
          //*********************THIS IS WHERE MY CODE BREAKS***************************
          //******************IF I USE EITHER OF BELOW CODE, IT DOES NOT DO ANYTHING***********************
          //this.gsvc.buffer(params, lang.hitch(this, this._test));
          this.gsvc.buffer(params, lang.hitch(this, this._showBuffer));
        }
      },

      _showBuffer: function (bufferedGeometries) {
        //************IT NEVER REACHES HERE TO SHOW BELOW MESSAGE IN CONSOLE **************************
        var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
        array.forEach(bufferedGeometries, lang.hitch(this, function (geometry) {
          var graphic = new Graphic(geometry, symbol);
          this.map.graphics.add(graphic);
        }));

        this.toolbar.deactivate();
        //app.map.showZoomSlider();
      }

    });
  });

Re: Web AppBuilder buffer widget

QaziIqbal — Fri, 06 Nov 2015 15:23:12 GMT

Robert

You are awesome. It worked like a champ. I really appreciate your help.

Qazi

Re: Web AppBuilder buffer widget

ToddUlery — Mon, 26 Jun 2017 20:58:02 GMT

Hi rscheitlin,
I have also been looking into a buffer on features. I am trying to use a selection as the starting point for Geometry, and based on user input for distance and color scheme/Line type will generate a buffer as an operational layer.

I have been looking into you Identify and your eSearch widgets. And trying to get the parts of what I want from it, but of course, it is becoming quite a barbaric task that I might be losing at.

So given the specs:

- user selected color and line type for buffer

- feature selection on the map (point/polygon type graphic)

- text-based distance input

Do you have any advice to get this going? I have spent a few days so far on my mentioned method and feel lost in the progress.