display legend in 4.3

[jerrysalinas]

Hi,

I have arcgis javascript 4.3 application with multiple map services which are all the same, so in my legend they appear 8 times with a vertical scroll bar, if all the map services are on and are identical. I was wondering there was a way to only display one map service regardless if the layer is off or on. I have 8 zones that are all symbolized the same,  but I only need one legend inside the widget.

I was also trying to just display a .png or .jpeg image of the legend widget, but no luck. Not sure if I will need to recreate a new widget or if there is another way to accomplish this task.

Thanks in advance,

Jerry

[RobertScheitlin__GISP]

Jerry,

  Sure just use the legendEnabled property:

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#legendEn... 

[jerrysalinas]

Thanks Robert for the reply, I was using that property in my code for all 8 services and I set only one service to true, but when I toggled off that particular layer off, there was no legend to see even though one or all of the remaining services were turned on due to the legendEnabled property set to false for the other seven services I have a separate layer widget where I can toggle off/on the different services.

I've been looking around on how to efficiently insert an image when a user clicks an expand widget, if I can't get this work. Maybe listen for a click event or something like that

[RobertScheitlin__GISP]

Jerry,

   You could watch the visible property and set the legendEnabled based on the visible property.

[SteveCole]

You could specify a layerInfos object when you construct the Legend widget rather than relying on the individual properties with each layer...

[jerrysalinas]

Robert,

I am not sure how I would check the visible property for each service. I ended up creating a duplicate feature layer of the services I am using  (Zone1) and hide from my layerlist and set it to show in legend, so a user would not be able to toggle it off or on. But they funny the thing is that layer can never be turned off now, since it is hidden. Is there a way to always show a feature layer in the legend even  though the the visible property is false

Steve, I tried your suggestion below, but couldn't get it to work. Even though all my layers are turned off, I still have the hidden layer visible on map

  //Add the legend
            var legend = new Legend({
                view: view,

                container: document.createElement("div")

                //this shows one legend instead of all 8 zones
               ,layerInfos: [{
                   layer: HiddenZoneLayer,   // name of layer to display always
                      title: "My Legend"
                  }]
                //end showing one
            });

            var lgExpand = new Expand({
                view: view,
                content: legend.domNode,
                 expandIconClass: "esri-icon-layer-list",
                expanded: true,
                expandTooltip: "Expand Legend", // optional, defaults to "Expand" for English locale
            });

            // Add the widget to the bottom left corner of the view
            view.ui.add(lgExpand, "bottom-right");
            //   view.ui.add(legend, "bottom-right");

[RobertScheitlin__GISP]

Jerry,

   Are you using a web map or adding the layers manually to the map. If manually then you add a watch to the layers visible property after the layer is created. If using a web map the you loop through the web maps layers collection to add a watch to each layers visible property.

[jerrysalinas]

Robert,

I am adding the layers manually. I thought about creating an IF statement to keep track of what is visible. Seems like I can get the legend widget  populated only  if a layer is visible on map. I am just trying to display a legend 100% of the time, regardless if the layer is visible or not.  Looks like the legendEnabled is dependent on the visibility of the layer. I know it is an odd request, but the user can always collapse the widget. I am still messing with it.

            if (Flzone1.visible = true)    {
                (FlFake.visible = true);
                (FlFake.legendEnabled = true);
            }
            else if (Flzone1.visible = false)
                (FlFake.visible = false);
                (FlFake.legendEnabled = true);
                {
            }

[RobertScheitlin__GISP · Accepted solution]

Jerry,

   Try this:

Flzone1.watch("visible",  function(){
  enableOneLegendLayer();
});
Flzone2.watch("visible",  function(){
  enableOneLegendLayer();
});
Flzone3.watch("visible",  function(){
  enableOneLegendLayer();
});
Flzone4.watch("visible",  function(){
  enableOneLegendLayer();
});
Flzone5.watch("visible",  function(){
  enableOneLegendLayer();
});
Flzone6.watch("visible",  function(){
  enableOneLegendLayer();
});
Flzone7.watch("visible",  function(){
  enableOneLegendLayer();
});
Flzone8.watch("visible",  function(){
  enableOneLegendLayer();
});

function enableOneLegendLayer(){
   var lyrArray = [Flzone1, Flzone2, Flzone3, Flzone4, Flzone5, Flzone6, Flzone7. Flzone8];
    lyrArray.some( function(layer) {
      if(layer.visible) {
         makeLegendVisible(layer);
         return layer.visible;
      }
    });
   function makeLegendVisible(layer) {
     Flzone1.legendEnabled = false;
     Flzone2.legendEnabled = false;
     Flzone3.legendEnabled = false;
     Flzone4.legendEnabled = false;
     Flzone5.legendEnabled = false;
     Flzone6.legendEnabled = false;
     Flzone7.legendEnabled = false;
     Flzone8.legendEnabled = false;
     layer.legendEnabled  = true;
   }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jerrysalinas]

Thanks Robert. That code snippet worked great! I am still doing more testing, but it looks like it is doing the job.  I appreciate your help and guidance. 

I did not know you could add a "watch" to the visible property. I learned something new.