topic How to use AreaMeasurement2DViewModel in ArcGIS JavaScript Maps SDK Questions

How to use AreaMeasurement2DViewModel

putra_ — Sun, 17 Jan 2021 14:05:23 GMT

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

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

Re: How to use AreaMeasurement2DViewModel

AndrewVitale — Sun, 17 Jan 2021 20:23:32 GMT

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>

Re: How to use AreaMeasurement2DViewModel

putra_ — Mon, 18 Jan 2021 16:08:15 GMT

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