Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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("esri.map"); //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");

    setConfigProperties();

    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() {
          esri.show(loading);
          //map.disableMapNavigation();
          //map.hideZoomSlider();
        }

        function hideLoading(error){
            layersLoaded++;
            if (layersLoaded === map.layerIds.length) {
                esri.hide(loading);
                //map.enableMapNavigation();
                //map.showZoomSlider();
                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;
        //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

        //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");
                    legend.startup();
                });
                dynamicLayer.setOpacity(0.8);
                map.addLayer(basemap);
                dojo.connect(basemap, "onUpdateEnd", hideLoading);
                map.addLayer(dynamicLayer);
                dojo.connect(dynamicLayer, "onUpdateEnd", hideLoading);


                //Add the ArcGIS BaseMap Gallery.
                createBasemapGallery();
                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 http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
                    var resizeTimer;
                    dojo.connect(map, 'onLoad', function(theMap){
                        dojo.connect(dijit.byId('map'), 'resize', function(){ //resize the map if the div is resized
                            clearTimeout(resizeTimer);
                            resizeTimer = setTimeout(function(){
                                map.resize();
                                map.reposition();
                            }, 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
                esriConfig.defaults.map.slider = { 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) {
                    visible.push(inputs[i].id);
                }
            }
            dynamicLayer.setVisibleLayers(visible);

        }
//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) {
                    visible.push(inputs[i].id);
                }
            }
            oppllayer.setVisibleLayers(visible);

        }

    function createBasemapGallery() {

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

        basemapGallery.startup();

        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }
//Sets up the funcions for the GoToXY
    function createPoint(){
        map.graphics.clear(pnt_xysym);
        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.graphics.add(pnt_xysym);
       map.centerAndZoom(esri.geometry.geographicToWebMercator(pnt_xy), map.getLevel()+1); 

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

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

      }

      function addToMap(geometry) {
      map.graphics.clear();
      drawToolbar.deactivate();
      map.showZoomSlider();
       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);
        map.graphics.add(graphic);
        projectToLatLong(geometry);
      }

      function projectToLatLong(evt) {
        //map.graphics.clear();
        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() {
       navToolbar.deactivate();
       drawToolbar.deactivate();
        }

      //show map on load 
      dojo.addOnLoad(init);

To view this in action you can follow the link below. http://geoville.org/viewers/samplesviewer/

I appreciate the great help that this site offers.

-Mike

share|improve this question

1 Answer 1

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

 
discard

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.