Create Polygon and place with mouse click

JacobSaugmann · ‎09-14-2011

Hi

I new to JavaScripts (have experience with C# And ArcObjects)

I'm making a task at want to place a Rectangle / Polygon in the map when the user clicks a button(executing the JavaScript), then the rectangle / polygon should show up at the curser and be placed in the map where the user clicks.
(i want to use it to specify print extend)

I've searched for some samples but i i'm having trouble finding them, can anybody help?

I would like to calculate the size of the rectangle and pass the value to the JavaScript.

any idea?

SiqiLi · ‎09-14-2011

Here is a sample created for your reference:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Add graphics</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
   dojo.require("esri.toolbars.draw");
  
var map, tb;  
function init() {
 map = new esri.Map("map");
 dojo.connect(map, "onLoad", initToolbar);
 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
    map.addLayer(tiledMapServiceLayer);
  
}

function initToolbar(map) {
    tb = new esri.toolbars.Draw(map);
    dojo.connect(tb, "onDrawEnd", addGraphic);
}


function addGraphic(geometry) {
  var graphic = new esri.Graphic(geometry, tb.fillSymbol);
  map.graphics.add(graphic);
  var extent = geometry.getExtent();
  alert("xmin:" + extent.xmin + " ymin:" + extent.ymin + " xmax:"+ extent.xmax + " ymax:" + extent.ymax);
}

dojo.addOnLoad(init);

</script>
 </head>
 <body class="tundra">
  <button onclick="tb.activate(esri.toolbars.Draw.POLYGON);">Polygon</button>
  <div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>

The above sample is modified based on the following sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/graphics/graphics_add.html

SiqiLi · ‎09-14-2011

I am not sure if I understand your question correctly. Therefore, here is another sample I created for you, which puts a rectangle/polygon on the mouse click location. The polygon size is predefined.

Here is the sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Add graphics</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

  
var map;  
function init() {
 map = new esri.Map("map");
 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
    map.addLayer(tiledMapServiceLayer); 
}

function createGraphic() {
    dojo.connect(map, "onClick", addGraphic);
}

function addGraphic(evt) {
 var polygon = new esri.geometry.Polygon(new esri.SpatialReference({wkid:4326}));
 var deltaX = 10;
 var deltaY= 5;
 var xmin = evt.mapPoint.x - deltaX;
 var xmax = evt.mapPoint.x + deltaX;
 var ymin = evt.mapPoint.y -deltaY;
 var ymax = evt.mapPoint.y + deltaY;
 var polygon = new esri.geometry.Polygon(new esri.SpatialReference({wkid:4326}));
 polygon.addRing([[xmin,ymin],[xmin,ymax],[xmax,ymax],[xmax,ymin],[xmin,ymin]]);

    var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
 new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
    new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25]));
 
    var graphic = new esri.Graphic(polygon, sfs);
    map.graphics.add(graphic);
   
    alert("Rectangle size is:" + deltaX + " x " + deltaY); 
}

dojo.addOnLoad(init);

</script>
 </head>
 <body class="tundra">
  <button onclick="createGraphic()">Polygon</button>
  <div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>

JacobSaugmann · ‎09-14-2011

Hi Shuping Li

Thanks for your reply.

I will try to explain a little better.

I�??m making a Task (for ArcGIS Server 10) in C# using Visual Studio 2010, When the user clicks a button on this task, a polygon (fixed size based on current map scale, and some settings in the task) should show up at the curser position when the curser is in the Map control and follow the curser until the user clicks the map then the polygon is placed in the map.
I�??m making a JavaScript using the Web ADF JavaScript library. The js file is embedded as resource and added the button.attributes( onclick ) . I�??m finding it hard writing the code, when I�??m used to Intellisence when coding C# and there is nothing when working with js files in Visual studio, and I�??m new to coding JavaScripts.

SiqiLi · ‎09-15-2011

Hi Jacob,

Thank you for the clarification.

Since you are working with Web ADF JavaScript Library, not the ArcGIS API for JavaScript, I think you may need to post your question in the ArcGIS Server forum.

Here is a help document talking about how to create graphics using Web ADF JavaScript Library:
http://help.arcgis.com/en/sdk/10.0/serveradf_net/conceptualhelp/index.html#/Graphics_and_map_tips/00...

JacobSaugmann · ‎09-15-2011

Hi Thanks .. my bad 🙂

Thank you for your help