map-controller.md

MapController

Inherits from Base Controller.

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

MapController is the default controller for MapView..

Usage

Use with the default view:

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

new Deck({
  controller: {doubleClickZoom: false, inertia: true},
  initialViewState: viewState
});

is equivalent to:

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

new Deck({
  views: new MapView({
    controller: {doubleClickZoom: false,  inertia: true}
  }),
  initialViewState: viewState
})

Options

Supports all Controller options with the following default behavior:

• dragMode - default 'pan' (drag to pan, shift/ctrl + drag to rotate)
• keyboard - arrow keys to pan, arrow keys with shift/ctrl down to rotate, +/- to zoom
• normalize - normalize viewport props to fit map height into viewport. Default true
• rotationPivot (string, optional) - Determines the pivot point used when rotating the map. Default 'center'. Supported values:
  • 'center' - Rotate around the center of the viewport.
  • '2d' - Rotate around the pointer position projected onto the ground plane (z=0).
  • '3d' - Rotate around the picked object under the pointer. Falls back to 'center' behavior if no pickable object is found.

Custom MapController

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

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

class MyMapController extends MapController {

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

new Deck({
  controller: {type: MyMapController},
  initialViewState: viewState
})

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

Source

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