topic Changing the label of the measurement widgets in ArcGIS JavaScript Maps SDK Questions

Changing the label of the measurement widgets

BrianCunningham2 — Mon, 09 Sep 2019 14:55:10 GMT

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.

Re: Changing the label of the measurement widgets

KenBuja — Mon, 09 Sep 2019 15:49:12 GMT

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-missed-in-js-46?comment…

Re: Changing the label of the measurement widgets

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:58:00 GMT

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

Re: Changing the label of the measurement widgets

BrianCunningham2 — Mon, 09 Sep 2019 19:42:30 GMT

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

Re: Changing the label of the measurement widgets

JackFanZhang — Fri, 16 Dec 2022 02:54:03 GMT

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