Skip to main content


The OrthographicView class is a subclass of View that creates a top-down view of the XY plane. It is usually used for rendering 2D charts in non-geospatial use cases.

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


import {OrthographicView} from '';
const view = new OrthographicView({id, ...});

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

flipY (boolean)

Whether to use top-left coordinates (true) or bottom-left coordinates (false). Default true.

near (number, optional)

Distance of near clipping plane. Default 0.1.

far (number, optional)

Distance of far clipping plane. Default 1000.

View State

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

  • target (number[3], optional) - The world position at the center of the viewport. Default [0, 0, 0].
  • zoom (number | number[2], optional) - The zoom level of the viewport. zoom: 0 maps one unit distance to one pixel on screen, and increasing zoom by 1 scales the same object to twice as large. For example zoom: 1 is 2x the original size, zoom: 2 is 4x, zoom: 3 is 8x etc.. To apply independent zoom levels to the X and Y axes, supply an array [zoomX, zoomY]. Default 0.
  • minZoom (number, optional) - The min zoom level of the viewport. Default -Infinity.
  • maxZoom (number, optional) - The max zoom level of the viewport. Default Infinity.


By default, OrthographicView uses the OrthographicController to handle interactivity. To enable the controller, use:

const view = new OrthographicView({id: '2d-scene', controller: true});

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