Buffer not plotting in correct area

MatthewDewell — Thu, 27 Jul 2017 18:21:20 GMT

I have this standard buffer plotting code (there may be some typos as I am copying from another network that I can only view the code on a monitor, and not directly. These are lines of code that I think don't need to be there, to save time in my typing):

define([
       "dojo/_base/declare"
       ...
     , "dojo/_base/array"
       ...
     , "dojo/dom"
     , "dojo/on"
       ...
     , "esri/SpatialReference"
     , "esri/graphic"
     , "esri/GraphicsLayer"
     , "esri/Color"
     , "esri/geometry/Point"
     , "esri/geometry/Polyline"
     , "esri/geometry/normalizeUtils"
     , "esri/symbols/SimpleLineSymbol"
     , "esri/symbols/SimpleFillSymbol"
     , "esri/tasks/GeometryService"
     , "esri/tasks/BufferParameters"
       ...
], function (
       declare
       ...
     , array
     , dom
     , on
       ...
     , SpatialReference
     , Graphic
     , GraphicsLayer
     , Color
     , Point
     , Polyline
     , normalizeUtils
     , SimpleLineSymbol
     , SimpleFillSymbol
     , GeometryService
     , BufferParameters
) {
     var plotArray = [
         { latitude:34, longitude: -118 },
         { latitude:32, longitude: -114 },
         { latitude:32, longitude: -109 },
         { latitude:37, longitude: -106 },
         { latitude:41, longitude: -104 },
         { latitude:41, longitude: -96 },
         { latitude:39, longitude: -91 },
         { latitude:38, longitude: -88 },
         { latitude:32, longitude: -96 },
         { latitude:37, longitude: -123 },

     return declare([ ... ],
     {
         ...
         gsvc: '',
         graphicsLayerID: '',
         graphicsLyr:'',
         ...
         constructor: function (options, srcRefNode) {
             try {

this.gsvc = esriConfig.defaults,geometryService;

this.map = (options.map || null);
...

                 this.graphicsLayerID = (options.graphicsLayerID || 'Upload_gLyr');
                 ...
                 this.symbolMarker = {
                     'circle': SimpleMarkerSymbol.STYLE_CIRCLE,
                     ...
                 };

                 this.lineSymbol = {
                     'dash": SimpleLineSymbol.STYLE_DASH,
                     ...
                 };
             } catch (e) {
                 console.info("Error in Constructor - " + this.name);
             }
         },

         startup: function () {
             if (this.debugMode) {
                 console.info(this.name + ' - STARTUP called');
             }

this.inherited(arguments)

             this.graphicsLyr = new GraphicsLayer({id: this.graphicsLayerID});
             this.map.add(this.graphicsLyr);
         },

         postCreate: function() {
             if (this.debugMode) {
                 console.info(this.name + ' - POST CREATE called');
             }

this.inherited(arguments);

             this.own(
                 this.gsvc.on("buffer-complete", lang.hitch(this, this._showBuffer) )
             )
             ...
         },

...

         _buildLineSelection: function () {
             if (this.debugMode) {
                 console.info(this.name + ' - BUILD LINE SELECTION called');
             }

             lineColorID = dom.byId('lineCOlor');
             this.lineColor = this.colorSelection;
             dojo.style(lineColorID, 'backgroundcolor', this.colorSelection);

...

on(dojo.byId('btnDrawLines'),'click', lang.hitch(this, this._drawLineData) );
}

         _drawLineData: function(evt) {
             if (this.debugMode){
                 console.info( this.name + ' - DRAW LINE DATA called');
             }

             try {
                 var paths = [];
                 for (var j = 1; j < plotArray.length; j++) {
                     point0 = [];
                     point0 = [];
                     point0[0] = plotArray[j - 1].longitude;
                     point0[1] = plotArray[j - 1].latitude;
                     point1[0] = plotArray.longitude;
                     point1[1] = plotArray.latitude;
                     path = [point0, point1];

paths.push(path);
}

                 polylineDefinition = {"paths":paths,"spatialReference":this.map.spatialReference};
                 polyline = new Polyline(polylineDefinition);
                 graphic = new esri.Graphic().setGeometry(polyline);

                 this.lineColor = this.colorSelection;
                 lineStyle = dojo.byId('lineStyle').value;
                 dojoColor = new dojo.Color(this.lineColor);
                 rgbColor = dojoColor.toRgb();
                 lineSize = dojo.byId('lineSize').value;
                 alpha = dojo.byId('lineOpacity').value;
                 rgbColor[rgcColor.length] = alpha;

                 graphic.symbol = new SimpleLineSymbol()
                                      .setColor(rgbColor)
                                      .setWidth(lineSize)
                                      .setStyle(this.lineSymbol[lineStyle]);
                 this.graphicsLyr.add(graphic);

                 //fill in points on line intersections
                 for (var i = 0; i < plotArray.length; i++) {
                     data = "";
                     pt = new Point([plotAray.longitude,plotArray.latitude],this.map.spatialReference);
                     symbol = "circle";
                     dojoColor = new dojo.Color(this.lineColor);
                     rgbColor = dojoColor.toRgb();
                     size = dojo.byId('lineSize').value;
                     alpha = dojo.byId('lineOpacity').value;
                     rgbColor[rgcColor.length] = alpha;

                     point = {
                         pt: pt,
                         symbol: this.SymbolMarker[symbol],
                         outlineSize: 0,
                         size: size,
                         color: rgbColor,
                         data:data
                     };

this._plotPoint(this.map,point);

}

                 this._doBuffer( polyline );
             } catch (Error) {
                 if (this.debugMode){
                     console.info('Error in DRAW LINE DATA: ' + evt.target);
                     console.info(Error);
                 }
             }
         },

_doBuffer: function ( polyline ) {

             if (this.debugMode) {
                 console.info( this.name + ' - DO BUFFER called');
                 console.info ( polyline );
             }

bufferLineSize = dojo.byId('bufferDistance').value;
bufferUnits = dojo.byId('bufferUnits').value

try {

                 if (this.debugMode) {
                     console.info( this.name + ' - BUFFER LINE - ' + bufferLineSize
                 }

                 params = new BufferParameters();
                 params.distances = [ bufferLineSize ];
                 params.geometires = [ polyline ];
                 params.outSpatialReference = this.map.spatialReference
                 params.unit = GeometryService.UNIT_STATUTE_MILE;

                 if ( this.debugMode) {
                     console.info( this.name + ' - BUFFER...');
                 }

this.gsvc.buffer(params);

                 if (this.debugMode) {
                     console.info( this.name + ' - FINISHED BUFFERING...');
                 }

             } catch (e) {
                 console.info( this.name + ' - Error in DO BUFFER');
                 console.info(e);
             }
         },

         _showBuffer: funtion (results) {
             if (this.debugMode) {
                 console.info( this.name + ' - SHOW BUFFER called');
                 console.info( results );
             }

             dojoColor = new dojo.Color(this.bufferColor);
             rgbFillColor = dojoColor.toRgb();
             rgbOutlineColor = dojoColor.toRgb();
             alphaFill = 0.35;
             alphaOutline = 1;
             rgbFillColor[rgbFillColor.length] = alphaFill;
             rgbOutlineColor[rgbOutlineColor.length] = alphaOutline;

             symbol = new SimpleFillSymbol()
                          .setStyle(SimpleFillSymbol.STYLE_SOLID)
                          .setOutline(
                              new SimpleLineSymbol()
                                  .setStyle(SimpleLineSymbol.STYLE_SOLID)
                                  .setColor(rgbOutlineColor)
                                  .setWidth(2)
                          )
                          .setCOlor(rgbFillColor);

             graphic = new esri.Graphic(results.geometries[0],symbol);
             this.graphsLyr.add(graphic);
         }
     });
});

I can give you other functions if needed, but I give the essentials, I believe. I get it to plot the buffer but not where the polyline is drawn. The data for the rings looks like this:

rings[0][
    [-399.9999999,4053.06334471325],
    [-367.648012018999,4056.249737401],
    [-104.507677999999,4064.86406],
    ...
]

That comes out no where near the polyline that gets drawn.

Any insights?

Thanks in advance.

Re: Buffer not plotting in correct area

RobertScheitlin__GISP — Thu, 27 Jul 2017 18:40:24 GMT

Matthew,

Is this code for a WAB widget or just a custom dojo dijit? What is the Spatial reference of the map?

Re: Buffer not plotting in correct area

MatthewDewell — Thu, 27 Jul 2017 19:35:42 GMT

Robert, thank you for the response. It is a Dojo Dijit, and the Spatial Reference is 4326. I hope this helps.

Re: Buffer not plotting in correct area

RobertScheitlin__GISP — Thu, 27 Jul 2017 19:54:42 GMT

Matthew,

When you get to the line:

console.info( results );

in the _showBuffer function what is the spatial ref of the resulting polygon?

Re: Buffer not plotting in correct area

MatthewDewell — Thu, 27 Jul 2017 20:02:53 GMT

Hello Robert,

I get back the geometries[0]/spatialReference object with the attributes:

spatialReference/declaredClass:"esri.SpatialReference"

spatialReference/wkid:4326

spatialReference/wkt: null

If you need anymore, just let me know.

Thank You

Re: Buffer not plotting in correct area

RobertScheitlin__GISP — Thu, 27 Jul 2017 20:37:29 GMT

Matthew,

Try setting the buffer spatial ref:

params.bufferSpatialReference = new SpatialReference({wkid: 32662});

and also because you are using WGS 84 you should set the buffer param to geodesic true.

Re: Buffer not plotting in correct area

MatthewDewell — Fri, 28 Jul 2017 12:06:20 GMT

Robert,

I entered my buffer settings now as:

params = new BufferParameters();
params.bufferSpatialReference = new SpatialReference({ wkid 32662 });
params.distances = [ bufferLineSize ];

params.geodesic = true;

params.geometries = [ polyline ];

params.outSpatialReference = this.map.spatialReference;

params.unit = GeometryService.UNIT_STATUTE_MILE;

That appears to have done it, applying the params.bufferSpatialReference = new SpatialReference({ wkid 32662 });, and the params.geodesic = true;. Though, I did try it without applying the geodesic parameters to true, and it appears to have not made any difference, but I'll keep it in, just in case.

Thank you for your help, Robert.

topic Re: Buffer not plotting in correct area in ArcGIS JavaScript Maps SDK Questions

Buffer not plotting in correct area

Re: Buffer not plotting in correct area

Re: Buffer not plotting in correct area

Re: Buffer not plotting in correct area

Re: Buffer not plotting in correct area

Re: Buffer not plotting in correct area

Re: Buffer not plotting in correct area