Options
All
  • Public
  • Public/Protected
  • All
Menu

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.

Swipe controller usage
SwipeController in action

Usage:

import {SwipeController} from "@luciad/ria/view/controller/SwipeController";

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/SampleSwipeUI as-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";
import {HandleEventResult} from "@luciad/ria/view/controller/HandleEventResult";
import {KeyEvent} from "@luciad/ria/view/input/KeyEvent";
import {KeyEventType} from "@luciad/ria/view/input/KeyEventType";

/**
 * 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();
since

2021.0

Hierarchy

Implements

Overview

Constructors

constructor

Events

on

  • (event: "LayersChange", callback: (layers: [Layer[], Layer[]]) => void): Handle
  • (event: "SwipeLineLocationChange", callback: (swipeLineLocation: Point) => void): Handle
  • (event: "SwipeLineOrientationChange", callback: (swipeLineOrientation: SwipeLineOrientation) => void): Handle
  • (event: "AutomaticOrientationChange", callback: (automaticSwipeLineOrientation: boolean) => void): Handle
  • (event: "HoveringChanged", callback: (isHovering: boolean) => void): Handle
  • (event: "SwipingChanged", callback: (isSwiping: boolean) => void): Handle
  • (event: "Invalidated", callback: () => void): Handle
  • (event: "Activated", callback: (map: Map) => void): Handle
  • (event: "Deactivated", callback: (map: Map) => void): Handle
  • An event that is fired when the layers change

    see

    SwipeController.layers

    since

    2021.0

    Parameters

    • event: "LayersChange"
    • callback: (layers: [Layer[], Layer[]]) => void

    Returns Handle

  • An event that is fired when the location of the swipe line changes

    see

    SwipeController.swipeLineLocation

    since

    2021.0

    Parameters

    • event: "SwipeLineLocationChange"
    • callback: (swipeLineLocation: Point) => void
        • (swipeLineLocation: Point): void
        • Parameters

          • swipeLineLocation: Point

          Returns void

    Returns Handle

  • An event that is fired when the orientation of the swipe line changes

    see

    SwipeController.swipeLineOrientation

    since

    2021.0

    Parameters

    Returns Handle

  • An event that is fired when the automatic swipe line orientation setting changes

    see

    SwipeController.automaticOrientation

    since

    2021.0

    Parameters

    • event: "AutomaticOrientationChange"
    • callback: (automaticSwipeLineOrientation: boolean) => void
        • (automaticSwipeLineOrientation: boolean): void
        • Parameters

          • automaticSwipeLineOrientation: boolean

          Returns void

    Returns Handle

  • 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.

    see

    SwipeController.hovering

    since

    2021.0

    Parameters

    • event: "HoveringChanged"
    • callback: (isHovering: boolean) => void
        • (isHovering: boolean): void
        • Parameters

          • isHovering: boolean

          Returns void

    Returns Handle

  • 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.

    see

    SwipeController.swiping

    since

    2021.0

    Parameters

    • event: "SwipingChanged"
    • callback: (isSwiping: boolean) => void
        • (isSwiping: boolean): void
        • Parameters

          • isSwiping: boolean

          Returns void

    Returns Handle

  • Parameters

    • event: "Invalidated"
    • callback: () => void
        • (): void
        • Returns void

    Returns Handle

  • Parameters

    • event: "Activated"
    • callback: (map: Map) => void
        • (map: Map): void
        • Parameters

          Returns void

    Returns Handle

  • Parameters

    • event: "Deactivated"
    • callback: (map: Map) => void
        • (map: Map): void
        • Parameters

          Returns void

    Returns Handle

Accessors

automaticOrientation

  • get automaticOrientation(): boolean
  • set automaticOrientation(enabled: boolean): void
  • Sets whether the controller is allowed to automatically change the swipe line orientation when dragging the mouse.

    By default automatic orientation changes are allowed.

    Returns boolean

  • Sets whether the controller is allowed to automatically change the swipe line orientation when dragging the mouse.

    By default automatic orientation changes are allowed.

    Parameters

    • enabled: boolean

    Returns any

hovering

  • get hovering(): boolean
  • 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.

    since

    2021.0

    Returns boolean

layers

  • 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], []];

    Returns [Layer[], Layer[]]

  • 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], []];

    Parameters

    Returns any

map

  • get map(): Map | null
  • set map(_value: Map | null): void
  • The map on which this controller is currently active or null if this controller is not currently active. This property is read-only.

    Returns Map | null

  • The map on which this controller is currently active or null if this controller is not currently active. This property is read-only.

    Parameters

    • _value: Map | null

    Returns any

swipeLineLocation

  • get swipeLineLocation(): Point
  • set swipeLineLocation(location: Point): void
  • 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.

    Returns Point

  • 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.

    Parameters

    Returns any

swipeLineOrientation

  • 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.

    Returns SwipeLineOrientation

  • 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.

    Parameters

    Returns any

swiping

  • get swiping(): boolean
  • 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.

    since

    2021.0

    Returns boolean

Methods

invalidate

  • (): void

onActivate

  • (map: Map): void

onDeactivate

  • (map: Map): Promise<any> | any

onDraw

  • 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.

    Parameters

    • geoCanvas: GeoCanvas

      the GeoCanvas on which the controller can draw shapes.

    Returns void

onDrawLabel

  • 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.

    Parameters

    • labelCanvas: LabelCanvas

      the LabelCanvas on which the controller can draw labels.

    Returns void

onGestureEvent

onKeyEvent

  • 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.)

    Parameters

    • keyEvent: KeyEvent

      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.

    Returns HandleEventResult

    The key event handling result.

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method