Changing the label of the measurement widgets

BrianCunningham2 · ‎09-09-2019

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.

KenBuja · ‎09-09-2019

Unfortunately, you can't even change the default label using the underlying nls files. A year ago, Esri was considering adding this option but it still isn't available

https://community.esri.com/message/763227-re-can-not-translate-resources-dojoi18nesrinlsjsapi-is-mis...

RobertScheitlin__GISP · ‎09-09-2019

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JackFanZhang · ‎12-15-2022

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

BrianCunningham2 · ‎09-09-2019

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);