Layers Panel

An interactive map application contains a layers panel component, which is fully configurable and allows the user to toggle your desired layers on and off as well as filter a layer’s vector data currently visible on the map.

Example layers panel
Example layers panel


The following options are supported when configuring your InteractiveMapApp instance:

Option Type Description Default
title string Button label title.
value string | number Value associated with the button, which is the either the map layer/source key or group key if it’s a segmented button.
options object Optional custom data associated with the button. This is often used to store request parameters to be used when requesting map data associated with the button.
segments array An array of button configurations to be rendered as segment options for this button. These segments are usually associated with the parent button and are used to toggle between values or apply one or more filters to the button’s value. Segments can only be defined for buttons at the root level, not for buttons defined as segments.
filter boolean A boolean value indicating whether the button segments should function as filter options to the parent button instead of toggling between values. false
multiselect boolean A boolean value indicating whether multiple segments can be selected when filter is true. false

Default Configuration

The following is the default configuration object for a InteractiveMapApp instance:

    buttons: undefined

Your implementation is responsible for declaring the series of button options to render within the panel.

Also review the default configuration for an InteractiveMapApp instance that is applied to its internal layers panel.

Segmented Buttons

Each button in the layers panel can define a series of segments for that button, which act as related values pertaining to the button or a series of filters that can be applied to the button’s value. When a segment is selected, the button will trigger a value:change with information about the button.

Segments as Values

When you set a button’s filter configuration option to false, which is the default, then each segment within the button acts as its own value and only one segment can be selected at a time.

For instance, you want to group all satellite layer options into a single button while still allowing the user to toggle between the different types of satellite imagery. You would set this button up using the following configuration:

    id: 'satellite',
    title: 'Satellite',
    segments: [{
        value: 'satellite:75',
        title: 'Infrared'
        value: 'satellite-infrared-color:75',
        title: 'Color Infrared'
        value: 'satellite-visible:75',
        title: 'Visible'
        value: 'satellite-geocolor',
        title: 'Geocolor'
        value: 'satellite-water-vapor:75',
        title: 'Water Vapor'
    options: {
        style: {
            zIndex: 0

Using the above configuration, when the user first selects the Satellite button, the first segment is selected and the satellite layer is added to the map if a previous value has not already been set. Selecting one of the other segments will remove the previous satellite-related layer and add the selected one, toggling between the different satellite types.

In the above configuration, options are also provided, which are the layer options to use when adding one of the layers to the interactive map. Setting the zIndex to 0 will ensure that any satellite layer will be inserted below all other layers, such as radar or alerts.

Segments as Filters

Instead of having button segments toggle between a series of different values, you can set your button’s filter configuration option to true to have the segments function as filters to the button’s main value. This is useful for vector map content sources, such as markers or polygons. Additionally, if you set multiselect to true on your button, then multiple segments can be selected at once, meaning multiple filters can be applied to the button’s source at a given time.

For example, you may want to allow the user to filter storm reports by category. You’d then define each category as its own segment in your main storm reports button:

    id: 'stormreports',
    value: 'stormreports',
    title: 'Storm Reports',
    filter: true,
    multiselect: true,
    segments: [{
        value: 'all',
        title: 'All'
        value: 'rain,flood',
        title: 'Rain/Flood'
        value: 'wind',
        title: 'Wind'
        value: 'snow',
        title: 'Snow'
        value: 'hail',
        title: 'Hail'

With the above configuration, the button’s main value corresponds to the layer or map content source key to use. By default, the segment whose value is all will be selected initially. Then when the user selects one or more of the other segments, the filter value are used to update the map content source’s data on the map. Since multiselect is enabled, each segment acts as a toggle to enable and disable the filter from the request.

If you have a segment with value of all in your segments, selecting that segment will deselect all other selected segments so that all filters are removed from the map content source’s data request.

Last modified: May 09, 2019