dcoley

JSAPI 4.x LayerList and Legend Together

Discussion created by dcoley on Jan 23, 2017
Latest reply on Feb 6, 2017 by dcoley

Hi - so we found a way to enable the legend to work with the layer list at 4.2 using the 'trigger-action' info from the layer list sample code.  First, we set up a defineActions function to store the returns in an array of the layerLists' items:

function defineActions(event) {
    //console.log(event);
    // The event object contains properties of the layer in the LayerList widget.
    var item = event.item;
    //console.log(item);
       if (item.title === "Environmental Project"){
          return [
             [{
                title: "Show Legend",
                className: "esri-icon-layer-list",
                id: "show-environmental"
             }]
           ];
          } else if (item.title === "Facilities Project"){
             return [
             [{
                title: "Show Legend",
                className: "esri-icon-layer-list",
                id: "show-facilities"
             }]
            ];

          } else if (item.title === "Mobility Project"){
               return [
                [{
                      title: "Show Legend",
                      className: "esri-icon-layer-list",
                      id: "show-transportation"
                }]
           ];
    }
}

Then set up a function that, upon view load, (1) sets up the layerList with it's createActionsFunction and a layerInfo nested array that contains the layerInfos as would be defined in the legend and an initial layerInfoIndex, (2) sets up the legend with the layerInfo var, (3) sets up a index function that will set (via a modulus) the layer info index each time it's called as part of (4), the layerList.on trigger-action event:

 

app.mapView.then(function(result) {
       layerList = new LayerList({ //LayerList
          container: "collapseList",
          view: app.mapView,
          createActionsFunction: defineActions
    });
       var layerInfo = [
          {layerInfos: [{
             layer: lyrEnvBnds,
             title: "Environmental Project"
         }]},
          {layerInfos: [{
             layer: lyrFacBnds,
             title: "Facilities Project"
          }]}
      ],
layerInfoIndex = 0; //initial

legend = new Legend({
       container: "collapseLegend",
       view: app.activeView,
       layerInfos: [{
          layer: layerInfo[layerInfoIndex].layerInfos.layer,
          title: layerInfo[layerInfoIndex].layerInfos.title
       }]
    });
function changeLegend(layerInfoIndex) {
    console.log(layerInfoIndex);
    legend.set(layerInfo[layerInfoIndex % layerInfo.length]); // % Modulus
    console.log(layerInfo);
}
layerList.on("trigger-action", function(event) {
    console.log(event);
    var id = event.action.id;
       if (id === "show-environmental"){
         changeLegend(0);
         query("#collapseLegend").toggleClass("collapse in");
       } else if (id === "show-facilities"){
         changeLegend(1);
         query("#collapseLegend").toggleClass("collapse in");
       }
    });
});

 

There's alot going on here and I likely haven't decribed things fully or even fully accurate.  We are working in Calcite maps and as such taking advantage of the css classes for 'collapse in' for the dojo query's toggleClass method.  But it seems to work well in that each trigger-action fires the changeLegend funtion, getting the correct legend layer to display below the layerList widget:

 

 

Great job Michael Stranovsky for setting the initial index; for handling the super-tricky layerInfo and layerInfos arrays; and for the modulus method for the changeLegend function.

 

Hopefully this is just a workaround until the legend is properly incorporated into the layerList widget and please feel free to add your comments

 

Cheers-

David

Outcomes