<!DOCTYPE html> <html> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style> html, body, #mapDiv{ padding: 0; margin: 0; height: 100%; } </style> <script src="http://js.arcgis.com/3.8/"></script> <script> var map; require([ "esri/map", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic", "esri/geometry/Polygon", "dojo/on", "dojo/dom", "dojo/domReady!" ], function( Map, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic, Polygon, on, dom ) { map = new Map("mapDiv", { center: [174.605369, -37.120276], zoom: 15, basemap: "streets" }); on(map, "load", addGraphic); var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2),new Color([255,255,0,0.25]) ) function addGraphic(){ var singleRingPolygon = new Polygon([[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]]); var gra = new Graphic(singleRingPolygon, sfs); map.graphics.add(gra); } }); </script> </head> <body class="claro"> <div id="mapDiv"></div> </body> </html>
Hi Dipti,
Take a look at this example. This should get you going in the right direction.
<!DOCTYPE html> <html> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style> html, body, #mapDiv{ padding: 0; margin: 0; height: 100%; } </style> <script src="http://js.arcgis.com/3.8/"></script> <script> var map; require([ "esri/map", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic", "esri/geometry/Polygon", "dojo/on", "dojo/dom", "dojo/domReady!" ], function( Map, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic, Polygon, on, dom ) { map = new Map("mapDiv", { center: [174.605369, -37.120276], zoom: 15, basemap: "streets" }); on(map, "load", addGraphic); var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2),new Color([255,255,0,0.25]) ) function addGraphic(){ var singleRingPolygon = new Polygon([[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]]); var gra = new Graphic(singleRingPolygon, sfs); map.graphics.add(gra); } }); </script> </head> <body class="claro"> <div id="mapDiv"></div> </body> </html>
You will need to pass the coordinates as an array. See the following link.
Create a new polygon by providing an array of geographic coordinate pairs. For a single ring polygon specify an array of coordinate pairs. For a multi-ring polygon specify an array of array coordinate pairs.
Can you post all of your current code where you get the polygon data from a db?