Create a button to meaure an area

Question

I try to modify a sample by creating a button and see here: Edit fiddle - JSFiddle

Not sure how to create a button to call the following code:

Original one:

map.on("load", function() {

var tb = new Draw(map);

tb.on("draw-end", lang.hitch(map, getAreaAndLength));

tb.activate(Draw.FREEHAND_POLYGON);

});

Please help.  Thanks.

‌

RobertWinterbottom · Accepted Answer

Couple Things.

You may want to read up on a AMD tutorial for Dojo or for Esri.  When you put a function inside another function(aka your beginmeasure function inside the callback for require) it is not available globally.  So that is why the code is throwing an error.

Another thing is how to attach events in dojo.  I recommend looking up how to use the dojo/on module (dojo/on view /dojo/on).  It is perfect for attaching events.  The way it works is you import the module via the require function, and then in your code you will call something like

on(document.getElementById("measurearea"), "click", function () {
  // Run your code here
});

what that is doing is saying on, the measurearea button click event, call my function.  This will allow you to listen to the button click event.

Lastly you will want to look up the draw tools.  They created the Draw toolbar, and attached the event for you and you don't want to change that part.  What you want to do is on click, activate the toolbar, and then on draw end, run the getAreaAndLength function and deactivate the toolbar

so for example:

on(document.getElementById("measurearea"), "click", function () {
 tb.activate(Draw.FREEHAND_POLYGON);
});

and then in the getAreasAndLength function you will need to call tb.deactivate();

This way, map.on('load') the Draw toolbar is created, the function to get the areasAndLengths is attached to draw-end and ready to go.  And then when the button is clicked, you can activate the toolbar.  When they finish drawing, it will trigger the getAreasAndLength function and then you can deactivate the toolbar.

Your going to need to get familiar with the AMD style of JavaScript programming to work with most of the samples.