Skip to content

Latest commit

 

History

History
83 lines (51 loc) · 3.51 KB

map-view.md

File metadata and controls

83 lines (51 loc) · 3.51 KB
Raw

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.

<iframe height="450" width="100%" scrolling="no" title="deck.gl MapView" src="https://codepen.io/vis-gl/embed/MWbwyWy?height=450&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen deck.gl MapView by vis.gl (@vis-gl) on CodePen. </iframe>

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) {#repeat}

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

nearZMultiplier (number, optional) {#nearzmultiplier}

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) {#farzmultiplier}

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 (number[16], optional) {#projectionmatrix}

Projection matrix.

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

fovy (number, optional) {#fovy}

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

altitude (number, optional) {#altitude}

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

orthographic (boolean) {#orthographic}

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 (number[3], 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