GeometryService Buffer Method - Hanging

[TommyThompson1]

Hey developers,

Attempting to have a buffer drawn around a graphic which the user has drawn on the map using the draw toolbar. Everything appears to be in order and the developer console returns no errors. The user clicks the buffer button and nothing happens.

Below is the method invoked when the user clicks the buffer button.

        _createBuffers: function () {

            this.inherited(arguments);

            //Internal variables

            var params = new BufferParameters();

            var gsvc = new GeometryService();

            var bufferGraphicsLayer = new GraphicsLayer();

            var gsvc = new GeometryService('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer');

            var graphics = new Graphic();

            //Enable Button

            this._enableBtn(this.btnApply, true);

            //getGeometires method to pull geometries from AOI drawn into the graphics layer.

            graphics = this._graphicsLayer.graphics;

            var geometries = graphicsUtils.getGeometries(graphics);

            //parameters for the buffer <-- Need error handling for if user attempts to run the buffer without a drawn AOI

            params.bufferSpatialReference = new esri.SpatialReference({"wkid": this.map.spatialReference.wkid});

            params.distances = [document.getElementById("distance").value];

            params.geometries = geometries;         //<-------------------------- Potential Issue with buffer #1; geometries issue.

            params.geodesic = false;

            params.outSpatialReference = new esri.SpatialReference({ "wkid": this.map.spatialReference.wkid });

            params.unionResults = true;

            params.unit = GeometryService[document.getElementById("unit").value];

            //Place here the invoking of the geometry service and the creation of the symbols for the buffer layer.

            gsvc.buffer(params, showBuffer);

            //Function to draw buffers

            function showBuffer(buffer) {

                // Add the buffer graphic to the map

                var symbol = new SimpleFillSymbol()

                  .setColor(new Color([56, 102, 164, 0.4]))

                  .setOutline(

                    new SimpleLineSymbol()

                      .setColor(new Color([56, 102, 164, 0.8]))

                  );

                    bufferGraphics = new Graphic(buffer, symbol);

                    console.dir(bufferGraphicsLayer);   //<------------------- Potential Issue with buffer #2; graphicsLayer issue.

                    bufferGraphicsLayer.add(bufferGraphics);

            }

        },

Thanks in advance!

[RobertScheitlin__GISP]

Tommy,

here is your code with some corrects, comments, and questions.

_createBuffers: function () {
            this.inherited(arguments);

            //Internal variables
            var params = new BufferParameters();
//No need to declare this var twice.
            //var gsvc = new GeometryService();
//You declare the bufferGraphicsLayer var here but I don't see where you add it to the map.
            var bufferGraphicsLayer = new GraphicsLayer();
            this.map.addLayer(bufferGraphicsLayer);
            var gsvc = new GeometryService('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer');
//No need to declare this var as it overwritten by "graphics = this._graphicsLayer.graphics;"
            //var graphics = new Graphic();

            //Enable Button
            this._enableBtn(this.btnApply, true);

            //getGeometires method to pull geometries from AOI drawn into the graphics layer.
//Don't decalre unnecessary vars
            //graphics = this._graphicsLayer.graphics;
//Use the graphics directly instead of a var
            var geometries = graphicsUtils.getGeometries(this._graphicsLayer.graphics);

            //parameters for the buffer <-- Need error handling for if user attempts to run the buffer without a drawn AOI
//Add error handling for the above mentioned.
            if(geometries.length > 0){
//Use the maps spatialReference directly
                params.bufferSpatialReference = this.map.spatialReference;
                params.distances = [document.getElementById("distance").value];
                params.geometries = geometries;        //<-------------------------- Potential Issue with buffer #1; geometries issue.
                params.geodesic = false;
//Use the maps spatialReference directly
                params.outSpatialReference = this.map.spatialReference;
                params.unionResults = true;
                params.unit = GeometryService[document.getElementById("unit").value];
       
                //Place here the invoking of the geometry service and the creation of the symbols for the buffer layer.
                gsvc.buffer(params, showBuffer);

            }
            //Function to draw buffers
            function showBuffer(buffer) {
//Check to see that you are getting a buffer back
                console.info(buffer);
                // Add the buffer graphic to the map
                var symbol = new SimpleFillSymbol()
                  .setColor(new Color([56, 102, 164, 0.4]))
                  .setOutline(
                    new SimpleLineSymbol()
                      .setColor(new Color([56, 102, 164, 0.8]))
                  );
                bufferGraphics = new Graphic(buffer, symbol);
//I am a little concerned that you may have a scope issue here. Does this console output anything for the next line?
                console.dir(bufferGraphicsLayer);  //<------------------- Potential Issue with buffer #2; graphicsLayer issue.
                bufferGraphicsLayer.add(bufferGraphics);
            }
        },

[TommyThompson1]

Hi Robert,

Firstly, thank you so much for your help.

I was not aware that a new GraphicsLayer must be added to the map which is potentially one issue I had previously.

console.info(buffer) does return an object which I believe is the buffer layer, see below:

console.dir(bufferGraphicsLayer) returns:

This does appear to be a GraphicsLayer directory just based quickly on a comparison of the methods and events found in this list compared to the GraphicsLayer methods and events. However, the buffer is still not drawn onto the map.

[RobertScheitlin__GISP · Accepted solution]

Tommy,

  So it looks like the buffer variable is a polygon geometry array so you just  need to change your buffer complete function like so (line 10 and 11):

            //Function to draw buffers  
            function showBuffer(buffer) {    
                // Add the buffer graphic to the map  
                var symbol = new SimpleFillSymbol()  
                  .setColor(new Color([56, 102, 164, 0.4]))  
                  .setOutline(  
                    new SimpleLineSymbol()  
                      .setColor(new Color([56, 102, 164, 0.8]))  
                  );  
                var graphic = new Graphic(evt.geometries[0],symbol);
                bufferGraphicsLayer.add(graphic);  
            }

[TommyThompson1]

Hi Robert,

You were correct! I had to make a minor adjustment but it was 100% because of it being an array. The adjustment I made is below.

                bufferGraphics = new Graphic(buffer[0], symbol); 

                //var graphic = new Graphic(geometries[0], symbol);

                bufferGraphicsLayer.add(bufferGraphics);

Thank you so much.