<!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>
<!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>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.