Class FlickerController

Mouse controller that allows visual comparison of multiple collections of layers by quickly toggling their visibility. Doing so allows easy verification of differences in the layer contents.

Flickering is done by (quickly) clicking the mouse button. The default behavior will increment the visibleIndex on every mouse click.

FlickerController usage
FlickerController in action

Usage: 

import {FlickerController} from "@luciad/ria/view/controller/FlickerController.js";

const flickerController = new FlickerController();
map.controller = flickerController;

// the SampleFlickerUI allows the user to select layers, but you can also do it programmatically
const flickerLayers1 = [blackMarbleLayer];
const flickerLayers2 = [globalImageryLayer];
flickerController.layers = [flickerLayers1, flickerLayers2];

Note that you can only use a FlickerController on a WebGLMap.

The FlickerController provides no out-of-the-box UI. You can use the sample UI implementation from samples/common/ui/SampleFlickerUI 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 FlickerController API.

You can customize the controller to respond to keyboard events as follows: 

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";
import {FlickerController} from "@luciad/ria/view/controller/FlickerController.js";

/**
 * A FlickerController that flickers when the user presses space bar
 */
class KeyboardFlickerController extends FlickerController {

  constructor() {
    super();
  }

  onKeyEvent(keyEvent: KeyEvent): HandleEventResult {
    if (keyEvent.type === KeyEventType.DOWN && keyEvent.domEvent?.key === " " /* space bar */) {
      this.visibleIndex = (this.visibleIndex + 1) % this.layers.length;
      return HandleEventResult.EVENT_HANDLED;
    }
    return HandleEventResult.EVENT_IGNORED;
  }

}

map.controller = new KeyboardFlickerController();

Since

2021.0

Hierarchy

Constructors

constructor

Accessors

cursor layers map visibleIndex

Methods

invalidate onActivate onDeactivate onDraw onDrawLabel onGestureEvent onKeyEvent

Events

LayersChange VisibleIndexChange Invalidated Activated Deactivated

Constructors

constructor

Accessors

Protected cursor

  • get cursor(): null | string

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

    Returns null | string

    See

    Map.cursorManager

    Since

    2022.1

  • set cursor(cssCursor): void

  • Parameters

    • cssCursor: null | string

    Returns void

layers

  • get layers(): Layer[][]

  • Returns Layer[][]

  • set layers(val): void

  • Sets the layers to use. When started, only the first set of layers is visible and the others are made invisible. When calling visibleIndex, the layer collection at the given index is made visible, and the others are made invisible.

    Layers that are not mentioned in any of the layer sets, are always visible.

    If you want to flicker just one layer, put the one layer in its own layer set, and leave the other layer set empty. 

    flickerController.layers = [[layerToFlicker], []];

    Parameters

    Returns void

map

  • get map(): null | Map

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

    Returns null | Map

  • set map(_value): void

  • Parameters

    • _value: null | Map

    Returns void

visibleIndex

  • get visibleIndex(): number

  • Returns the index of the layer collection that is visible.

    Returns number

  • set visibleIndex(index): void

  • Sets the collection of layers with the given index visible, making the layers in the other collections invisible.

    Parameters

    • index: number

      the index of the visible layers

    Returns void

Methods

invalidate

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

    Returns void

onActivate

  • Callback that is invoked when this controller is activated on a map. This method allows controller implementations to perform setup work.

    Parameters

    • map: Map

      the map on which the controller has been activated

    Returns void

onDeactivate

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

    Parameters

    • map: Map

      the map on which the controller has been deactivated

    Returns any

    a concrete value to indicate immediate deactivation or a deactivation promise.

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

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

    Parameters

    Returns HandleEventResult

    the gesture event handling result.

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.

Events

"LayersChange" event

  • on("LayersChange", callback: ((layers) => void)) : Handle

  • An event that is fired when the layers change.

    Parameters

    • event: "LayersChange"
    • callback: ((layers) => void)
        • (layers): void

        • Parameters

          Returns void

    Returns Handle

    See

    FlickerController.layers

    Since

    2021.0

"VisibleIndexChange" event

  • on("VisibleIndexChange", callback: ((index) => void)) : Handle

  • An event that is fired when the index indicating the visible set of layers is changed.

    Parameters

    • event: "VisibleIndexChange"
    • callback: ((index) => void)
        • (index): void

        • Parameters

          • index: number

          Returns void

    Returns Handle

    See

    FlickerController.visibleIndex

    Since

    2021.0

"Invalidated" event

"Activated" event

  • on("Activated", callback: ((map) => void)) : Handle

  • Parameters

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

        • Parameters

          Returns void

    Returns Handle

    See

    Controller.on

"Deactivated" event

  • on("Deactivated", callback: ((map) => void)) : Handle

  • Parameters

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

        • Parameters

          Returns void

    Returns Handle

    See

    Controller.on

Settings

Member Visibility

Theme