How to use AreaMeasurement2DViewModel

346
2
Jump to solution
01-17-2021 06:05 AM
putra_
by
New Contributor

Hi i tried to get value for area from area measurment, i am using AreaMeasurement2DViewModel but somehow when i tried to access the value it error it says Cannot read property 'area' of null, i dont know if i am correct using the code, this is my code

<script>
      require([
        "esri/views/MapView",
        "esri/WebMap",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/AreaMeasurement2D",
        "esri/widgets/AreaMeasurement2D/AreaMeasurement2DViewModel",
      ], function (
        MapView,
        WebMap,
        DistanceMeasurement2D,
        AreaMeasurement2D,
        AreaMeasurement2DViewModel
      ) {
 
        // load a webmap
        const webmap = new WebMap({
          portalItem: {
            id: "990d0191f2574db495c4304a01c3e65b",
          },
        });

        // create the map view
        const view = new MapView({
          container: "viewDiv",
          map: webmap,
        });

        var measurementWidget = new AreaMeasurement2D({
          view: view,
        });
        view.ui.add(measurementWidget"top-right");

        // Raw measurements (in meters) can be accessed from this property
       measurementWidget.watch("viewModel.measurement", function(measurement) {
       console.log( "Area: ", measurement.area);
      });
</script>
 
anyone can help me with this? thank you
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
AndrewVitale
New Contributor III

Hello,

It looks like the `viewModel.measurement` property gets set to `null` by the widget when you first click the "New measurement" button. Since you're watching the property for ALL changes, the null gets passed into your event handler.

You can simply check if the property is "truthy" before trying to access the properties by guarding your code in an if statement. This is a common pattern, and it's useful outside of the JS API.

Here's a working sample:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Esri Playground</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.18/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/views/MapView",
        "esri/WebMap",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/AreaMeasurement2D",
        "esri/widgets/AreaMeasurement2D/AreaMeasurement2DViewModel",
      ], function (
        MapView,
        WebMap,
        DistanceMeasurement2D,
        AreaMeasurement2D,
        AreaMeasurement2DViewModel
      ) {
        // load a webmap
        const webmap = new WebMap({
          portalItem: {
            id: "990d0191f2574db495c4304a01c3e65b",
          },
        });

        // create the map view
        const view = new MapView({
          container: "viewDiv",
          map: webmap,
        });

        var measurementWidget = new AreaMeasurement2D({
          view: view,
        });
        view.ui.add(measurementWidget, "top-right");

        measurementWidget.watch(
          "viewModel.measurement",
          function (measurement) {
            console.log({ measurement });

            if (measurement) {
              console.log("Area: ", measurement.area);
            }
          }
        );
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

 

View solution in original post

0 Kudos
2 Replies
AndrewVitale
New Contributor III

Hello,

It looks like the `viewModel.measurement` property gets set to `null` by the widget when you first click the "New measurement" button. Since you're watching the property for ALL changes, the null gets passed into your event handler.

You can simply check if the property is "truthy" before trying to access the properties by guarding your code in an if statement. This is a common pattern, and it's useful outside of the JS API.

Here's a working sample:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Esri Playground</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.18/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/views/MapView",
        "esri/WebMap",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/AreaMeasurement2D",
        "esri/widgets/AreaMeasurement2D/AreaMeasurement2DViewModel",
      ], function (
        MapView,
        WebMap,
        DistanceMeasurement2D,
        AreaMeasurement2D,
        AreaMeasurement2DViewModel
      ) {
        // load a webmap
        const webmap = new WebMap({
          portalItem: {
            id: "990d0191f2574db495c4304a01c3e65b",
          },
        });

        // create the map view
        const view = new MapView({
          container: "viewDiv",
          map: webmap,
        });

        var measurementWidget = new AreaMeasurement2D({
          view: view,
        });
        view.ui.add(measurementWidget, "top-right");

        measurementWidget.watch(
          "viewModel.measurement",
          function (measurement) {
            console.log({ measurement });

            if (measurement) {
              console.log("Area: ", measurement.area);
            }
          }
        );
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

 

0 Kudos
putra_
by
New Contributor

Hi AndreVitale thanks this really is helpful,
i just realize the property gets set to `null` when you first click and because of that i cannot do the measurment, and i using try catch for that
this is my code

try {
console.log("Area: ", measurement.area);
} catch (err) {
console.log(0);
}

0 Kudos