order layers in map and independently in legend

nadja

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

 

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.