Web AppBuilder buffer widget

7965
8
Jump to solution
11-05-2015 11:58 AM
QaziIqbal
New Contributor III

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

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

    });
  });

View solution in original post

8 Replies
JakeSkinner
Esri Esteemed Contributor

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.

QaziIqbal
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Qazi,

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

QaziIqbal
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

I will take a look

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

    });
  });
QaziIqbal
New Contributor III

Robert

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

Qazi

0 Kudos
ToddUlery
Occasional Contributor

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.

0 Kudos