topic card style legend widget? in ArcGIS JavaScript Maps SDK Questions

card style legend widget?

JaredPilbeam2 — Sat, 11 Dec 2021 14:33:21 GMT

I need help implementing this.This app I'm creating is supposed to be mobile-friendly which is why I'm seeking the card style.

Legend widget card style | ArcGIS API for JavaScript 4.9

I've been referencing this sample code, but I'm not too sure how to tweak it so that it works in my script.

Here's how that portion of my script looks now:

                var legend = new Legend({
                    view: view
                });
                view.ui.add(legend, "top-left"),
                    //functions
                    map.addMany([canal, preserves, rt66, boundary, attractions, featureLayer]);
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Here's a link to my whole script.

Re: card style legend widget?

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:33:24 GMT

Jared,

I don't see where you are specifying card style in your code.

var legend = new Legend({
  view: view,
  style: "card"  // other styles include 'classic'
});‍‍‍‍

Re: card style legend widget?

JaredPilbeam2 — Sat, 11 Dec 2021 14:33:27 GMT

Robert,

What's confusing me is how their script uses 'const' instead of 'var':

        // add a legend widget instance to the view
        // and set the style to 'card'. This is a
        // responsive style, which is good for mobile devices

        const legend = new Expand({
          content: new Legend({
            view: view,
            style: "card" // other styles include 'classic'
          }),
          view: view,
          expanded: true
        });
        view.ui.add(legend, "bottom-left");

      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: card style legend widget?

RobertScheitlin__GISP — Mon, 01 Oct 2018 21:28:35 GMT

JavaScript const

Re: card style legend widget?

JaredPilbeam2 — Sat, 11 Dec 2021 14:33:29 GMT

                //add legend
                var legend = new Expand({
                    content: new Legend({
                        view: view,
                        //style: "card"
                    }),
                    view: view,
                    expanded: false
                });

                view.ui.add(legend, "top-left");
                
            });‍‍‍‍‍‍‍‍‍‍‍‍‍

Update: Something in my code is only allowing the legend to appear card style once (line 5 here) is commented out. I was talking to an Esri tech about this and he was able to use my layers in a app with a card-style legend and it was fine.

So, I'm marking your answer here as correct since, on the surface, it answers the question.