Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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.

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