Views and coordinate systems
Quick answer
This tutorial separates View, which describes a viewport, from viewState, which describes the camera. It compares MapView, OrbitView, FirstPersonView and OrthographicView, lists longitude, latitude, zoom, pitch and bearing, and shows a controlled viewState with onViewStateChange plus multi-view layouts using viewId. It then covers LNGLAT, METER_OFFSETS and CARTESIAN systems and WebMercatorViewport project, unproject and fitBounds.
Key points
- Give each view an id and assign layers to it with viewId, or they render in every view.
- Declare coordinateSystem and coordinateOrigin for local meter or cartesian data.
- Convert screen and geographic positions with WebMercatorViewport project and unproject.
Example
var view = { longitude: 116.39, latitude: 39.9, zoom: 9, pitch: 0, bearing: 0 };
var deckgl = new deck.Deck({
canvas: 'cv',
width: '100%',
height: '100%',
viewState: view,
controller: true,
onViewStateChange: function (e) {
view = e.viewState;
deckgl.setProps({ viewState: view });
},
layers: []
});views: [
new deck.MapView({ id: 'main' }),
new deck.MapView({
id: 'overview',
x: 12, y: 12,
width: 260, height: 180,
controller: true
})
]Notes
- A view center outside the data extent looks like an empty scene rather than an error.
- After a container resize you must call setProps with new width and height.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Views and coordinate systems. https://www.jingweizhi.com/en/deckgl/tutorials/views-coordinates.html (accessed 2026-11-03).