Draw Toolbar, Dojo Error

AshleyPeters · ‎11-16-2015

I noticed the question didn't make it through. I've used the sample here: https://developers.arcgis.com/javascript/jssamples/graphics_add.html. I modified it slightly for my app. I am now getting this error:

Error: scriptError
Stack trace:
d@http://js.arcgis.com/3.14/:5:382
r.injectUrl/h<@http://js.arcgis.com/3.14/:30:159
3.14:31:442

src: dojoLoader 3.14:31:494
info: Array [ "http://js.arcgis.com/3.14/esri/tool…", error ] 3.14:31:494
. 3.14:32:11

I've made changes in the DIV and double-checked my require statement, without any luck. I also have combed through the code for the toolbar, but I don't see anything missing. Any ideas on what I may be missing? Thanks in advance for any help you can give!

Here's my require statement:

require([
 "dojo/dom-construct",
 "esri/map",
 "esri/Color",
 "dojo/keys",
    "esri/sniff",
    "esri/SnappingManager",
    "esri/renderers/SimpleRenderer",
 "esri/config",
 "esri/geometry/Extent",
 "esri/geometry/webMercatorUtils",
 "esri/dijit/BasemapGallery",
 "esri/dijit/HomeButton",
 "esri/dijit/Search",
 "esri/dijit/Popup",
 "esri/dijit/Scalebar",
 "esri/dijit/Print",
 "esri/dijit/Measurement",
 "esri/InfoTemplate",
 "esri/layers/ArcGISDynamicMapServiceLayer",
 "esri/layers/FeatureLayer",
    "esri/tasks/GeometryService",
 "esri/symbols/SimpleFillSymbol",
 "esri/symbols/SimpleLineSymbol",
 "esri/symbols/SimpleMarkerSymbol",
 "esri/toolbars/Draw",
 "esri/graphic",
 "agsjs/dijit/TOC",
 "dojo/aspect",
 "dojo/dom",
 "dojo/ready",
 "dojo/on",
 "dojo/domReady!",
 "dijit/layout/BorderContainer",
 "dijit/layout/ContentPane"],
function (domConstruct, Map, Color, keys, has, SnappingManager, SimpleRenderer, esriConfig, Extent, webMercatorUtils, BasemapGallery, HomeButton, Search, Popup, Scalebar, Print, Measurement, InfoTemplate, ArcGISDynamicMapServiceLayer, FeatureLayer, GeometryService, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Draw, Graphic, TOC, aspect, dom, ready, on
)

And the code for the toolbar:

mapMain.on("load", initDrawTool);
function initDrawTool() {
var drawToolbar = new Draw({
 map: mapMain,
 drawTime: 25,
 tolerance: 4
 });
drawToolbar.on("draw-end", addGraphic);
on(dom.byId("info"), "click", function (evt) {
if(evt.target.id === "info") {
return;
}
var drawTool=evt.target.id.toLowerCase();
mapMain.disableMapNaviation();
drawToolbar.activate(drawTool);
});
}
function addGraphic(evt) {
drawToolbar.deactivate();
mapMain.enableMapNavigation();
var symbol;
if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = drawMarker;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = drawLine;
          }
          else {
            symbol = drawFill;
          }
          mapMain.graphics.add(new Graphic(evt.geometry, symbol));
}

Symbols:

var drawMarker = new SimpleMarkerSymbol ();
 drawMarker.setStyle(STYLE_CIRCLE);
 drawMarker.setColor(new Color("#FF0000"));
    drawMarker.setOutline(null);
    drawMarker.setSize("8");
var drawLine = new SimpleLineSymbol ("solid", new Color("#FF0000"), 3);
var drawFill = new SimpleFillSymbol ("solid", new Color(["#FF0000", 1.25]));

And the DIV:

<body class="nihilo">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
     style="width:100%; height:100%;">
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="PrintButton" style="position:absolute; right: 20px; top: 10px"></div>
  <div id="title">
  <a id ="logo" href="http://www.outdooralabama.com" target="_blank"><img src="images/OA_Header.png"></a>
  </div>
      </div>
        
      <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" data-dojo-props="region:'left'">
        <div id="tocDiv"></div>
      </div>
   <div id="info">
      <div>Select a shape then draw on map to add graphic</div>
      <button id="Point">Point</button>
      <button id="Multipoint">Multipoint</button>
      <button id="Line">Line</button>
      <button id="Polyline">Polyline</button>
      <button id="FreehandPolyline">Freehand Polyline</button>
      <button id="Triangle">Triangle</button>
      <button id="Extent">Rectangle</button>
      <button id="Circle">Circle</button>
      <button id="Ellipse">Ellipse</button>
      <button id="Polygon">Polygon</button>
      <button id="FreehandPolygon">Freehand Polygon</button>
    </div>
   
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    <div style="position:absolute; right:20px; top:25px; z-Index:999;">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
     <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
      <div id="basemapGallery"></div>
     </div>
    </div>
    </div>
    <div style="position:absolute; right:15px; bottom:50px; z-Index:999; width: 250px">
          <div id="TitlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false, open:false">
          <div id ="measurementDiv"></div>
          </div>
        </div>
    <span id="latlong" style="position:absolute; right:20px; top:8px; font-size:80%; color:#FFFFFF; z-index:50;"></span>
    <div id="HomeButton"></div>
    <div id="search"></div>
    
    
    
   </div>
    </div>
  </body>

AshleyPeters · ‎11-16-2015

Jeff,

This toolbar widget looks quite interesting. I looked around at different draw options before I started working on this portion of my project, but did not come across yours. I'll take a closer look at it in the future.

Ashley