Skip to main content

OrthographicController

Inherits from Base Controller.

The OrthographicController class can be passed to either the Deck class's controller prop or a View class's controller prop to specify that viewport interaction should be enabled.

OrthographicController is the default controller for OrthographicView.

Usage​

Use with the default view:

import {Deck, OrthographicView} from '@deck.gl/core';

new Deck({
  views: new OrthographicView(),
  controller: {scrollZoom: false, inertia: true},
  initialViewState: viewState
});

is equivalent to:

import {Deck, OrthographicView} from '@deck.gl/core';

new Deck({
  views: new OrthographicView({
    controller: {scrollZoom: false,  inertia: true}
  }),
  initialViewState: viewState
})

Options​

Supports all Controller options with the following default behavior:

  • dragPan: default 'pan' (drag to pan)
  • dragRotate: not effective, this view cannot be rotated
  • multiTouchDrag: supports pan; rotate is not effective because this view cannot be rotated
  • keyboard: arrow keys to pan, +/- to zoom

Also accepts additional options:

  • zoomAxis (string) - which axes to apply zoom to. Affects scroll, keyboard +/- and double tap. One of X (zoom along the X axis only), Y (zoom along the Y axis only), all. Default all. If this option is set to X or Y, viewState.zoom must be an array to enable independent zoom for each axis.
  • maxBounds - constrains the target position within the specified bounding box [[minX, minY], [maxX, maxY]]
  • maxBoundsPadding - padding inside the viewport when fitting maxBounds, using the same {left, right, top, bottom} format as view padding. Numeric values are pixels; strings may be percentages or layout expressions such as calc(10% - 4px). Each side is measured from the projected target, including any view padding. Default 0.
  • rubberBand (boolean) - allows continuous pan and zoom interactions to temporarily overshoot maxBounds, minZoom, and maxZoom with increasing resistance. On release, the view returns within constraints using a 300 ms exponential ease-out independently of inertia. Default false.

Custom OrthographicController​

You can further customize the OrthographicController's behavior by extending the class:

import {Deck, OrthographicView, OrthographicController} from '@deck.gl/core';

class MyOrthographicController extends OrthographicController {

  handleEvent(event) {
    if (event.type === 'pan') {
      // do something
    } else {
      super.handleEvent(event);
    }
  }
}

new Deck({
  views: new OrthographicView(),
  controller: {type: MyOrthographicController},
  initialViewState: viewState
})

See the Controller class documentation for the methods that you can use and/or override.

Source​

modules/core/src/controllers/orthographic-controller.ts