order layers in map and independently in legend

[nadja_swiss_parks]

Hi everyone

We're building a webmap with the API 4.x.

We've got a couple of layers which we need to order in the legend in a given way. The order of the layers in the layerlist needs to be thematically ordered. (We don't need to order sublayers nor features.)

However, the drawing order of these layers needs to fit cartographic and other needs. We would like to stick to "polygon under lines under points". Furthermore, there are some layers with higher importance than others. We would like to be able to place those above (or below) other layers. 

How can we control the drawing order of the layers independently from the order of the layers in the layerlist?  

I created a codepen: https://codepen.io/nwp_nadja_bernhard/pen/OJvOQdp?editors=0011

[UndralBatsukh]

Hi there, 

I created a very simple test app to show how to change the symbols of old features that TimeSlider widget already played. In the app, I am watching the TimeSlider.timeExtent property and set the timeExtent directly on the layer object, then createRenderer function is called. In this function, we set a unique-value renderer with valueExpression and use the expression in the visual variables.

We have a guide doc in our SDK to talks about how to visualize data based on time.  You may find that info useful as I used this guide topic as a starting point to symbolize data differently based on time.

Hope this helps,

-Undral

[UndralBatsukh]

Oops, sorry for the post above. I accidentally replied to a wrong thread. In any case, what you are asking cannot be done. Order of layers in the legend are defined by the order of layers in the LayerList.

[nadja_swiss_parks]

Hi @UndralBatsukh 

Thank you for your reply. What about the order of layer in the map? Can those be independent from the order in the LayerList?

[UndralBatsukh]

Hi there, 

No it cannot be done. Both the legend and layerlist follow the layer order of the map.

[JoelBennett]

@swiss_parks_network_nbernhard 

It seemed more fitting to reply here rather than in the idea thread.  Basically, what I was saying there, was that you could create a Legend widget for each layer you want to display the symbology for.  You then add each widget instance to the page.  This is done by appending each widget's container node to an existing element on the page.

I've made a crude example of this out of the Legend sample.  On that page, replace the contents of the second script tag with this code, and then click the Refresh label at the top right.

      function addLegendForLayer(Legend, view, container, layer) {
        var childElement = document.createElement("DIV");
        container.appendChild(childElement);

        const legend = new Legend({
          view: view,
          layerInfos: [
            {
              layer: layer,
              title: "NY Educational Attainment"
            }
          ],
          container: childElement
        });
      }
      
      require(["esri/views/MapView", "esri/widgets/Legend", "esri/WebMap"], (
        MapView,
        Legend,
        WebMap
      ) => {
        const webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "05e015c5f0314db9a487a9b46cb37eca"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(() => {
          var container = document.createElement("DIV");
          container.style.backgroundColor = "#FFFFFF";

          // Add widget to the bottom right corner of the view
          view.ui.add(container, "bottom-right");
          
          addLegendForLayer(Legend, view, container, webmap.layers.getItemAt(0));
          addLegendForLayer(Legend, view, container, webmap.layers.getItemAt(0));
        });
      });

This sample only had one layer, so for my example, I made two identical Legend widgets from the same layer.  But, the main thing is that you can see that both Legend elements are present on the page.  To the end user, this appears to be a single legend, but there's really multiple widgets there, one widget for each layer.  With this kind of workflow, it would be fairly easy to add logic for adding/inserting Legend widgets in a particular order to your liking.