Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: LayerSwipe

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

NameSummary
new LayerSwipe(params, srcNodeRef)Creates a new LayerSwipe dijit using the given DOM node.

CSS

esri/dijit/LayerSwipe | Download source

NameDescription
handleClass for the swipe handle button.
handleContainerContaining class for the widget's node.

Properties

NameTypeSummary
clipNumberThe number of pixels to clip the swipe tool.
enabledBooleanIf the widget is enabled and layers can be swiped.
invertPlacementBooleanIndicates whether layer placement should be inverted (switched).
layersLayer[]The layers to be swiped.
leftNumberThe number of pixels to place the tool from the left of the map.
loadedBooleanWhether the widget has been loaded.
mapMapMap object that this dijit is associated with.
themeStringClass used for styling the widget.
topNumberThe number of pixels to place the tool from the top of the map.
typeStringType of swipe tool to use.
visibleBooleanWhether the widget is visible by default.

Methods

NameReturn typeSummary
destroy()NoneDestroys the widget.
disable()NoneDisables the widget.
enable()NoneEnables the widget.
startup()NoneFinalizes the creation of this dijit.
swipe()NoneUpdates 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

NameEvent ObjectSummary
loadEvent is fired when the widget has been loaded.
swipe
{
  layers: <Object[]>
}
Event is fired when the tool has moved.
Constructor Details

new LayerSwipe(params, srcNodeRef)

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

<Number> clip

The number of pixels to clip the swipe tool.
Default value: 9

<Boolean> enabled

If the widget is enabled and layers can be swiped.
Known values: true | false
Default value: true

<Boolean> invertPlacement

Indicates whether layer placement should be inverted (switched). If true, placement is right-to-left.
Default value: false

<Layer[]> layers

The layers to be swiped.
Default value: []

<Number> left

The number of pixels to place the tool from the left of the map.

<Boolean> loaded

Whether the widget has been loaded.
Known values: true | false

<Map> map

Map object that this dijit is associated with.

<String> theme

Class used for styling the widget.
Default value: "LayerSwipe"

<Number> top

The number of pixels to place the tool from the top of the map.

<String> type

Type of swipe tool to use.
Default value: "vertical"

<Boolean> visible

Whether the widget is visible by default.
Known values: true | false
Default value: true
Method Details

destroy()

Destroys the widget.

disable()

Disables the widget.

enable()

Enables the widget.

startup()

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.

swipe()

Updates the map to the position of the swipe node.
Event Details
[ On Style Events | Connect Style Event ]

load

Event is fired when the widget has been loaded.

swipe

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
Show Modal