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
CSS
esri/dijit/LayerSwipe | Download source
handle | Class for the swipe handle button. |
handleContainer | Containing class for the widget's node. |
Properties
Methods
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
load | | Event is fired when the widget has been loaded. |
swipe | {
layers: <Object[] >
} | Event is fired when the tool has moved. |
Constructor Details
Creates a new LayerSwipe dijit using the given DOM node.
Parameters:
<Object > params |
Required |
Various parameters to configure this dijit. See the list below for details. |
<Node | String > srcNodeRef |
Required |
Reference or id of a HTML element that this dijit is rendered into. |
params
properties:
<Number > clip |
Optional |
The number of pixels to clip the swipe tool. Default value is 9 . |
<Boolean > enabled |
Optional |
If the widget is enabled and layers can be swiped. Default value is true . |
<Boolean > invertPlacement |
Optional |
Indicates whether layer placement should be inverted (switched). Default value is false , indicating placement is left-to-right. |
<Layer[] > layers |
Required |
The layers to be swiped. Default value is [] . Required. |
<Number > left |
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. |
<Map > map |
Required |
Map object that this dijit is associated with. Required. |
<String > theme |
Optional |
Class used for styling the widget. Default value is "LayerSwipe" . |
<Number > top |
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. |
<String > type |
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
The number of pixels to clip the swipe tool.
Default value: 9
If the widget is enabled and layers can be swiped.
Known values: true | false
Default value: true
Indicates whether layer placement should be inverted (switched). If true
, placement is right-to-left.
Default value: false
The layers to be swiped.
Default value: []
The number of pixels to place the tool from the left of the map.
Whether the widget has been loaded.
Known values: true | false
Map object that this dijit is associated with.
Class used for styling the widget.
Default value: "LayerSwipe"
The number of pixels to place the tool from the top of the map.
Type of swipe tool to use.
Default value: "vertical"
Whether the widget is visible by default.
Known values: true | false
Default value: true
Method 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.
Updates the map to the position of the swipe node.
Event Details
[ On Style Events | Connect Style Event ]
Event is fired when the widget has been loaded.
Event is fired when the tool has moved.
Event Object Properties:
<Object[] > layers |
An array of objects. See the object specifications table below for the structure of the layers object. |
Object Specifications: <layers
>
<Number > bottom |
Offset from the bottom |
<Layer > layer |
The layer that is swiped |
<Number > left |
Offset from the left |
<Number > right |
Offset from the right |
<Number > top |
Offset from the top |