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
• maxBounds - constrains the viewport to the specified geographic bounding box [[minLng, minLat], [maxLng, maxLat]]
• 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 map center. 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.
• 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. Requires at least one layer with pickable: '3d'.

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