How to create own button for AreaMeasurement2D

246
1
02-08-2021 08:10 AM
putra_
by
New Contributor

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

 

Tags (1)
0 Kudos
1 Reply
JeffK
by MVP Regular Contributor
MVP Regular Contributor

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 

0 Kudos