AnsweredAssumed Answered

Switching between UniqueValueRenderers

Question asked by MollyKFoley on Mar 13, 2018
Latest reply on Mar 13, 2018 by rscheitlin

I have this piece of HTML that creates radio buttons for the user to click and switch the rendering on the layer. 

  <div id="toggleLayers">
    <legend>Toggle layers:</legend>
    <label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked> Quail Habitat Status</label>
    <label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse"> Coarse-level Habitat Types</label>
    <label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine"> Fine-level Habitat Types</label>
  </div>

 

I have made this work using various on change functions, but I can't help but feel that there should be a better way to do this. Has anyone done this using a switch statement in 4.x? The way I envision that working is by getting the value of the selected radio button and then running it through the switch statement, but I can't figure out how to get the value from the button without first getting the element by the ID (I'm a total newbie to javascript). The ID is only associated with one value so using a switch statement would be purposeless unless I was able to get all the radio buttons as a group (possibly by the "name" attribute since it's the same for all buttons?). Here's an example from 3.x where someone was using a switch statement: Javascript API: How can I change renderer on the fly with feature layer hosted on ArcGIS Online? - Geographic Informatio… 

 

This is what I currently have, it works perfectly fine, I just feel it could be done in a less clunky manner. If anyone has suggestions I am all ears.

        //Get radio buttons by ID
        var qhStatusToggle = dom.byId("qhStatusLyr");
        var coarseToggle = dom.byId("coarseHabLyr");
        var fineToggle = dom.byId("fineHabLyr");
       
        //Change the renderer if the user selects one of the various options via radio button
        on(qhStatusToggle, "change", function(){
          if (qhStatusToggle.checked){
            featureLayer.renderer = qhRenderer;
          }
        });
        on(coarseToggle, "change", function(){
          if (coarseToggle.checked){
            featureLayer.renderer = coarseRenderer;
          }
        });
        on(fineToggle, "change", function(){
          if (fineToggle.checked){
            featureLayer.renderer = fineRenderer;
          }
        });

Outcomes