Changing the label of the measurement widgets

Question

Can anyone lend a hand here? I've got the DistanceMeasurement2D and AreaMeasurement2D widgets added through the JSAPI, and I'm trying to designate the difference between the two for my users.  When they're added to the view, both of the widgets are labeled with "New Measurement". I would like them to be labeled "Distance Measurement" and "Area Measurement". Each of the widgets has a property called "label" that is a string, however modifying that property does not appear to change the text on the widget.  Please see my screenshots below and any pointers would be appreciated!  I'm sure I'm missing something simple here.

Widgets.jpg

code.jpg

Atlantic Retail Wave.png

JackFanZhang · Answer

Thank you Robert. I followed your tips and added the long-waited clear button next to the Measurement button. : )

BrianCunningham2 · Answer

Sweet.  That worked like a charm.  Thank you very much Mr. Scheitlin!

It took me a minute to figure the code out for the line measurement tool, but this is the final code that I used to change the text for both widgets...

Even though I am in a web map -- not a scene -- the name of the buttons still have '3d' in them.

// Change the text for line measurement   lineMeasure.watch('viewModel.state', function(state){        setTimeout(function(){            var button = query('.esri-direct-line-measurement-3d__clear-button') [0];                button.innerHTML = "Distance Measurement";                domAttr.set(button, 'title', 'Distance Measurement');        }, 0);    });
    setTimeout (function() {        var button = query('.esri-direct-line-measurement-3d__clear-button') [0];            button.innerHTML = "Distance Measurement";            domAttr.set(button, 'title', 'Distance Measurement');    }, 0);// Change the text for area measurement    areaMeasure.watch('viewModel.state', function(state){        setTimeout(function(){            var button = query('.esri-area-measurement-3d__clear-button') [0];                button.innerHTML = "Area Measurement";                domAttr.set(button, 'title', 'Area Measurement');        }, 0);    });
    setTimeout (function() {        var button = query('.esri-area-measurement-3d__clear-button') [0];            button.innerHTML = "Area Measurement";            domAttr.set(button, 'title', 'Area Measurement');    }, 0);

RobertScheitlin__GISP · Answer

You can manually manipulate the dom though. Here is a sample that does that: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Measurement in 2D - 4.12</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.12/"></script> <script> require([ "esri/views/MapView", "esri/WebMap", "esri/widgets/DistanceMeasurement2D", "esri/widgets/AreaMeasurement2D", "dojo/query", "dojo/dom-attr" ], function(MapView, WebMap, DistanceMeasurement2D, AreaMeasurement2D, query, domAttr) { var activeWidget = null; // load a webmap const webmap = new WebMap({ portalItem: { id: "990d0191f2574db495c4304a01c3e65b" } }); // create the map view const view = new MapView({ container: "viewDiv", map: webmap }); // add the toolbar for the measurement widgets //view.ui.add("topbar", "top-right"); // To add the AreaMeasurement2D widget to your map var measurementWidget = new AreaMeasurement2D({ view: view }); view.ui.add(measurementWidget, "top-right"); measurementWidget.watch('viewModel.state', function(state){ setTimeout(function(){ var button = query('.esri-area-measurement-3d__clear-button')[0]; button.innerHTML = "blah blah"; domAttr.set(button, 'title', 'blah blah'); }, 0); }); setTimeout(function(){ var button = query('.esri-area-measurement-3d__clear-button')[0]; button.innerHTML = "blah blah"; domAttr.set(button, 'title', 'blah blah'); }, 0); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍