topic Re: How to modify measurement widget? in ArcGIS JavaScript Maps SDK Questions

How to modify measurement widget?

RyanStrain — Tue, 31 May 2011 20:02:05 GMT

I'm using the measurement widget that is provided in the ArcGIS API for Javascript. I'd like to remove the "location" button that gives coordinate results. And I'd also like to change the default units from "Miles" to "Feet". Any ideas?

Re: How to modify measurement widget?

DanielNieto_Jr — Wed, 01 Jun 2011 13:37:07 GMT

I am also curious how to modify this widget. I want to change the text size of the drop down menu (ie: where it says Miles, kilometers, etc) as well as shrink down some other elements of it. I cant figure out the CSS to change in order to modify the measurement widget beyond changing what the icons are.

Re: How to modify measurement widget?

HemingZhu — Wed, 01 Jun 2011 13:59:44 GMT

I am also curious how to modify this widget. I want to change the text size of the drop down menu (ie: where it says Miles, kilometers, etc) as well as shrink down some other elements of it. I cant figure out the CSS to change in order to modify the measurement widget beyond changing what the icons are.

Given that the JS API for measurement list very few properties, events and methods. It does not have super class, It really cannot do much modification except change the appearence of the icons such as remove the location icon: .locationIcon { display: none; }. It would be interesting to see ESRI's input on this.

Re: How to modify measurement widget?

GabiVoicu — Thu, 02 Jun 2011 19:27:09 GMT

The area tool does not wlways works as expected - it is kind of difficult at times to close a polygon.
I would like to turn off the area tool just because it does not behave nice for us...so i was also wondering if there was a way to do this ESRI??

Thank you

Re: How to modify measurement widget?

JianHuang — Sun, 12 Dec 2021 01:14:08 GMT

Please try this:

        var measurement = new esri.dijit.Measurement({
          map: map
        }, dojo.byId('measurement'));
  measurement.startup();
        var area = dojo.query('[widgetid=\"area\"]')[0];
        area.parentNode.removeChild(area);

Re: How to modify measurement widget?

RyanStrain — Sun, 12 Dec 2021 01:14:11 GMT

Cool beans Jian. That worked great to remove the area button. Working off your code, I found this code will remove the location button.

var location = dojo.query('[widgetid=\"location\"]')[0];
location.parentNode.removeChild(location);

What about changing the default units, when using the distance tool?

Re: How to modify measurement widget?

DanielNieto_Jr — Sun, 12 Dec 2021 01:14:14 GMT

Also can this be used to change the CSS elements of the widget.

I found that the area where i want to modify the text-size is labeled :#unit_label, under the node #unit I believe. I have tried jQuery .CSS command to change #unit_label it was unsuccessful

reference

<span class="dijit dijitReset dijitInline esriToggleButton" style="visibility: visible;" widgetid="unit">
<span class="dijitReset dijitInline dijitButtonNode" dojoattachpoint="_buttonNode" dojoattachevent="ondijitclick:_onButtonClick">
<span id="unit" class="dijitReset dijitStretch dijitButtonContents dijitDownArrowButton" aria-labelledby="unit_label" aria-haspopup="true" role="button" dojoattachpoint="focusNode,titleNode,_arrowWrapperNode" style="-moz-user-select: none;" tabindex="0">
<span class="dijitReset dijitInline dijitIcon" dojoattachpoint="iconNode"></span>
<span id="unit_label" class="dijitReset dijitInline dijitButtonText" dojoattachpoint="containerNode,_popupStateNode" style="font-size:16px !important;" popupactive="true">Miles</span>
<span class="dijitReset dijitInline dijitArrowButtonInner"></span>
<span class="dijitReset dijitInline dijitArrowButtonChar">�?�</span>
</span>
</span>
<input class="dijitOffScreen" type="button" dojoattachpoint="valueNode" tabindex="-1" value="unit">
</span>

Re: How to modify measurement widget?

UdayBurrey — Fri, 18 Mar 2016 22:47:09 GMT

I also have the same requirement. Did one one figure out how the css element style can be changed for the elements inside the measurement widget?

Re: How to modify measurement widget?

MiriamBrockmann — Mon, 21 Mar 2016 09:03:54 GMT

This is easy. There's a buildIn function to hide or show the three Types of measurement called hideTool('toolname').

Just insert the Toolname you don't want to see.

To change the default Unit for Area-Measurement use defaultAreaUnit and for changing the default length Unit use defaultLengthUnit.

				measurement = new Measurement({
					map: map,
					defaultAreaUnit: Units.SQUARE_METERS,
					defaultLengthUnit: Units.METERS
				}, dom.byId('measurementDiv'));

				measurement.startup();
				measurement.hideTool("location");

For further Informations have a look here : Measurement | API Reference | ArcGIS API for JavaScript

Regards

Re: How to modify measurement widget?

UdayBurrey — Tue, 22 Mar 2016 18:55:18 GMT

Thank you for providing help on this. My actual problem was the arrow with the drop down list on the measurement widget was not showing up. I found that the display of the arrow element is set to "none" by default. I had to overwrite that attribute by placing this block in my CSS file

.dijitArrowButtonChar {

display:inline !important;

}