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.
var measurement = new esri.dijit.Measurement({ map: map }, dojo.byId('measurement')); measurement.startup(); var area = dojo.query('[widgetid=\"area\"]')[0]; area.parentNode.removeChild(area);
var location = dojo.query('[widgetid=\"location\"]')[0]; location.parentNode.removeChild(location);
<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>
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?
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
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;
}