Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I keep receiving the error "drawToolbar is undefined" when I click a button to enable the Draw Toolbar from the ArcGIS JavaScript API. I also have the navTool bar in the map so as I understand I need to make sure that only one toolbar is active at a time.

My HTML and JavaScript code are in separate files so I will split them up below.

HTML (excerpt):

<div dojoType="dijit.form.Button" id="clickforXY" iconClass="clickforXY" onClick="drawToolbar.activate(esri.toolbars.Draw.POINT);">Click for XY</div>

Javascript: dojo.require(""); //dojo.require("esri.dijit.Legend"); //dojo.require("esri.dijit.OverviewMap"); dojo.require("esri.toolbars.navigation"); dojo.require("esri.arcgis.utils"); dojo.require("esri.dijit.BasemapGallery"); //dojo.require("esri.virtualearth.VETiledLayer"); dojo.require("esri.toolbars.draw");


    var map, navToolbar, symbol, geomtask, visible = [];
    var drawToolbar;
    var gsvc = null;
      var pt = null;

      function init(){
        var layersLoaded = 0;  //variable to keep track of when all layers have been loaded.
        var loading = dojo.byId("loadingImg");  //loading image. id
        var initialExtent = startExtent;  //Extent values are in config.js.
        map = new esri.Map("map", {
            extent: initialExtent, logo:false

        gsvc = new esri.tasks.GeometryService("http://dal-gisweb/ArcGIS/rest/services/Geometry/GeometryServer");

        dojo.connect(map, "onLoad", showLoading);
        dojo.connect(map, "onZoomStart", showLoading);
        dojo.connect(map, "onPanStart", showLoading);
        dojo.connect(map, 'onLoad', function(map){
            dojo.connect(dijit.byId('map'), 'resize', resizeMap);
        dojo.connect(map, "onLoad", createdrawToolbar);
        //dojo.connect(map, "onClick", projectToLatLong);

        function showLoading() {

        function hideLoading(error){
            if (layersLoaded === map.layerIds.length) {
                layersLoaded = 0;

        //Set up the TOC for initial map load.
        //Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.
        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = initialLayers;
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;

        //The path to the services are located in the config.js.
        basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapservice);
        //oppllayer = new esri.layers.ArcGISDynamicMapServiceLayer(opplservice);
        dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicservice, {"imageParameters":imageParameters});

        dojo.connect(map, 'onLayersAddResult', function(results){
            //add the legend 
                    var legend = new esri.dijit.Legend({
                        map: map,
                        layerInfos: [{
                            layer: dynamicLayer,
                            title: "Crosstex"
                        arrangement: esri.dijit.Legend.ALIGN_Left
                    }, "legendDiv");
                dojo.connect(basemap, "onUpdateEnd", hideLoading);
                dojo.connect(dynamicLayer, "onUpdateEnd", hideLoading);

                //Add the ArcGIS BaseMap Gallery.
                dojo.connect(dijit.byId('map'), 'resize', resizeMap);

                function resizeMap(){
                    //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
                    //the following help topic for more details
                    var resizeTimer;
                    dojo.connect(map, 'onLoad', function(theMap){
                        dojo.connect(dijit.byId('map'), 'resize', function(){ //resize the map if the div is resized
                            resizeTimer = setTimeout(function(){
                            }, 500);
                navToolbar = new esri.toolbars.Navigation(map);
                dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

                //set position of the zoom slider at X pixels offset from left/bottom of map
       = { left:"10px", top:"35px", width:null, height:"200px" };

        function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
//Sets up the ability for dynamic layers to be toggled.
        function updatedynamicLayerVisibility(){
            var inputs = dojo.query(".list_item"), input;
            //Placing layer numbers below will enforce them to be visible.
            visible = [];
            for (var i = 0, il = inputs.length; i < il; i++) {
                if (inputs[i].checked) {

//Sets up the ability for OPPL layers to be toggled.
        function updateOPPLLayerVisibility(){
            var inputs = dojo.query(".list_item"), input;
            //Placing layer numbers below will enforce them to be visible.
            visible = [];
            for (var i = 0, il = inputs.length; i < il; i++) {
                if (inputs[i].checked) {


    function createBasemapGallery() {

         var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");


        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
//Sets up the funcions for the GoToXY
    function createPoint(){;
        var infoSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 2), new dojo.Color([0,255,0,1]));

       //add point using the coordinates fromt he form below.
       var pnt_X = document.getElementById("frm_X").value;
       var pnt_Y = document.getElementById("frm_Y").value;
       var pnt_xy = new esri.geometry.Point(pnt_X, pnt_Y, map.spatialReference);

       var pnt_xysym = new esri.Graphic(esri.geometry.geographicToWebMercator(pnt_xy), infoSymbol);;
       map.centerAndZoom(esri.geometry.geographicToWebMercator(pnt_xy), map.getLevel()+1); 

      //Create the drawing toolbar.
      function createdrawToolbar(map) {

        drawToolbar = new esri.toolbars.Draw(map);
        dojo.connect(drawToolbar, "onDrawEnd", addToMap);


      function addToMap(geometry) {;
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([0,255,0,1]));


        var graphic = new esri.Graphic(geometry, symbol);;

      function projectToLatLong(evt) {
        var point = evt;
        var outSR = new esri.SpatialReference({ wkid: 4326});

        gsvc.project([ point ], outSR, function(projectedPoints) {

         pt = projectedPoints[0];
          //display list of points in extent
          dojo.byId("results").innerHTML = "&nbsp;Lat: " + pt.y.toFixed(6) + ",&nbsp;Long: " + pt.x.toFixed(6);

      //Used to deactivate tools in order to enable others.
      function deactAllTools() {

      //show map on load 

To view this in action you can follow the link below.

I appreciate the great help that this site offers.


share|improve this question
up vote 4 down vote accepted

This piece of code looks wrong to me:

dojo.connect(map, 'onLoad', function(map){
  dojo.connect(dijit.byId('map'), 'resize', resizeMap);
  dojo.connect(map, "onLoad", createdrawToolbar);
  //dojo.connect(map, "onClick", projectToLatLong);

Looks like you are trying to connect to the 'onLoad' event from the onLoad event, which I'm guessing is causing createdrawToolbar to never be called. Try this:

dojo.connect(map, 'onLoad', function(map){
  dojo.connect(dijit.byId('map'), 'resize', resizeMap);
  //dojo.connect(map, "onClick", projectToLatLong);
dojo.connect(map, "onLoad", createdrawToolbar);

I'm not sure off the top of my head if you can connect multiple event listeners in dojo, I think you can. If not, you can call createdrawToolbar() directly from your first onLoad handler.

share|improve this answer
That was it! I never caught that. Sometimes a new set of eyes can really help. – Mike Long Apr 14 '11 at 21:04

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.