I created a sample application and it seems to be working:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--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>Shapes and Symbols</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: [-25.312, 34.307],
zoom: 3
});
dojo.connect(map, "onLoad", initToolbar);
}
function initToolbar() {
tb = new esri.toolbars.Draw(map);
dojo.connect(tb, "onDrawEnd", addGraphic);
//hook up the button click events
dojo.connect(dojo.byId("drawPoint"),"click", function(){
tb.activate(esri.toolbars.Draw.POINT);
});
dojo.connect(dojo.byId("drawPolygon"),"click", function(){
tb.activate(esri.toolbars.Draw.POLYGON);
});
dojo.connect(dojo.byId("drawLine"),"click", function(){
tb.activate(esri.toolbars.Draw.LINE);
});
}
function addGraphic(geometry) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.graphics.clear();
//Marker symbol used for point and multipoint created using svg path. See this site for more examples
// http://raphaeljs.com/icons/#talkq. You could also create marker symbols using the SimpleMarkerSymbol class
//to define color, size, style or the PictureMarkerSymbol class to specify an image to use for the symbol.
var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new dojo.Color("#00FFFF"));
//line symbol used for freehand polyline, polyline and line. In this example we'll use a cartographic line symbol
//Try modifying the cartographic line symbol properties like CAP and JOIN. For CAP try CAP_ROUND or CAP_SQUARE
//for JOIN try JOIN_BEVEL or JOIN_MITER or JOIN_ROUND
var lineSymbol = new esri.symbol.CartographicLineSymbol(
esri.symbol.CartographicLineSymbol.STYLE_SOLID,
new dojo.Color([255,0,0]), 10,
esri.symbol.CartographicLineSymbol.CAP_ROUND,
esri.symbol.CartographicLineSymbol.JOIN_MITER, 5
);
//fill symbol used for extent, polygon and freehand polygon. In this example we use a picture fill symbol
//the images folder contains additional fill images - try swapping mangrove out for one of the other options
//(sand, swamp or stiple)
var fillSymbol = new esri.symbol.PictureFillSymbol("images/mangrove.png",
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color('#000'), 1
), 42, 42
);
var type = geometry.type, symbol;
/* if (type === "point" || type === "multipoint") {
symbol = markerSymbol;
}
else if (type === "line" || type === "polyline") {
symbol = lineSymbol;
}
else {
symbol = fillSymbol;
}*/
switch (geometry.type) {
case "point":
symbol = markerSymbol;
break;
case "line":
symbol = lineSymbol;
break;
default:
symbol = fillSymbol;
break;
}
//Add the graphic to the map
map.graphics.add(new esri.Graphic(geometry, symbol));
}
dojo.ready(init);
</script>
</head>
<body class="nihilo">
<div id="info">
<div>Select a shape then draw on map to add graphic</div>
<button id="drawPoint" data-dojo-type="dijit.form.Button">Point</button>
<button id="drawPolygon" data-dojo-type="dijit.form.Button">Polygon</button>
<button id="drawLine" data-dojo-type="dijit.form.Button">Line</button>
</div>
<div id="mapDiv"></div>
</body>
</html>Can you please test this sample and let me know if it works!-Shreyas
