Switching between two drawing tools

[AndrewBrown1]

Hello,

I'm trying to build a measuring toolbar that allows the user to measure a distance or an area by using the freehand tool. Currently, there is a button with a dynamically-created menu and the properties are being set inside an array before being created.

Everything works fine except for one part: When the user selects and uses the "Measure by distance" tool initially, and then uses the "Measure by area" tool, you cannot go back to using the distance tool. However, if you select and use the "Measure by area" tool first, you cannot use the distance tool, the drawing shape is still a polygon.

How would I clear the session so the two tools won't get intertwined? This is my first attempt at building an application and using javascript, so sorry for any dumb questions.

Code is below:

measureTools = [{label:"Measure an area", 
        onClick: dojo.hitch(function(){
              
              dijit.byId("measureButton").set("label","Measure an area");
              tb = new esri.toolbars.Draw(map);
              dojo.connect(tb, "onDrawEnd", getAreaAndLength)
              map.graphics.clear();
              //tb.deactivate();
              tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
              })},
        {label: "Measure a distance", 
        onClick: dojo.hitch(function(){
              
              dijit.byId("measureButton").set("label","Measure a distance");
              tb = new esri.toolbars.Draw(map);
              lengthParams = new esri.tasks.LengthsParameters();
              dojo.connect(tb, "onDrawEnd", function(geometry) {
                map.graphics.clear();
                lengthParams.polylines = [geometry];
                lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                lengthParams.geodesic = true;
                geometryService.lengths(lengthParams);
                var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
              })
              //tb.deactivate();
              tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
              })}];

Thanks,

Andrew

[HemingZhu]

Hello,

I'm trying to build a measuring toolbar that allows the user to measure a distance or an area by using the freehand tool. Currently, there is a button with a dynamically-created menu and the properties are being set inside an array before being created.

Everything works fine except for one part: When the user selects and uses the "Measure by distance" tool initially, and then uses the "Measure by area" tool, you cannot go back to using the distance tool. However, if you select and use the "Measure by area" tool first, you cannot use the distance tool, the drawing shape is still a polygon.

How would I clear the session so the two tools won't get intertwined? This is my first attempt at building an application and using javascript, so sorry for any dumb questions.

Code is below:

measureTools = [{label:"Measure an area", 
        onClick: dojo.hitch(function(){
              
              dijit.byId("measureButton").set("label","Measure an area");
              tb = new esri.toolbars.Draw(map);
              dojo.connect(tb, "onDrawEnd", getAreaAndLength)
              map.graphics.clear();
              //tb.deactivate();
              tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
              })},
        {label: "Measure a distance", 
        onClick: dojo.hitch(function(){
              
              dijit.byId("measureButton").set("label","Measure a distance");
              tb = new esri.toolbars.Draw(map);
              lengthParams = new esri.tasks.LengthsParameters();
              dojo.connect(tb, "onDrawEnd", function(geometry) {
                map.graphics.clear();
                lengthParams.polylines = [geometry];
                lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                lengthParams.geodesic = true;
                geometryService.lengths(lengthParams);
                var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
              })
              //tb.deactivate();
              tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
              })}];

Thanks,

Andrew

I think a better solution would be to use a delegate to handle onDrawEnd event. I would do like this:

var tb, btnMeasure, measureMode;

function init()
{
    .......
    tb = new esri.toolbars.Draw(map);
    btnMeasure =dijit.byId("measureButton");
    dojo.connect(tb, "onDrawEnd", getMeasurement);
    ......

    measureTools = [{label:"Measure an area",
        onClick: dojo.hitch(function(){     
              tb.deactivate();  //deactivate the previous draw             
              measureMode ="Area"; // reset the measure mode
              dijit.byId("measureButton").set("label","Measure an area");
              tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON); //reactive with freehand
              })},
        {label: "Measure a distance",
        onClick: dojo.hitch(function(){
               tb.deactivate();  //deactivate the previous draw             
               measureMode ="Length"; // reset the measure mode
               dijit.byId("measureButton").set("label","Measure a distance");
               tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
         })}];
        ...........
}
function getMeasurement(geometry)
{
     map.graphics.clear();
     switch (measureMode) // or use geometry.type
     {
          case "Area":         //measure area goes here
               // whatever your getAreaAndLength code
               ......
              break;
          case "Length":
              var lengthParams = new esri.tasks.LengthsParameters();
              lengthParams.polylines = [geometry];
              lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
              lengthParams.geodesic = true;
              geometryService.lengths(lengthParams);
              var graphic = map.graphics.add(new esri.Graphic(geometry, new   esri.symbol.SimpleLineSymbol()));
              break;
     }
}
....

[AndrewBrown1]

Thank you very much for your help, I really do appreciate it.