Legend widget card style

This sample demonstrates how to render the Legend widget with the card style. This is a responsive style that renders the legend with a landscape (horizontal) layout in large views and in a more compact card layout in small views. It renders individual items, such as color ramps, size ramps, and unique value lists differently from the default style.

1
2
3
4
5
const legend = new Legend({
  view: view,
  style: "card" // other styles include 'classic'
});
view.ui.add(legend, "bottom-left");

You can use DefaultUI.add() method to add Legend to the UI.

Change the size of the view to observe the responsiveness of the widget. Switch the style to default in the sandbox to experiment with the differences between the two styles.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close