Tell me more ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.
up vote 2 down vote favorite
1

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?

share|improve this question
 
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) –  Sunil Jun 14 at 5:24
 
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. –  ShinyCy Jun 17 at 18:02

2 Answers

up vote 1 down vote

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
}
share|improve this answer
 
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 Jun 17 at 20:31
 
Thanks @Jamie, I went with your somewhat more elegant solution. Though they both worked. –  ShinyCy Jun 18 at 19:33
up vote 0 down vote accepted

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/dojo/dijit/themes/nihilo/nihilo.css"/>
<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" />

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.