Creates a new SwipeController
2021.0
Sets whether the controller is allowed to automatically change the swipe line orientation when dragging the mouse.
By default automatic orientation changes are allowed.
Protected cursorThe 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.
2021.0
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 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.
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.
2021.0
Call this method to indicate that the controller's appearance has changed. Calling this method ensures the onDraw will be called during the next rendering pass.
Callback that is invoked when this controller is activated on a map. This method allows controller implementations to perform setup work.
the map on which the controller has been activated
Callback that is invoked when this controller is deactivated on a map. This method allows controller implementations to perform cleanup work. This method must return either any resolved value or a promise to indicate completion of deactivation. This allows controller implementation to perform asynchronous deactivation work. During the period between this method being called and the resolution of the deactivation promise, this controller will no longer receive input events, but will still get the opportunity to draw itself.
the map on which the controller has been deactivated
a concrete value to indicate immediate deactivation or a deactivation promise.
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 gesture 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 gesture 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 gesture event to be handled. Note that this is a GestureEvent and not a DOMEvent. You can access the corresponding DOMEvent through GestureEvent.domEvent.
the gesture event handling result.
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.
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.
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:
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/core/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:
Since
2021.0