topic Re: Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API in ArcGIS JavaScript Maps SDK Questions

Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API

MKF62 — Mon, 05 Mar 2018 15:51:39 GMT

I will be creating a web map using the Javascript API but I'm really new to the whole thing and I'm wondering if this is possible. I have a vector layer which contains attributes on habitat status, coarse habitat classification, and fine habitat classification. I would like to allow users to switch between symbologies based on these attributes. For example, the habitat status attribute holds 0s and 1s, thus it's symbology would show two different colors. The coarse habitat classification attribute holds about twenty different codes, thus it's symbology would show twenty different colors. The fine habitat classification attributes holds even more codes, thus more colors.

To achieve this, do I need to create different symbology renderers and then activate them based on clicks to some button or something on the interface? Or do I need to publish the same layer symbolized in the ways I want as three separate services?

Re: Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API

RobertBorchert — Mon, 05 Mar 2018 15:56:35 GMT

You will need to create multiple layers of the feature class with the different symbols for each that they can turn on or off.

They would need publisher or administrator privileges to change symbols.

Re: Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API

MKF62 — Mon, 05 Mar 2018 16:03:32 GMT

Thanks for your feedback, but it looks like someone is doing it using one layer and different renderers: https://community.esri.com/thread/179528

I might try it both ways and see what happens.

Re: Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API

RobertBorchert — Mon, 05 Mar 2018 16:05:19 GMT

Leave some feedback when you get it working. I would be very interested.

Re: Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API

MKF62 — Mon, 05 Mar 2018 16:37:25 GMT

In thinking about this, I think what you would have to do to get it to work is every time the render changes (based on some check box or something the user clicks), you'd have to remove the feature layer from the map, re-instantiate it with the chosen renderer, and re-add it back to the map. Found an example here:

Javascript API: How can I change renderer on the fly with feature layer hosted on ArcGIS Online? - Geographic Informatio…

That link shows two examples, one the original poster got working by removing/re-adding the layer and a second one where the person update the legend and re-drew the featurelayer (but apparently the original poster couldn't get that one working).

Re: Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API

MunachisoOgbuchiekwe — Tue, 06 Mar 2018 00:21:34 GMT

Hello Molly,

If I am understanding your question correctly, you could just use a UniqueValueRenderer on a single Feature Layer. Here is a sample of doing this in 4.x: Visualize features by type | ArcGIS API for JavaScript 4.6

Re: Allow users to switch symbologies based on attribute of interest, ArcGIS Javascript API

MKF62 — Sun, 12 Dec 2021 01:42:18 GMT

Hi Robert, I'm reporting back. I have something that works, though I have a feeling it could be a lot cleaner than the way I did it. I'm a newbie when it comes to javascript and dojo, so the way I do things might be kind of clunky...definitely open to suggestions.

Here is the HTML:

<body>
  <div id="viewDiv"></div>
  <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>
</body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I then created three different UniqueValueRenderers and switch between them using this javascript:

        //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;
          }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I really want to come up with a way to use a switch statement, but I can't figure out how to get the value from the radio buttons using dojo. If I could get all the radio buttons in a group based on the "name" attribute (because name is the same for all of them), then I think I could get the value of whatever one is checked and use a switch statement to set the renderer. Just an idea.