Thank you again @Edvinas_S - you definitely helped get me on my way. I additionally want to thank a Penn State University instructor - Jim Detwiler - who taught me web mapping some years ago (and still proves to be a valuable resource when I am stuck). These users' insights helped immensely, as did this Esri page regarding watching for component changes:
https://developers.arcgis.com/javascript/latest/watch-for-changes/
There is in fact a specific example of the 2D measurement tool. Ultimately, I look for any property change in the tool's state. Once that happens - eg. with a push of the 'New measurement' button - the state will change ("measuring", "measured", etc.). Regardless, as soon as that happens, I can set an EventListener on my calcite-button that allows me to clear the measurement graphics:
// ****** MEASUREMENT TOOLS ******
const expandMeasurement_line = document.getElementById("line-measure");
const expandMeasurement_area = document.getElementById("area-measure");
const measureLine = document.querySelector("arcgis-distance-measurement-2d");
const measureArea = document.querySelector("arcgis-area-measurement-2d");
const trashCan = document.querySelector("calcite-button");
measureLine.addEventListener("arcgisPropertyChange", (e) => {
if (e.detail.name === "state") {
console.log("Measurement state:", e.target[e.detail.name]);
trashCan.addEventListener("click", () => {
e.target._store.viewModel.clear();
if (expandMeasurement_line.expanded === true) {
expandMeasurement_line.collapse();
}
});
}
});
measureArea.addEventListener("arcgisPropertyChange", (e) => {
if (e.detail.name === "state") {
console.log("Measurement state:", e.target[e.detail.name]);
trashCan.addEventListener("click", () => {
e.target._store.viewModel.clear();
if (expandMeasurement_area.expanded === true) {
expandMeasurement_area.collapse();
}
});
}
});
// ****** MEASUREMENT TOOLS ******
Until the clear and start methods are exposed for 2D measurement as they are with 3D measurement, this should do the trick.
