AnsweredAssumed Answered

card style legend widget?

Question asked by jpilbeam on Oct 1, 2018
Latest reply on Oct 5, 2018 by jpilbeam

Like • Show 1 Like1
Comment • 4

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.

rscheitlin

Oct 1, 2018 2:13 PM

Correct Answer

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

See the reply in context

No one else had this question

Outcomes

rscheitlin

Oct 1, 2018 2:13 PM

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

1 person found this helpful

Actions

jpilbeam @ rscheitlin on Oct 1, 2018 2:26 PM

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

      });

Actions

rscheitlin

@ jpilbeam on Oct 1, 2018 2:28 PM

JavaScript const

1 person found this helpful

Actions

jpilbeam @ rscheitlin on Oct 5, 2018 9:27 AM

                //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.

Actions

GeoNet

The Esri Community

card style legend widget?

Outcomes

Related Content

Recommended Content