You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

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.

Sample search results