nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to modify measurement widget?

RyanStrain

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?

Find more posts tagged with

Accepted answers

All comments

UdayBurrey

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;

}

MiriamBrockmann

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

UdayBurrey

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?

DanielNieto_Jr

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>

RyanStrain

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?

JianHuang

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);

GabiVoicu

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

HemingZhu

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.

DanielNieto_Jr

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.