Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/opsdashboard
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: LayerSwipe
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/LayerSwipe"], function(LayerSwipe) { /* code goes here */ });
Description
(Added at v3.7)
LayerSwipe provides a simple tool to show a portion of a layer or layers on top of a map.Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new LayerSwipe(params, srcNodeRef) | Creates a new LayerSwipe dijit using the given DOM node. |
CSS
esri/dijit/LayerSwipe | Download source
| Name | Description |
|---|---|
| handle | Class for the swipe handle button. |
| handleContainer | Containing class for the widget's node. |
Properties
| Name | Type | Summary |
|---|---|---|
| clip | Number | The number of pixels to clip the swipe tool. |
| enabled | Boolean | If the widget is enabled and layers can be swiped. |
| layers | Layer[] | The layers to be swiped. |
| left | Number | The number of pixels to place the tool from the left of the map. |
| 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. |
| top | Number | The number of pixels to place the tool from the top of the map. |
| type | String | Type of swipe tool to use. |
| visible | Boolean | Whether the widget is visible by default. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroy() | None | Destroys the widget. |
| disable() | None | Disables the widget. |
| enable() | None | Enables the widget. |
| startup() | None | Finalizes the creation of this dijit. |
| swipe() | None | Updates the map to the position of the swipe node. |
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 | Event is fired when the widget has been loaded. | |
| swipe | {
layers: < | Event is fired when the tool has moved. |
Constructor Details
Creates a new LayerSwipe 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 number of pixels to clip the swipe tool. Default value is 9. |
< |
Optional | If the widget is enabled and layers can be swiped. Default value is true. |
< |
Required | The layers to be swiped. Default value is []. Required. |
< |
Optional | The number of pixels to place the tool from the left of the map. By default it uses center for scope and 1/4 map width for vertical. |
< |
Required | Map object that this dijit is associated with. Required. |
< |
Optional | Class used for styling the widget. Default value is "LayerSwipe". |
< |
Optional | The number of pixels to place the tool from the top of the map. By default it uses center for scope and 1/4 map height for horizontal. |
< |
Optional | Type of swipe tool to use. Default value is "vertical". Available options are "vertical", "horizontal" and "scope". |
Sample:
require(["esri/dijit/LayerSwipe"], function(LayerSwipe){
var layerSwipe = new LayerSwipe({
type: "horizontal",
top: 250,
map: map,
layers: [ layer ]
}, "widget");
layerSwipe.startup();
});Property Details
<Boolean
BooleanIf the widget is enabled and layers can be swiped.
Known values:
true | falseDefault value:
true<Number
NumberThe number of pixels to place the tool from the left of the map.
<Map
MapMap object that this dijit is associated with.
<Number
NumberThe number of pixels to place the tool from the top of the map.
<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 ]
Event is fired when the tool has moved.
Event Object Properties:
< |
An array of objects. See the object specifications table below for the structure of the layers object. |