basemapswitcher

This bundle provides a widget for switching between two basemaps by integrating the BasemapToggle Widget.

On click, the selected basemap is replaced with the one configured by this bundle. The widget is registered at the component system with the widget role basemapswitcher.

Usage

It is required to configure basemaps in the map-init configuration to be able to switch between them. The basemapswitcher bundle references via the nextBasemap property the id of a basemap configured there. If there is no basemap with an id matching the nextBasemap value, then the widget will be hidden.

Following is an example configuration:

"basemapswitcher": {
    "Config": {
        "nextBasemap": "esri_hybrid"
    }
},
"map-init": {
    "Config": {
        "basemaps": [
            {
                "id": "esri_hybrid",
                "basemap": "hybrid",
                ...
            }
            /* ... */
        ]
        /* ... */
    }
}

Define a custom basemap thumbnail

To define a custom thumbnail for the basemap, the thumbnailUrl property can be set in the basemap configuration of the map-init bundle.

"basemapswitcher": {
    "Config": {
        "nextBasemap": "esri_hybrid"
    }
},
"map-init": {
    "Config": {
        "basemaps": [
            {
                "id": "streets",
                "basemap": "streets-vector",
                "selected": true
            },
            {
                "id": "esri_hybrid",
                "basemap": "hybrid",
                "thumbnailUrl": "https://example.com/path/to/thumbnail.png"
            }
        ]
    }
}

Show/Hide the basemap title

The title of the basemap can be displayed or hidden by setting the titleVisible property in the configuration. By default, the title is not shown.

"basemapswitcher": {
    "Config": {
        // displays the title of the basemap
        "titleVisible": true
        ...
    }
}

Show/Hide the button label/tooltip

The button label/tooltip can be displayed or hidden by setting the label property in the configuration. By default, the label is empty and not shown.

"basemapswitcher": {
    "Config": {
        // displays a tooltip during hovering over the basemap switcher
        "label": "Switch Basemap",
        ...
    }
}