@open-pioneer/basemap-switcher NPM

@open-pioneer/basemap-switcher

This package provides a UI component that allows a user to switch between different base maps.

Unavailable basemaps are marked with an icon and will be deactivated for selection. If a basemap was configured as initially selected, it remains selected and there will not be any automatic fallback to another basemap.

Usage

To add the component to your app, insert the following snippet:

<BasemapSwitcher
    map={map}
/> /* instead of passing the map, the `DefaultMapProvider` can alternatively be used */

To provide an option to deactivate all basemap layers, add the optional property allowSelectingEmptyBasemap (default: false).

<BasemapSwitcher map={map} allowSelectingEmptyBasemap />

Accessibility

The package provides only a select component. To be compliant with a11y guidelines (screen reader compatibility), a label must be added to the basemap switcher. Therefore, use one of the following approaches:

Use the aria-labelledby property of the BasemapSwitcher to specify that another HTML element (e.g. a heading shown above the control) is used as the basemap switcher's label.
Use the aria-label property of the BasemapSwitcher to set a label for the screen reader that is not shown in the UI.

Example:

<TitledSection
    title={
        <SectionHeading id={basemapsHeadingId} mb={2}>
            {intl.formatMessage({ id: "basemapLabel" })}
        </SectionHeading>
    }
>
    <BasemapSwitcher map={map} aria-labelledby={basemapsHeadingId} />
</TitledSection>