topic Circle selector tool in drawing toolbar in ArcGIS JavaScript Maps SDK Questions

Circle selector tool in drawing toolbar

JamesB — Thu, 30 Sep 2010 09:54:07 GMT

http://help.arcgis.com/EN/webapi/javascript/arcgis/demos/toolbar/toolbar_draw.html

Is it possible for the user to change the size of the circle that will be drawn at all?

Thanks,
James

Re: Circle selector tool in drawing toolbar

mikewebster — Thu, 28 Oct 2010 04:06:07 GMT

I have a similar question. What control does the user have on drawing circles or ellipses? It appears in the one sample you can click a point and a circle or ellipse will be drawn at a specific size (and orientation). Are there plans to enhance this?

Re: Circle selector tool in drawing toolbar

HemingZhu — Fri, 17 Dec 2010 19:03:15 GMT

I have a similar question. What control does the user have on drawing circles or ellipses? It appears in the one sample you can click a point and a circle or ellipse will be drawn at a specific size (and orientation). Are there plans to enhance this?

using esri.toolbars.Draw.POINT in conjunction with geometry services's buffer operation will do it

Re: Circle selector tool in drawing toolbar

DavidJones3 — Fri, 01 Apr 2011 20:38:16 GMT

While you could use the buffer tool to create a circular geometry and place it on the map, this tool added in v2.2 would make it seem that it should be possible to 'draw' a circle on the map, when in fact all this is really is just a useless tool that creates a circle of unknown diameter. Who's bright idea at ESRI was this and the triangle? The don't serve any purpose and lead developers down a path littered with ruined expectations.
Why don't the do what they should do? For a circle, one should click on the mouse at the center and drag out to create a circle.

Re: Circle selector tool in drawing toolbar

sumedhasilla — Mon, 04 Apr 2011 15:02:12 GMT

There is an enhancement Request already logged for the issue.
Here is the ID: NIM056901 [Include the capability to draw using circle within the ArcGIS API for JavaScript.]

Re: Circle selector tool in drawing toolbar

StevenGriffith — Tue, 30 Aug 2011 22:48:34 GMT

Here's another vote for including basic, fundamental capabilities in the next release.

Re: Circle selector tool in drawing toolbar

SowjanyaSunkara — Wed, 09 Nov 2011 19:54:25 GMT

Are there any updates on this enhancement request? Is this functionality updated?

Thanks,
SS

Re: Circle selector tool in drawing toolbar

StuartJerman — Fri, 21 Sep 2012 19:11:17 GMT

I'm sure this can be improved upon, but this method allows a user to use the Line tool to draw what would represent a radius, starting at the center point and ending at the edge of the circle. The geometry (the 2 end points) of that line is then used to generate a circle and place it on the map. I hope someone else can make use of this.

function addCircleToMap(geometry){ //the geometry that get�??s passed in contains the 2 points that define the line that was draw.
            drawingToolbar.deactivate();
            map.showZoomSlider();
            var symbol; // the symbol is just the line (pen) that will be used to draw the shape
            symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([239, 62, 66, .6]), 3), new dojo.Color([240, 223, 186, 0.25]));
            var circleGeometry = new esri.geometry.Polygon(new esri.SpatialReference({wkid:102100}));
            var points = new Array();
            var degree;var i=0;var edgeX, edgeY,tmpPoint,path
                        //since mercator projection is expressed in meters, we can use some simple math to look at the 2 points in terms of a right triangle sitting on lat/lon lines
//then use the pythagorean theorem to get the hypotenuse (distance) between the 2 points
            var dist = Math.sqrt(Math.pow((geometry.paths[0][0][0] - geometry.paths[0][1][0]),2) + Math.pow((geometry.paths[0][0][1] - geometry.paths[0][1][1]),2));

            while(i<361){ //now, with our 2 points and the distance, we can loop 360 times and calculate 360 points around the circumference of our soon-to-be circle.
                degree = i * (Math.PI / 180);
                edgeX = geometry.paths[0][0][0] + Math.cos(degree) * dist;
                edgeY = geometry.paths[0][0][1] + Math.sin(degree) * dist;
                points.push([edgeX,edgeY]); //push the new point into the point array
                i++;
            }
                        //put the point array into the polygon object
            circleGeometry.addRing(points);
            //create a graphic object using our new polygon/point array
           var graphic = new esri.Graphic(circleGeometry, symbol);
           try {
                bufferLayer.clear();
                map.removeLayer(bufferLayer);
            }
            catch (err) { } //this layer won't always exist, so we'll need to check.
            bufferLayer = new esri.layers.GraphicsLayer();
            bufferLayer.add(graphic); // add the graphic to the graphics layer
            map.addLayer(bufferLayer); //and add the new layer to the map

}

Re: Circle selector tool in drawing toolbar

derekswingley1 — Fri, 21 Sep 2012 19:28:51 GMT

There are a couple of examples floating around showing how to draw circles. Two that I was talking about just yesterday are the print dijit sample and this fiddle: http://jsfiddle.net/mRDxw/

For the jsfiddle example, click once to set the circle center, click again to set the radius. You can drag both the center and point on the circle to change the size of the circle or move it.