drawtoolbar can not activate

3923
12
Jump to solution
04-15-2016 02:31 PM
JunxuanZhao
New Contributor

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();

          }

        }

  }

   

  });

  });

demo.png

Tags (1)
0 Kudos
12 Replies
JunxuanZhao
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Juxuan,

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

JunxuanZhao
New Contributor

Hi Robert,

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

Junxuan

0 Kudos