Issue with draw toolbar activation

Question

Hi, I am having issue with the toolbar activation at the line 12 in the below code toolbar.activate(Draw[tool]);‍‍ I am getting this error when checking the web console: Uncaught TypeError: toolbar.activate is not a function After further looking/debugging into the developer tool, it seems that the activateTool() function is calling before the createToolbar(). Below is my code sample map.on('load', createToolbar); function createToolbar(themap) { toolbar = new Draw(map); toolbar.on("draw-end", addToMap); }‍‍‍‍‍‍ on(dom.byId("point"), "click", activateTool('point')); on(dom.byId("polyline"), "click", activateTool('polyline')); function activateTool(toolName) { var tool = toolName.toUpperCase().replace(/ /g, "_"); toolbar.activate(Draw[tool]); map.hideZoomSlider(); } function addToMap(evt) { var symbol; toolbar.deactivate(); map.showZoomSlider(); switch (evt.geometry.type) { case "point": case "multipoint": symbol = new SimpleMarkerSymbol(); break; case "polyline": symbol = new SimpleLineSymbol(); break; default: symbol = new SimpleFillSymbol(); break; } var graphic = new Graphic(evt.geometry, symbol); map.graphics.add(graphic); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Thanks to those that can help and thanks to those that helped with the previous question.

JayakumarPD · Answer

hi, this is easy, instead of using the default sample given by esri.

on(dom.byId("buttons"), "click", function (evt) {
map.on("click", function (evt) {
console.log(tool);
var pointCordinates = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
console.log(pointCordinates);
})

I have challenge of saving the coordinates into database, for point I have taken like this.  But how to take the coordinates for polyline.

KevinTientcheu3 · Answer

Hello Abdul, As Robert asked, I am also not sure about why you are using a list on line 12 for Draw. However, playing with the sample code from the ArcGIS API for JavaScript Sandbox I was able to get something that I think is what you are looking for. Below is the edited code from the sandbox. It is different from yours in structure but accomplishes the same thing: map.on("load", createToolbar); //---Define your symbols as needed (marker symbol, lineSymbol, fillSymbol)---// function createToolbar() { toolbar = new Draw(map); toolbar.on("draw-end", addGraphic); // event delegation so a click handler is not // needed for each individual button on(dom.byId("buttons"), "click", function(evt) { if ( evt.target.id === "buttons" ) { return; } var tool = evt.target.id.toLowerCase(); map.hideZoomSlider(); toolbar.activate(tool); }); } function addGraphic(evt) { //deactivate the toolbar and clear existing graphics toolbar.deactivate(); map.showZoomSlider(); // figure out which symbol to use var symbol; if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") { symbol = markerSymbol; } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") { symbol = lineSymbol; } else { symbol = fillSymbol; } map.graphics.add(new Graphic(evt.geometry, symbol)); } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Below is what the HTML might look like: <div id="buttons"> <div>Select a shape then draw on map to add graphicdiv> <button id="Point">Pointbutton> <button id="Polyline">Polylinebutton> div>‍‍‍‍‍ I hope it helps!

RobertScheitlin__GISP · Answer

Abdul,

What does your codes require array and vars look like (the beginning of your code)?