Hi tried to custom my own button to trigger area measurment widget, so it can activate using button that i created, 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>
<body>
<button type="button" name="button">do measurment</button>
</body>
can anyone help me with this? Thank you
I have a codepen that I was starting to play around with changing the buttons of the measure widget. Its pretty crude right now but essentially you customize the button in the css. Take a look, it might give you an idea for your project. customizing measurement buttons