I hoping someone can lead me the right direction here? I am working on a map trying to insert a drawing toolbar and so far I have only been able to get the drawing toolbar up, but not where I can actual edit with it. I have attached the script below, but wondering if I am inserting the Function create toolbar in the correct area? If not, could you please let me know how and where it should be located, so I can get this option working on my map? Please help.. thanks..
<!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" /> <!--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> World Street Map</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> <style> html,body,#map,.map.container{ padding:0; margin:0; height:100%; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> <script type="text/javascript"> dojo.require("esri.map"); var map; function init() { var initExtent = new esri.geometry.Extent({"xmin":1951567,"ymin":13596243,"xmax":2336550,"ymax":13862302,"spatialReference":{"wkid":2278}}); map = new esri.Map("map",{extent:initExtent}); // var initExtent = new esri.geometry.Extent({"xmin":-10997600,"ymin":3416600,"xmax":-10933500,"ymax":3444000,"spatialReference":{"wkid":102100}}); // map = new esri.Map("map",{extent:initExtent}); //Add the world street map layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://wdgissom01/ArcGIS/rest/services/CoreSA/MapServer"); map.addLayer(basemap); // var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); // map.addLayer(basemap); dojo.connect(map, 'onLoad', function(theMap) { //resize the map when the browser resizes dojo.connect(window, 'resize', map,map.resize); }); // here is where I've inserted my options in order to edit with the drawing toolbar, which is in question.
}
function createToolbar(map) { toolbar = new esri.toolbars.Draw(map); dojo.connect(toolbar, "onDrawEnd", addToMap);
} function addToMap(geometry) { switch (geometry.type) { case "point": var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25])); break; case "polyline": var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1); break; case "polygon": var symbol = 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])); break; case "extent": var symbol = 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])); break; case "multipoint": var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5])); break; } var graphic = new esri.Graphic(geometry, symbol); map.graphics.add(graphic); } dojo.addOnLoad(init); </script> </head> <body class="claro"> Draw : <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();">Point</button> <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.MULTI_POINT);map.hideZoomSlider();">Multipoint</button> <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();">Line</button> <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();">Polyline</button> <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();">Polygon</button> <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button> <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button> <button dojoType="dijit.form.Button" onClick="toolbar.deactivate();map.showZoomSlider();">Deactivate</button> <div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
