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>
