Skip to main content

MapView

The MapView class is a subclass of View. This viewport creates a camera that looks at a geospatial location on a map from a certain direction. The behavior of MapView is generally modeled after that of Mapbox GL JS.

It's recommended that you read the Views and Projections guide before using this class.

Constructor

import {MapView} from '@deck.gl/core';
const view = new MapView({id, ...});

MapView takes the same parameters as the View superclass constructor, plus the following:

repeat (Boolean, optional)

Whether to render multiple copies of the map at low zoom levels. Default false.

nearZMultiplier (Number, optional)

Scaler for the near plane, 1 unit equals to the height of the viewport. Default to 0.1. Overwrites the near parameter.

farZMultiplier (Number, optional)

Scaler for the far plane, 1 unit equals to the distance from the camera to the top edge of the screen. Default to 1.01. Overwrites the far parameter.

projectionMatrix (Array[16], optional)

Projection matrix.

If projectionMatrix is not supplied, the View class will build a projection matrix from the following parameters:

fovy (Number, optional)

Field of view covered by the camera, in the perspective case. In degrees. If not supplied, will be calculated from altitude.

altitude (Number, optional)

Distance of the camera relative to viewport height. Default 1.5.

orthographic (Boolean)

Whether to create an orthographic or perspective projection matrix. Default is false (perspective projection).

View State

To render, MapView needs to be used together with a viewState with the following parameters:

  • longitude (Number) - longitude at the map center
  • latitude (Number) - latitude at the map center
  • zoom (Number) - zoom level
  • pitch (Number, optional) - pitch angle in degrees. Default 0 (top-down).
  • bearing (Number, optional) - bearing angle in degrees. Default 0 (north).
  • maxZoom (Number, optional) - max zoom level. Default 20.
  • minZoom (Number, optional) - min zoom level. Default 0.
  • maxPitch (Number, optional) - max pitch angle. Default 60.
  • minPitch (Number, optional) - min pitch angle. Default 0.
  • position (Array, optional) - Viewport center offsets from lng, lat in meters. Default: [0,0,0].

Controller

By default, MapView uses the MapController to handle interactivity. To enable the controller, use:

const view = new MapView({id: 'base-map', controller: true});

Visit the MapController documentation for a full list of supported options.

Source

modules/core/src/views/map-view.ts