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 = " Lat: " + pt.y.toFixed(6) + ", 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
Best Answer
This piece of code looks wrong to me:
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:
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.