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",
...
}
}