Creates a new SwipeController
An event that is fired when the layers change
An event that is fired when the location of the swipe line changes
An event that is fired when the orientation of the swipe line changes
An event that is fired when the automatic swipe line orientation setting changes
An event that is fired when the mouse is (no longer) hovering over the swipe line.
You can use this to change the styling of the swipe line, or update the cursor.
An event that is fired when the user is (no longer) swiping (dragging the swipe line).
You can use this to change the styling of the swipe line, or update the cursor.
Sets whether the controller is allowed to automatically change the swipe line orientation when dragging the mouse.
By default automatic orientation changes are allowed.
Sets whether the controller is allowed to automatically change the swipe line orientation when dragging the mouse.
By default automatic orientation changes are allowed.
The CSS cursor to use on the map, for this controller.
If null, the map will fall back to the previous cursor that was set on the map.
Note that changing this cursor will update the cursor on the map's DOM node. When using multiple controllers (e.g. in a CompositeController), the controller that updates the cursor last (to a non-null value), will override any other non-null cursors of active controllers on the map.
The CSS cursor to use on the map, for this controller.
If null, the map will fall back to the previous cursor that was set on the map.
Note that changing this cursor will update the cursor on the map's DOM node. When using multiple controllers (e.g. in a CompositeController), the controller that updates the cursor last (to a non-null value), will override any other non-null cursors of active controllers on the map.
Indicates if the mouse is hovering the swipe line. You can use this to change the styling of the swipe line UI, or update the cursor.
Sets the two sets of layers to swipe.
Note that layers in the view that are not specified here are not affected. This for example means that if you swipe between layers A and C, but layer B appears in-between layer A and C, that the swipe controller will turn the left part of A visible and the right part of C visible, but that B will obstruct C and the swiping will appear to happen between A and B as opposed to A and C. To overcome this, you can swipe between consecutive layers. In the example this would mean that you swipe between the collections {A,B} and {C}.Layers that are not mentioned in any of the two layer sets, are always visible.
If you want to swipe just one layer, put the one layer in its own layer set, and leave the other layer set empty.
swipeController.layers = [[layerToSwipe], []];Sets the two sets of layers to swipe.
Note that layers in the view that are not specified here are not affected. This for example means that if you swipe between layers A and C, but layer B appears in-between layer A and C, that the swipe controller will turn the left part of A visible and the right part of C visible, but that B will obstruct C and the swiping will appear to happen between A and B as opposed to A and C. To overcome this, you can swipe between consecutive layers. In the example this would mean that you swipe between the collections {A,B} and {C}.Layers that are not mentioned in any of the two layer sets, are always visible.
If you want to swipe just one layer, put the one layer in its own layer set, and leave the other layer set empty.
swipeController.layers = [[layerToSwipe], []];The map on which this controller is currently active or null if this controller is not currently active.
This property is read-only.
The map on which this controller is currently active or null if this controller is not currently active.
This property is read-only.
Sets the swipe line location in view coordinates. If the swipe line has a horizontal orientation, only the y coordinate is relevant. If the swipe line has a vertical orientation, the x coordinate is considered.
For view coordinates, the reference of the point is null.
Sets the swipe line location in view coordinates. If the swipe line has a horizontal orientation, only the y coordinate is relevant. If the swipe line has a vertical orientation, the x coordinate is considered.
For view coordinates, the reference of the point is null.
Sets the orientation of the swipe line. A horizontal swipe line means that the line moves from the left to the right side of the view and that layers appear in the top- or bottom-half of the view. A vertical swipe line means that the line moves from top to bottom of the view and the layers are clipped to appear on the left or right side of the view.
Sets the orientation of the swipe line. A horizontal swipe line means that the line moves from the left to the right side of the view and that layers appear in the top- or bottom-half of the view. A vertical swipe line means that the line moves from top to bottom of the view and the layers are clipped to appear on the left or right side of the view.
Indicates if the user is swiping (dragging the swipe line). You can use this to change the styling of the swipe line UI, or update the cursor.
Callback that allows controller implementations to perform custom drawing on the map. Controller shapes and icons are drawn on top of all other content in the map. Note that the map may perform caching which may cause this method to only be invoked once. When a controller implementation's appearance changes the implementation should call invalidate on itself.
the GeoCanvas on which the controller can draw shapes.
Callback that allows controller implementations to draw labels on the map. Note that the map may perform caching which may cause this method to only be invoked once. When a controller implementation's appearance changes the implementation should call invalidate on itself.
the LabelCanvas on which the controller can draw labels.
Called when a key event has been received. This method must return a HandleEventResult value to indicate if the event was handled or not, If this method returns EVENT_IGNORED, the map will be given the opportunity to perform default key event behaviour. If default event handling is not desired, this method should return EVENT_HANDLED. (See the Controller class description for the default behavior.)
The key event to be handled. Note that this is a KeyEvent and not a DOMEvent. You can access the corresponding DOMEvent through KeyEvent.domEvent.
The key event handling result.
Controller that allows to visually comparing two sets of layers by displaying them on either side of a swipe line. By moving the swipe line, different parts of the layer sets are revealed and hidden. This allows easily spotting differences between the layer sets.
Swiping is done by dragging the swipe line using the mouse from left-to-right or top-to-bottom, depending on the swipe line orientation. The SwipeController can automatically switch between horizontal and vertical orientations.
Usage:
import {SwipeController} from "@luciad/ria/view/controller/SwipeController.js"; const swipeController = new SwipeController(); map.controller = swipeController; // the SampleSwipeUI allows the user to select layers, but you can also do it programmatically const leftLayers = [blackMarbleLayer]; const rightLayers = [globalImageryLayer]; swipeController.layers = [leftLayers, rightLayers];Note that you can only use the SwipeController on a WebGLMap. It also requires support for certain WebGL extensions. You can open the "LuciadRIA WebGLMap support" sample on a device you're targeting to check if these requirements are met.
The SwipeController provides no out-of-the-box UI. You can use the sample UI implementation from
samples/common/controllers/ui/SampleSwipeUIas-is. It can be re-styled using CSS variables. You can also use it as a reference to create your own UI on top of the SwipeController API.You can customize the controller to respond to keyboard events as follows:
import {SwipeController} from "@luciad/ria/view/controller/SwipeController.js"; import {HandleEventResult} from "@luciad/ria/view/controller/HandleEventResult.js"; import {KeyEvent} from "@luciad/ria/view/input/KeyEvent.js"; import {KeyEventType} from "@luciad/ria/view/input/KeyEventType.js"; /** * A SwipeController that moves the swipe line left/right with the arrow keys. */ class ArrowKeySwipeController extends SwipeController { constructor() { super(); } onKeyEvent(keyEvent: KeyEvent): HandleEventResult { if (keyEvent.type === KeyEventType.DOWN && keyEvent.domEvent?.key === "ArrowLeft") { const newLocation = this.swipeLineLocation.copy(); newLocation.translate2D(-50, 0); this.swipeLineLocation = newLocation; return HandleEventResult.EVENT_HANDLED; } else if (keyEvent.type === KeyEventType.DOWN && keyEvent.domEvent?.key === "ArrowRight") { const newLocation = this.swipeLineLocation.copy(); newLocation.translate2D(50, 0); this.swipeLineLocation = newLocation; return HandleEventResult.EVENT_HANDLED; } return HandleEventResult.EVENT_IGNORED; } } map.controller = new ArrowKeySwipeController();2021.0