topic Re: Draw Toolbar, Dojo Error in ArcGIS JavaScript Maps SDK Questions

Draw Toolbar, Dojo Error

AshleyPeters — Sat, 11 Dec 2021 23:35:27 GMT

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>

Re: Draw Toolbar, Dojo Error

thejuskambi — Mon, 16 Nov 2015 17:12:18 GMT

the error is in the addGraphics function the drawToolbar is out of scope. the Scope of drawToolbar is within initDrawTool method only. Try to move the variable definition out of the function.

Re: Draw Toolbar, Dojo Error

AshleyPeters — Mon, 16 Nov 2015 17:29:19 GMT

I tried removing the variable definition, but that didn't resolve my problem.

Re: Draw Toolbar, Dojo Error

thejuskambi — Sat, 11 Dec 2021 23:35:29 GMT

apart from drawToolbar.deactivate in addGraphics. there is another error

var drawToolbar = new Draw({  
     map: mapMain, 
     drawTime: 25,  
     tolerance: 4  
});

the correct syntax is

var drawToolbar = new Draw(mapMain, { 

     drawTime: 25,  
     tolerance: 4  
});

Hope this helps

Re: Draw Toolbar, Dojo Error

JeffJacobson — Mon, 16 Nov 2015 18:24:53 GMT

I created a draw toolbar widget you may be able to use.

WSDOT-GIS/arcgis-js-draw-ui · GitHub

Re: Draw Toolbar, Dojo Error

AshleyPeters — Mon, 16 Nov 2015 19:04:40 GMT

I've made these changes, but still getting the error. I'm wondering if I have put the drawToolbar.deactivate in the wrong location. Where should it go? I've tried placing it within the initDrawTool method and after all of the Draw Toolbar code.

I apologize for all of the questions, but I'm still pretty new to this and the learning curve has been steep!

Re: Draw Toolbar, Dojo Error

AshleyPeters — Mon, 16 Nov 2015 19:06:16 GMT

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

Re: Draw Toolbar, Dojo Error

thejuskambi — Sat, 11 Dec 2021 23:35:32 GMT

The drawToolbar is a local variable in initToolbar function hence, you cannot use it in addGraphics method. hence, I had asked you to move that variable outside like befow

var drawToolbar;
function initToolbar(){
     ...
     drawToolbar = new Draw(mapMain, { ...
     ....
}

then, you can use that variable in addGraphics method.

Strange, that you are still getting the error. let me ask you a basic question. when do you get the error at the time of loading or after you draw a grometry?

Can you set up a jsBin or something?

Re: Draw Toolbar, Dojo Error

AshleyPeters — Mon, 16 Nov 2015 19:32:40 GMT

The error is at the time of loading. I believe this link will work for jsbin: JS Bin - Collaborative JavaScript Debugging

Re: Draw Toolbar, Dojo Error

thejuskambi — Mon, 16 Nov 2015 20:30:18 GMT

Found the issue, in the require for draw toolbar you need you use "esri/toolbars/draw" and not "esri/toolbars/Draw"

the change is case is not getting the required js file which fails.

Re: Draw Toolbar, Dojo Error

AshleyPeters — Mon, 16 Nov 2015 21:27:26 GMT

Thejus,

Thanks for your help! Between this and the other two errors you previously found, the error has been taken care of. While I'm now getting a different error (a symbol has not been defined), I am hoping I can take care of that one myself.

Thanks again!

Ashley