ESRI JS Dynamic measure draw v2

Show dynamic measure while drawing graphics. LatLong for points; distance for Lines; Perimeter and Area for Polys. Attempt 2: Without using Geometry service (too many server calls)

by Bryan McIntosh

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/"></script>
<body class="nihilo">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
            <button data-dojo-type="dijit/form/Button">Point</button>
            <button data-dojo-type="dijit/form/Button">Multi Point</button>
            <button data-dojo-type="dijit/form/Button">Polyline</button>
            <button data-dojo-type="dijit/form/Button">Polygon</button>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div id="floatInfo"> <span id="Seggy">Info 1</span>
 <span id="Totty"> Info 2</span>

            </div>
        </div>
    </div>
</body>

CSS

html, body, #mainWindow {
    font-family: sans-serif;
    height: 100%;
    width: 100%;
}
html, body {
    margin: 0;
    padding: 0;
}
#header {
    height: 30px;
    overflow: auto;
    padding: 0.5em;
}
#floatInfo {
    display: block;
    z-index: 3;
    position: absolute;
    right: 15px;
    top: 5px;
    background-color: rgba(255, 255, 255, .5)
}

JavaScript

//To self: Careful when adding events with ON and where/when you disconnect events!

require([
    "esri/map", "esri/toolbars/draw", "esri/graphic", "esri/tasks/DistanceParameters", "esri/tasks/AreasAndLengthsParameters",
    "esri/tasks/GeometryService", "esri/geometry/Polygon", "esri/geometry/webMercatorUtils", "esri/SpatialReference",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dojo/parser", "dijit/registry", "dojo/dom",
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
    "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"], function (
Map, Draw, Graphic, DistanceParameters, AreasAndLengthsParameters, GeometryService, Polygon, webMercatorUtils,
SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry, dom) {
    
    var map, toolbar, symbol, geomTask;
    var geometryService;
    var eventsLoaded = 0; //Keep track of loaded DOM events

    parser.parse();
    map = new Map("map", {
        basemap: "streets",
        center: [-80.230, 43.508],
        zoom: 12
    });

    map.on("load", createToolbar);
    registry.forEach(function (d) {
        // d is a reference to dijits
        if (d.declaredClass === "dijit.form.Button") {
            d.on("click", activateTool);
        }
    });

    function activateTool() {
        clickedPointsArr = [];
        dom.byId('Seggy').innerHTML = "";
        dom.byId('Totty').innerHTML = "";
        var tool = this.label.toUpperCase().replace(/ /g, "_");
        if (eventsLoaded != 0) {
            unloadCurrentEvent(eventsLoaded);
        }
        
        if (tool == "POINT" || tool == "MULTI_POINT") {
            //use variable pointMouseEvt so we can disable later
            pointMouseEvt = map.on("mouse-move", function (evt) {
                var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
                dom.byId('Seggy').innerHTML = "x: " + mp.x.toFixed(3) + "  ";
           ...