Legend widget

The Legend widget displays labels and symbols for layers in a map. The legend only displays layers and sublayers that are turned on.

Example

Use this widget to support app design requirements such as the following:

  • You want to configure a full-screen app with a map and add a Legend widget to help end users understand the symbols used in the map.

Usage notes

This widget requires a connection to a Map widget with a configured data source. The Map widget must be in the same page as the legend.

Currently, the Legend widget doesn’t support the following layer types: elevation, integrated mesh, OpenStreetMap, vector tile, web tile, graphics, KML, and map notes. Dictionary renderers and 3D symbols with more than one symbol layer are also not supported.

Settings

The Legend widget includes the following settings:

  • Source—Select a Map widget in the page that’s connected to a 2D or 3D map.
  • Show basemap legends—Include basemap layers in the legend.
  • Use card style—Show map layers as cards in the legend that appear side by side (with a horizontal scroll bar) or stacked (to view one card at a time). By default, the legend has a portrait orientation and a user can scroll vertically when it includes several layers. Turn on this setting for wide views to display the legend with a landscape orientation or for mobile apps to collapse the legend to occupy less space. Choose one of the following options:
    Tip:

    To experiment with these options, turn on Live view and test vertical and horizontal scrolling and stacked layout.

    • Auto—Responsive layout. The legend appears as a side-by-side layout in wide views and a stacked layout in smaller (mobile) views.
    • Side by side—Landscape orientation with horizontal scroll bar to view multiple legend cards at a time.
    • Stack—Stacked cards to view only one legend card at a time, conserving space.
  • Advanced—Override your app’s theme to change the widget’s font and background color.
    • Font—Change the font color for text in the widget.
    • Background—Change the background color of the widget.