Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: BasemapToggle
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/BasemapToggle"], function(BasemapToggle) { /* code goes here */ });
Description
(Added at v3.7)
BasemapToggle provides a simple button to toggle between two basemaps. Use the BasemapGallery dijit to pick from more than two basemaps.
All basemaps added to the gallery need to have the same spatial reference. If the default ArcGIS.com basemaps are used then all additional items added to the gallery need to be in Web Mercator (wkids: 102100, 102113 and 3857). If the default basemaps are not used you can add basemaps in any spatial reference as long as all the items added to the gallery share that spatial reference. To achieve the best performance, it is recommended that all basemaps added to the gallery are cached (tiled) layers.
Note: At version 3.7 (only) the basemap toggle does not work with maps created from web maps using
createMap.Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new BasemapToggle(params, srcNodeRef) | Creates a new BasemapToggle dijit using the given DOM node. |
CSS
esri/dijit/BasemapToggle | Download source
| Name | Description |
|---|---|
| basemapContainer | Containing class for the widget's node. |
| basemapImage | Class put onto the basemap image. |
| basemapTitle | Class put onto the basemap div that holds the label of the basemap. |
| toggleButton | Class for the button. |
Properties
| Name | Type | Summary |
|---|---|---|
| basemap | String | The secondary basemap to toggle to. |
| basemaps | Object | Object containing the title and thumbnailURL for the image of each basemap. |
| loaded | Boolean | Whether the widget has been loaded. |
| map | Map | Map object that this dijit is associated with. |
| theme | String | Class used for styling the widget. |
| visible | Boolean | Whether the widget is visible by default. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroy() | None | Destroys the widget. |
| hide() | None | Hides the widget. |
| show() | None | Shows the widget. |
| startup() | None | Finalizes the creation of this dijit. |
| toggle() | None | Toggles to the next basemap. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| load | Fires when the widget has been loaded. | |
| toggle | {
currentBasemap: < | Fires when the toggle method has been called. |
Constructor Details
Creates a new BasemapToggle dijit using the given DOM node.
Parameters:
< |
Required | Various parameters to configure this dijit. See the list below for details. |
< |
Required | Reference or id of a HTML element that this dijit is rendered into. |
params properties: < |
Optional | The secondary basemap to toggle to. Default value is "hybrid". |
< |
Optional | Object containing the labels and URLs for the image of each basemap. Refer to the basemap property for syntax. |
< |
Required | Map object that this dijit is associated with. Required. |
< |
Optional | Class used for styling the widget. Default value is "BasemapToggle". |
< |
Optional | Whether the widget is visible by default. Default value is true. |
Sample:
var basemapToggle = new BasemapToggle({
theme: "basemapToggle",
map: map,
visible: true,
basemap: "hybrid"
}, "<dom_id>");
basemapToggle.startup();Property Details
<String
StringThe secondary basemap to toggle to. The "terrain" and "dark-gray" options were added at v3.12. The "dark-gray-vector", "gray-vector", "streets-vector", "streets-night-vector", "streets-relief-vector", "streets-navigation-vector" and "topo-vector" options were added at v3.16.
NOTE: Basemap objects created using the esri/basemaps class may also be passed as values to this property.
Known values:
"streets" | "satellite" | "hybrid" | "topo" | "gray" | "dark-gray" | "oceans"| "national-geographic" | "terrain" | "osm" | "dark-gray-vector" | "gray-vector" | "streets-vector" | "streets-night-vector" | "streets-relief-vector" | "streets-navigation-vector" | "topo-vector"Default value:
"hybrid"<Object
ObjectObject containing the title and thumbnailURL for the image of each basemap.
Sample:
{
"streets":{
"title":"Streets",
"thumbnailUrl":"https://js.arcgis.com/3.15/esri/images/basemap/streets.jpg"
},
"satellite":{
"title":"Satellite",
"thumbnailUrl":"https://js.arcgis.com/3.15/esri/images/basemap/satellite.jpg"
},
...
}
<Map
MapMap object that this dijit is associated with.
<Boolean
BooleanWhether the widget is visible by default.
Known values:
true | falseDefault value:
trueMethod Details
Finalizes the creation of this dijit. This method should be called after the constructor for this dijit is called and before letting the users interact with it.
Event Details
[ On Style Events | Connect Style Event ]