I am working on a menu that lets the use select a classification method, either quantile or equal interval, as well as letting them change the color or the number of intervals. The number of classes is in a dijit/form/NumberSpinner. The colors I have in a FilteringSelect. For both of those, I was able to have an event listener such as
registry.byId('classSelect').on ('change', function (){
numClass = registry.byId("classSelect").value;
drawFeatureLayer();
});
This lets the user change the interval and it immediately executes the functions that do the drawing. I like the look of a radio buttons and I want to use those for my classification methods. First I tried a dijit/formRadioButton. This looks OK, but selecting between the two choices doesn't have very good styling. The first button still has a little fill color to it, and the 2nd one does too, so it looks like both of them are selected.
<h4>Classification method: </h4>
<form id="classForm" action="">
<input type="class-method" name="method" id="btnQuantile" value="quantile" data-dojo-type="dijit/form/RadioButton" checked="checked"/> <label for="btnQuantile">Quantile</label> <br />
<input type="class-method" name="method" id="btnEqInterval" value="equal_interval" data-dojo-type="dijit/form/RadioButton" /> <label for="btnEqInterval">Equal Interval </label> <br />
</form>
The other thing I'm not sure about is how I might have an event listener to the change in buttons. All I can figure out is to add a 'Go' button which will read the classification and then execute my drawing function.
registry.byId('btnClassify').on('click', function (){
var clsForm = dom.byId("classForm");
for(var i = 0; i < clsForm.method.length; i++) {
if(clsForm.method.checked){
currentMethod = clsForm.method.value;
}
}
drawFeatureLayer();
});
Since I figured out I don't need a 'Go' button for either the number of classes or my colors, I'd really like to get rid of it all together and not have to have it just for my classification method.
I suppose I could use another type of menu, but I only have two methods. It looks klunky to have a dropdown menu that has just one other option in it. Am I missing something obvious on how to detect when one of those two buttons are selected?
