globe-controller.md

GlobeController (Experimental)

Inherits from Base Controller.

The GlobeController 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.

GlobeController is the default controller for GlobeView.

Usage

Use with the default view:

import {Deck, _GlobeView as GlobeView} from '@deck.gl/core';

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

is equivalent to:

import {Deck, _GlobeView as GlobeView} from '@deck.gl/core';

new Deck({
  views: new GlobeView({
    controller: {keyboard: false, inertia: true}
  }),
  initialViewState: viewState
})

Options

Supports all Controller options with the following default behavior:

• dragPan: default 'pan' (drag to pan)
• dragRotate: shift+drag or right-click drag to change bearing and pitch
• touchRotate: multi-touch rotate to change bearing
• keyboard: arrow keys to pan, +/- to zoom
• inertia: when set to a number (milliseconds), the globe continues spinning after a fling gesture with exponential decay
• maxBounds - constrains the viewport to the specified bounding box [[minLng, minLat], [maxLng, maxLat]]
• zoomAround: default 'center'. Set to 'pointer' to keep the longitude/latitude under the cursor or touch anchor fixed during wheel, pinch, and double-click zoom. If the anchor is off the rendered globe, zoom falls back to center anchoring.

Custom GlobeController

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

import {Deck, _GlobeView as GlobeView, _GlobeController as GlobeController} from '@deck.gl/core';

class MyGlobeController extends GlobeController {

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

new Deck({
  views: new GlobeView(),
  controller: {type: MyGlobeController},
  initialViewState: viewState
})

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

Source

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