How do I get that polygon from Javascript ArcGIS API?

Question

I would like to have a user draw a Polygon (or Line) onto a web map with the Javascript ArcGIS API drawing tools. For the life of me I can't figure out how to pull that polygon from the client and get it to my server. It baffles me. Help?

• Sunil: I think you need to use wfs service for that. Which API and ArcGIS Server you are using ? (ex. API 3.2/3.3 Server 10.1 SP 1 etc)
• ShinyCy: I don't have ArcGIS Server, it is ArcSDE 10.1. Obviously, this is problematic when attempting web-input geometry. So, in order to receive user input, I am using the ArcGIS Javascript API (can't find a version). Right now I can get the coordinates using the esri.tasks.GeometryService.project and put the text of the lat/long into hidden fields and pass those to the code behind which calls SQL Server (where I do the geoprocessing). I could do the same w/ JSON polygon geometries but I don't know how to grab them.

Answer 1

So I am going to assume that you drawing the polygon in a graphics layer. You just need to grab the polygon (graphic) from the graphics layer. Then you can do this:

graphic.geometry.toJson()

This will give you the JSON representation of the polygon. Then you can just pass that as a parameter to your web service. You can even call toJson() method of most of the Esri objects to the JSON for that object. I would provide more information, but you do no provide any more code and you do not provide how you are creating the graphics. Is there more that you need to know?

More here: https://developers.arcgis.com/en/javascript/jsapi/geometry.html

EDIT

If you need to grab the graphic you have a couple of options. You can grab it when you are adding the graphic in the addGraphic method found in this sample:

https://developers.arcgis.com/en/javascript/jssamples/graphics_add.html

which is the sample I am assuming you may be using. The other option and somewhat more elegant in my opinion I would listen to the onGraphicAdd event of the graphics layer to grab it then.

https://developers.arcgis.com/en/javascript/jsapi/graphicslayer.html#ongraphicadd

So like this:

dojo.connect(map.graphics, "onGraphicAdd", getPolygon);
function(graphic){
 var json = graphic.toJson(); //or graphic.geometry.toJson();
 //send to your service
} 

• ShinyCy: Thanks @Jamie: I am having the user input the polygon using esri.toolbars.Draw Your astute observation ' You just need to grab the polygon (graphic) from the graphics layer.' is exactly what I would like to accomplish, but can't figure out how. Your answer of graphic.geometry.toJson() is the next step, which I appreciate too. :)
• ShinyCy: Thanks @Jamie, I went with your somewhat more elegant solution. Though they both worked.

Answer 2

I know it's annoying to see posts that have no code. So this is my finished code. It is only for polygons, it grabs a user input polygon as a json object. Converts it to a string. Passes the string to a hidden field and uses a button_click to pass the string to code behind where I send it to the ArcSDE geodatabase through SQL Server 2008.

<!--The viewport meta tag is used to improve the presentation and behavior of the samples 
 on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Polygon Grabber</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"/>
<style>
 #info {
 top: 20px;
 color: #444;
 height: auto;
 font-family: arial;
 right: 20px;
 margin: 5px;
 padding: 10px;
 position: absolute;
 width: 115px;
 z-index: 40;
 border: solid 2px #ccc;
 border-radius: 4px;
 background-color: #fff;
 }
 html,body,#mapDiv{
 padding:0;
 margin:0;
 height:100%;
 }
</style>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<script>
 dojo.require("esri.map");
 dojo.require("esri.layers.agstiled");
 dojo.require("esri.toolbars.draw");
 var map, tb;
function init(){
 map = new esri.Map("mapDiv", {
 basemap: "streets",
 center: [-120.312, 43.9507],
 zoom: 7
 });
 dojo.connect(map,"onLoad",getPolygon)
}
function getPolygon(){
 tb = new esri.toolbars.Draw(map);
 dojo.connect(tb,"onDrawEnd",addGraphic)
 dojo.connect(dojo.byId("drawPolygon"),"click", function(){
 tb.activate(esri.toolbars.Draw.POLYGON);
 dojo.connect(map.graphics,"onGraphicAdd",grabPolygon);
 });
}
function addGraphic(geometry){
 tb.deactivate();
 map.graphics.clear();
 var fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
 new esri.symbol.SimpleLineSymbol(
 esri.symbol.SimpleLineSymbol.STYLE_SOLID,
 new dojo.Color('#000'), 1
 ), new dojo.Color([255,255,0,0.25]), 42);
 map.graphics.add(new esri.Graphic(geometry, fillSymbol));
 dojo.connect(map.graphics,"onGraphicAdd",grabPolygon);
}
function grabPolygon(graphic){
 var jsontext = JSON.stringify(graphic.toJson());
 document.getElementById('HiddenPolygon').value = jsontext;
}
dojo.ready(init);
</script>

 <asp:HiddenField runat="server" ID="HiddenPolygon" Value="!" />
 <asp:Button ID="Button1" runat="server" Text="Submit Project Boundary" onclick="Button1_Click" /> 
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ></asp:SqlDataSource>
</div>

Navigate to your project area, then click the button below to draw on map. Click to draw project boundary

</div>
<div id="mapDiv" />

• Pavel V.: I know it's too late, but if this isn't the correct solution, you should have edited it to your question instead. It's not clear whether this is a solution alternative to the Jamie's or the code that belongs to the question.
• ShinyCy: Pavel, you are correct I should have edited it to the question. I wasn't sure about the process and wanted folks to be able to see the code, but not obscure the original post. This is answer is the finished code using the guidance I received from Jamie in the post I marked as the answer.