card style legend widget?

409
4
Jump to solution
10-01-2018 02:08 PM
JaredPilbeam2
MVP Regular Contributor

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.

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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'
});

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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'
});
JaredPilbeam2
MVP Regular Contributor

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");

      });
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
JaredPilbeam2
MVP Regular Contributor
                //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.