topic Re: drawtoolbar can not activate in ArcGIS Web AppBuilder Questions

drawtoolbar can not activate

JunxuanZhao — Fri, 15 Apr 2016 21:31:51 GMT

Currently, we want to create a custom widget to draw polygon on the map(arcgis web appbuilder 1.3). But it shows that the Uncaught TypeError: Can not read property 'activate' of undefined. (In Widget.js file )

The related line is drawToolbar.activate(esri.toolbars.Draw.POLYGON);

Here is my code:

define(['dojo/_base/declare',

'jimu/BaseWidget',

'esri/urlUtils',

'esri/config',

'esri/map',

'esri/graphic',

'esri/tasks/RouteTask',

'esri/tasks/RouteParameters',

'esri/tasks/FeatureSet',

'esri/symbols/SimpleMarkerSymbol',

'esri/symbols/SimpleLineSymbol',

'esri/Color',

'dojo/_base/array',

'dojo/on',

'dojo/dom',

'dojo/domReady!',

'dijit/registry',

'dijit/layout/BorderContainer',

'dijit/layout/ContentPane',

'dijit/form/HorizontalSlider',

'dijit/form/HorizontalRuleLabels',

'esri/toolbars/draw',

'esri/tasks/GeometryService',

'esri/symbols/SimpleFillSymbol',

'esri/tasks/DataFile',

'dojo/_base/connect'

function(declare, BaseWidget,urlUtils, esriConfig, Map, Graphic, RouteTask, RouteParameters,

FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol,

Color, array, on, dom, registry,

Draw, GeometryService,SimpleFillSymbol,DataFile,connect

) {

return declare([BaseWidget], {

baseClass: 'jimu-widget-MyWidget',

name: 'MyWidget',

startup: function(){

var map, Draw, routeTask, routeParams, routes= [];

var drawToolbar;

var geometryService;

var stopSymbol, barrierSymbol, polygonBarrierSymbol,routeSymbols;

var mapOnClick_addStops_connect, mapOnClick_addBarriers_connect,mapOnClick_addPolygonBarriers_connect;

geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

map = this.map;

routeTask = new RouteTask("https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");

routeParams = new RouteParameters();

routeParams.polygonBarriers = new FeatureSet();

routeParams.outSpatialReference = {"wkid":102100};

var polygonBarrierSymbol= new esri.symbol.SimpleFillSymbol();

routeSymbols = {

"Route 1": new SimpleLineSymbol().setColor(new Color([0,0,255,0.5])).setWidth(5),

"Route 2": new SimpleLineSymbol().setColor(new Color([0,255,0,0.5])).setWidth(5),

"Route 3": new SimpleLineSymbol().setColor(new Color([255,0,255,0.5])).setWidth(5)

};

on(dom.byId("addpolygonBarriersBtn"), "click", addpolygonBarriers);

on(dom.byId("clearpolygonBarriersBtn"), "click", clearpolygonBarriers);

function createToolBar(){

drawToolbar = new esri.toolbars.Draw(map);

drawToolbar.on("draw-end", addToMap);

}

function activateTool(){

drawToolbar.activate(esri.toolbars.Draw.POLYGON);

map.hideZoomSlider();

}

function addToMap(evt) {

drawToolbar.deactivate();

routeParams.polygonBarriers.features.push(

map.graphics.add(new esri.Graphic(evt.geometry, polygonBarrierSymbol)) );

}

var node = dojo.byId("addpolygonBarriersBtn");

dojo.connect(node, "click", activateTool);

map.on("load", createToolBar);

//Begins listening for click events to add polygonbarriers

function addpolygonBarriers() {

removeEventHandlers();

mapOnClick_addPolygonBarriers_connect = on(map, "onclick", addPolygonBarrier);

}

//Clears all polybarriers

function clearpolygonBarriers() {

removeEventHandlers();

for (var i=routeParams.polygonBarriers.features.length-1; i>=0; i--) {

map.graphics.remove(routeParams.polygonBarriers.features.splice(i, 1)[0]);

}

// Add Polygon

function addPolygonBarrier(evt) {

drawToolbar.activate(esri.toolbars.Draw.POLYGON);

var drawEnd_connect = dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {

routeParams.polygonBarriers.features.push( map.graphics.add(new esri.Graphic(geometry, polygonBarrierSymbol)) );});

}

function removeEventHandlers() {

if (mapOnClick_addPolygonBarriers_connect) {

mapOnClick_addPolygonBarriers_connect.remove();

}

});

Re: drawtoolbar can not activate

RobertScheitlin__GISP — Sat, 16 Apr 2016 00:27:38 GMT

Junxuan,

Your biggest issue is that you have your requires and their subsequent parameters out of order. You should review this blog:

The abc’s of AMD | ArcGIS Blog

Each require has a parameter that the require is called by

i.e. "esri/map", "esri/toolbars/draw"],function(Map, Draw){

notice Map is first then Draw and the parameters match the same order.

dojo/domReady! should always be last in your requires and layout elements like 'dijit/layout/BorderContainer' that are used in your trmplate html but not in your js code should be right before dojo/domReady!

Your next issue is mixing Legacy and AMD Style coding (i.e. esri.toolbar.draw is Legacy). The parameter Draw is all you need to use when coding against the require for esri/toolbars/draw.

When building widgets you reference dom elements in the template by using data-dojo-attach-point="blah" and not id="blah". So there is no need for dom.byId("blah") instead you use this.blah.

If you are going to use dojo layout or form dijits in your template html then you need to have the require for 'dijit/_WidgetsInTemplateMixin' and it needs to be added to your declare too.

return declare([BaseWidget, _WidgetsInTemplateMixin], {

Here is a version of what you had using esri standard widget development practices:

Re: drawtoolbar can not activate

JunxuanZhao — Sun, 17 Apr 2016 14:09:57 GMT

Hi Robert,

Thanks for your detail explanation and example.

Our final goal is to find the routes but avoid certain area or specific points. Currently, the widget works well except the routes can not be showed on the map. The error is can not read property 'push' of undefined in showRoute function(this.routes.push).

Attached is our code.

Thanks in advanced!

Junxuan

Re: drawtoolbar can not activate

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:09:00 GMT

Junxuan,

This issue is that your array loop is out of scope and does not know what this.routes is. Adding lang.hitch as shown in line 4 will fix that.

showRoute:function(evt) {
      this.clearRoutes();

        array.forEach(evt.result.routeResults, lang.hitch(this, function(routeResult, i) {
            this.routes.push(
              this.map.graphics.add(
                routeResult.route.setSymbol(this.routeSymbols[routeResult.routeName])
              )
            );
          }));

Don't forget to mark this thread as answered by clicking on the correct answer link on the thread that answered your question.

Re: drawtoolbar can not activate

JunxuanZhao — Sun, 17 Apr 2016 22:46:13 GMT

Hi Robert:

Thanks for your information. I modified the showRoutes function code, but it still can not show the routes, even though it seems that there is no error.

showRoute:function(evt) {

this.clearRoutes();

array.forEach(evt.result.routeResults, lang.hitch(this, function(routeResult, i) {

this.routes.push(

this.map.graphics.add(

routeResult.route.setSymbol(this.routeSymbols[routeResult.routeName])

)

);

}));

var msgs = ["Server messages:"];

array.forEach(evt.result.messages, lang.hitch(function(message) {

msgs.push(message.type + " : " + message.description); !

}));

if (msgs.length > 1) {

alert(msgs.join("\n - "));

}

Re: drawtoolbar can not activate

RobertScheitlin__GISP — Mon, 18 Apr 2016 01:56:52 GMT

Junxuan,

So does the alert ever display? Looking at your code and the console screenshot it looks like you are not providing a token for the RouteTask.

Re: drawtoolbar can not activate

JunxuanZhao — Mon, 18 Apr 2016 02:42:19 GMT

Hi Robert,

I think I have provided a token for the Route Task. Do you mean the Interface like this?

Thanks,

Junxuan

Re: drawtoolbar can not activate

RobertScheitlin__GISP — Mon, 18 Apr 2016 14:43:42 GMT

Yes, I did not see any identityManager stuff in your code.

Are you getting the Alert that you have setup in your code? If not then you are not getting any results to add to the map.

Re: drawtoolbar can not activate

JunxuanZhao — Mon, 18 Apr 2016 15:24:32 GMT

Currently, it is difficult for us to get your points.

1. What is Alert? How can I check that?

2. What does "identity manager stuff in code" mean? When I click the Solve Route Button, there is a pop-up window which asks me to enter the account information and that's it.

Thanks,

Junxuan

Re: drawtoolbar can not activate

RobertScheitlin__GISP — Mon, 18 Apr 2016 15:32:49 GMT

Junxuan,

In your code you have:

showRoute:function(evt) {

this.clearRoutes();

array.forEach(evt.result.routeResults, lang.hitch(this, function(routeResult, i) {

this.routes.push(

this.map.graphics.add(

routeResult.route.setSymbol(this.routeSymbols[routeResult.routeName])

)

);

}));

var msgs = ["Server messages:"];

array.forEach(evt.result.messages, lang.hitch(function(message) {

msgs.push(message.type + " : " + message.description);

}));

if (msgs.length > 1) {

alert(msgs.join("\n - "));

}

If you are getting the login popup (identityManager) already then you can ignore that comment of mine.

Re: drawtoolbar can not activate

JunxuanZhao — Mon, 18 Apr 2016 20:09:48 GMT

At first, we found a related code on https://community.esri.com/thread/88541#comment-366869 , but it uses http://js.arcgis.com/3.8/js/esri/css/esri.css. Then we modified this code to 3.16 version(See the attachment 1). Next, we want to make it as a widget.

Now we have two versions, the first one, it can do routing but can not draw the polygons; the second one(according to your guide), it can draw the polygon, but can not do the routing.

Thanks,

Junxuan

Re: drawtoolbar can not activate

RobertScheitlin__GISP — Tue, 19 Apr 2016 13:35:01 GMT

Juxuan,

OK here is the edited and fully working version of your widget:

Re: drawtoolbar can not activate

JunxuanZhao — Tue, 19 Apr 2016 14:07:19 GMT

Hi Robert,

Thanks for your help during these days and now the code works quite well! You help our project a lot!

Junxuan