Changing the label of the measurement widgets

1438
4
09-09-2019 07:55 AM
BrianCunningham2
New Contributor III

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.

0 Kudos
4 Replies
KenBuja
MVP Esteemed Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
Occasional Contributor

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

0 Kudos
BrianCunningham2
New Contributor III

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