AnsweredAssumed Answered

drawtoolbar can not activate

Question asked by junxuan on Apr 15, 2016
Latest reply on Apr 19, 2016 by junxuan

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

Outcomes