Hi Andy,
You can use the Draw and TextSymbol classes to achieve this. Use a geometry service to find a point for placing a label inside or around the drawn polygon. You can see an example here.
<!DOCTYPE html> <html> <head> <title>Create a Map</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: [-75.249, 38.485], zoom: 9, 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([[-75.77, 38.45], [-75.77, 38.7], [-75.11, 38.7], [-75.11, 38.45], [-75.77, 38.45]]) var gra = new Graphic(singleRingPolygon, sfs); map.graphics.add(gra); } }); </script> </head> <body class="claro"> <div id="mapDiv"></div> </body> </html>
You will want to use the Graphic class to create the graphic and add it to your map. Ex:<!DOCTYPE html> <html> <head> <title>Create a Map</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: [-75.249, 38.485], zoom: 9, 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([[-75.77, 38.45], [-75.77, 38.7], [-75.11, 38.7], [-75.11, 38.45], [-75.77, 38.45]]) var gra = new Graphic(singleRingPolygon, sfs); map.graphics.add(gra); } }); </script> </head> <body class="claro"> <div id="mapDiv"></div> </body> </html>