ArcGIS Circle Buffer

Question

I am stuck, trying to draw a simple circle buffer using ArcGIS. Here is how I set up my base map:

dojo.require("esri.map");
dojo.require("esri.tasks.servicearea");
dojo.require("dijit.dijit");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri/layers/FeatureLayer");
dojo.require("esri/symbols/SimpleMarkerSymbol");

var mapLayers = new Array();
var map;
var GL = null;

function setMap() {
    function init() {
        require(
            [
                "esri/map",
                "dojo/dom-construct",
                "dojo/domReady!",
                "esri/tasks/GeometryService"
            ],
            function 
            (
                Map,
                domConstruct
            ) {
                map = Map("map-canvas",
                {
                    //infoWindow: popup
                });
                map.setZoom(1);
                coreFunctions();
            });

    }
    dojo.ready(init);
    dojo.connect(map, "onClick", addCircle);
}

function coreFunctions() {
    try {
        addLayersToMap();
    }
    catch (err) {
        console.log(err);
    }
}
function addLayersToData() {
    var layer = new esri.layers.ArcGISTiledMapServiceLayer("https://www.onemap.sg/ArcGIS/rest/services/BASEMAP/MapServer");
    mapLayers.push(layer);
    var layer2 = new esri.layers.ArcGISTiledMapServiceLayer("http://www.onemap.sg/ArcGIS/rest/services/LOT_VIEW/MapServer");
    mapLayers.push(layer2);
    layer2.hide();
}

function addLayersToMap() {
    addLayersToData();
    for (var a = 0; a < mapLayers.length; a++) {
        map.addLayer(mapLayers[a]);
    }
    map.setZoom(1);
}

So here is another method where I try to draw a circle graphic on the map:

function addCircle(e) {
sym = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([180, 0, 180, 1.0]));

console.log("clicked the map: ", e);
var pt, radius, circle, ring, pts, angle;

pt = e.mapPoint;
circle = new esri.geometry.Polygon(map.spatialReference);
ring = []; // point that make up the circle
pts = 40; // number of points on the circle
angle = 360 / pts; // used to compute points on the circle
for (var i = 1; i <= pts; i++) {
    // convert angle to raidans
    var radians = i * angle * Math.PI / 180;;
    // add point to the circle
    ring.push([pt.x + radius * Math.cos(radians), pt.y + radius * Math.sin(radians)]);
    console.log(ring[i]);
}
ring.push(ring[0]); // start point needs to == end point
circle.addRing(ring);
map.graphics.add(new esri.Graphic(circle, sym));
console.log("added a graphic");
}

It did execute the function but there is not circle plotted on the map and as well as error message. I wonder which part of my logic went wrong?

Thanks in advance.

Answer 1

You're very, very close - the only problem is you're never setting the value of your variable radius, so all your coordinates are being calculated as pt.x + (nothing) * Math.cos(radians)....which in javascript is NaN. I added radius = 100; before your for loop and everything works nicely.

This is actually a pretty easy error to debug. IMO if you're not using Chrome for ESRI JS development, then you should be - its inbuilt dev tools are excellent for examining object properties. The way I worked out what was going on was simply to dump the map.graphics.graphics array to the console - you can then drill down into the geometry.rings of each array element and very quickly work out that each point has x = NaN and y = NaN, and from there it's obvious that there's something wrong with your calculation.