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.

Use dark colors for code blocksCopy
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.