• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

visgl / deck.gl / 21190577774

20 Jan 2026 11:05PM UTC coverage: 91.115%. Remained the same
21190577774

Pull #9948

github

web-flow
Merge 345dc2abd into 83ac41278
Pull Request #9948: feat(core): Add Deck#getView() method

6882 of 7558 branches covered (91.06%)

Branch coverage included in aggregate %.

7 of 9 new or added lines in 2 files covered. (77.78%)

1 existing line in 1 file now uncovered.

56870 of 62411 relevant lines covered (91.12%)

14377.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

82.39
/modules/mapbox/src/deck-utils.ts
1
// deck.gl
1✔
2
// SPDX-License-Identifier: MIT
1✔
3
// Copyright (c) vis.gl contributors
1✔
4

1✔
5
import {Deck, MapView, _GlobeView as GlobeView, _flatten as flatten} from '@deck.gl/core';
1✔
6
import type {Viewport, MapViewState, Layer} from '@deck.gl/core';
1✔
7
import type {Parameters} from '@luma.gl/core';
1✔
8
import type MapboxLayer from './mapbox-layer';
1✔
9
import type MapboxLayerGroup from './mapbox-layer-group';
1✔
10
import type {LayerOverlayProps, Map} from './types';
1✔
11

1✔
12
import {lngLatToWorld, unitsPerMeter} from '@math.gl/web-mercator';
1✔
13

1✔
14
const MAPBOX_VIEW_ID = 'mapbox';
1✔
15

1✔
16
type UserData = {
1✔
17
  isExternal: boolean;
1✔
18
  currentViewport?: Viewport | null;
1✔
19
  mapboxLayers: Set<MapboxLayer<any>>;
1✔
20
  // mapboxVersion: {minor: number; major: number};
1✔
21
};
1✔
22

1✔
23
// Mercator constants
1✔
24
const TILE_SIZE = 512;
1✔
25
const DEGREES_TO_RADIANS = Math.PI / 180;
1✔
26

1✔
27
// Create an interleaved deck instance.
1✔
28
export function getDeckInstance({
1✔
29
  map,
49✔
30
  gl,
49✔
31
  deck
49✔
32
}: {
49✔
33
  map: Map & {__deck?: Deck<any> | null};
49✔
34
  gl: WebGL2RenderingContext;
49✔
35
  deck?: Deck<any>;
49✔
36
}): Deck<any> {
49✔
37
  // Only create one deck instance per context
49✔
38
  if (map.__deck) {
49✔
39
    return map.__deck;
28✔
40
  }
28✔
41

21✔
42
  // Only initialize certain props once per context
21✔
43
  const customRender = deck?.props._customRender;
49✔
44
  const onLoad = deck?.props.onLoad;
49✔
45

49✔
46
  const deckProps = {
49✔
47
    ...deck?.props,
49✔
48
    _customRender: () => {
49✔
49
      map.triggerRepaint();
21✔
50
      // customRender may be subscribed by DeckGL React component to update child props
21✔
51
      // make sure it is still called
21✔
52
      // Hack - do not pass a redraw reason here to prevent the React component from clearing the context
21✔
53
      // Rerender will be triggered by MapboxLayer's render()
21✔
54
      customRender?.('');
21!
55
    }
21✔
56
  };
49✔
57
  deckProps.parameters = {...getDefaultParameters(map, true), ...deckProps.parameters};
49✔
58
  deckProps.views ||= getDefaultView(map);
49✔
59

49✔
60
  let deckInstance: Deck;
49✔
61

49✔
62
  if (!deck || deck.props.gl === gl) {
49✔
63
    // If deck isn't defined (Internal MapboxLayer use case),
17✔
64
    // or if deck is defined and is using the WebGLContext created by mapbox (MapboxOverlay and External MapboxLayer use case),
17✔
65
    // block deck from setting the canvas size, and use the map's viewState to drive deck.
17✔
66
    // Otherwise, we use deck's viewState to drive the map.
17✔
67
    Object.assign(deckProps, {
17✔
68
      gl,
17✔
69
      width: null,
17✔
70
      height: null,
17✔
71
      touchAction: 'unset',
17✔
72
      viewState: getViewState(map)
17✔
73
    });
17✔
74
    if (deck?.isInitialized) {
17!
75
      watchMapMove(deck, map);
×
76
    } else {
17✔
77
      deckProps.onLoad = () => {
17✔
78
        onLoad?.();
14✔
79
        watchMapMove(deckInstance, map);
14✔
80
      };
14✔
81
    }
17✔
82
  }
17✔
83

21✔
84
  if (deck) {
49✔
85
    deckInstance = deck;
14✔
86
    deck.setProps(deckProps);
14✔
87
    (deck.userData as UserData).isExternal = true;
14✔
88
  } else {
49✔
89
    deckInstance = new Deck(deckProps);
7✔
90
    map.on('remove', () => {
7✔
91
      removeDeckInstance(map);
1✔
92
    });
7✔
93
  }
7✔
94

21✔
95
  (deckInstance.userData as UserData).mapboxLayers = new Set();
21✔
96
  // (deckInstance.userData as UserData).mapboxVersion = getMapboxVersion(map);
21✔
97
  map.__deck = deckInstance;
21✔
98
  map.on('render', () => {
21✔
99
    if (deckInstance.isInitialized) afterRender(deckInstance, map);
25✔
100
  });
21✔
101

21✔
102
  return deckInstance;
21✔
103
}
21✔
104

1✔
105
function watchMapMove(deck: Deck, map: Map & {__deck?: Deck | null}) {
14✔
106
  const _handleMapMove = () => {
14✔
107
    if (deck.isInitialized) {
1!
108
      // call view state methods
×
109
      onMapMove(deck, map);
×
110
    } else {
1✔
111
      // deregister itself when deck is finalized
1✔
112
      map.off('move', _handleMapMove);
1✔
113
    }
1✔
114
  };
1✔
115
  map.on('move', _handleMapMove);
14✔
116
}
14✔
117

1✔
118
export function removeDeckInstance(map: Map & {__deck?: Deck | null}) {
1✔
119
  map.__deck?.finalize();
11✔
120
  map.__deck = null;
11✔
121
}
11✔
122

1✔
123
export function getDefaultParameters(map: Map, interleaved: boolean): Parameters {
1✔
124
  const result: Parameters = interleaved
39✔
125
    ? {
35✔
126
        depthWriteEnabled: true,
35✔
127
        depthCompare: 'less-equal',
35✔
128
        depthBias: 0,
35✔
129
        blend: true,
35✔
130
        blendColorSrcFactor: 'src-alpha',
35✔
131
        blendColorDstFactor: 'one-minus-src-alpha',
35✔
132
        blendAlphaSrcFactor: 'one',
35✔
133
        blendAlphaDstFactor: 'one-minus-src-alpha',
35✔
134
        blendColorOperation: 'add',
35✔
135
        blendAlphaOperation: 'add'
35✔
136
      }
35✔
137
    : {};
4✔
138
  if (getProjection(map) === 'globe') {
39✔
139
    result.cullMode = 'back';
2✔
140
  }
2✔
141
  return result;
39✔
142
}
39✔
143

1✔
144
export function addLayer(deck: Deck, layer: MapboxLayer<any>): void {
1✔
145
  (deck.userData as UserData).mapboxLayers.add(layer);
20✔
146
  updateLayers(deck);
20✔
147
}
20✔
148

1✔
149
export function removeLayer(deck: Deck, layer: MapboxLayer<any>): void {
1✔
150
  (deck.userData as UserData).mapboxLayers.delete(layer);
13✔
151
  updateLayers(deck);
13✔
152
}
13✔
153

1✔
154
export function updateLayer(deck: Deck, layer: MapboxLayer<any>): void {
1✔
155
  updateLayers(deck);
13✔
156
}
13✔
157

1✔
158
export function drawLayer(
1✔
159
  deck: Deck,
11✔
160
  map: Map,
11✔
161
  layer: MapboxLayer<any>,
11✔
162
  renderParameters: any
11✔
163
): void {
11✔
164
  let {currentViewport} = deck.userData as UserData;
11✔
165
  let clearStack: boolean = false;
11✔
166
  if (!currentViewport) {
11✔
167
    // This is the first layer drawn in this render cycle.
10✔
168
    // Generate viewport from the current map state.
10✔
169
    currentViewport = getViewport(deck, map, renderParameters);
10✔
170
    (deck.userData as UserData).currentViewport = currentViewport;
10✔
171
    clearStack = true;
10✔
172
  }
10✔
173

11✔
174
  if (!deck.isInitialized) {
11✔
175
    return;
1✔
176
  }
1✔
177

10✔
178
  deck._drawLayers('mapbox-repaint', {
10✔
179
    viewports: [currentViewport],
10✔
180
    layerFilter: params =>
10✔
181
      (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
13✔
182
      (layer.id === params.layer.id || params.layer.props.operation.includes('terrain')),
10✔
183
    clearStack,
10✔
184
    clearCanvas: false
10✔
185
  });
10✔
186
}
10✔
187

1✔
188
export function drawLayerGroup(
1✔
189
  deck: Deck,
15✔
190
  map: Map,
15✔
191
  group: MapboxLayerGroup,
15✔
192
  renderParameters: any
15✔
193
): void {
15✔
194
  let {currentViewport} = deck.userData as UserData;
15✔
195
  let clearStack: boolean = false;
15✔
196
  if (!currentViewport) {
15✔
197
    // This is the first layer drawn in this render cycle.
9✔
198
    // Generate viewport from the current map state.
9✔
199
    currentViewport = getViewport(deck, map, renderParameters);
9✔
200
    (deck.userData as UserData).currentViewport = currentViewport;
9✔
201
    clearStack = true;
9✔
202
  }
9✔
203

15✔
204
  if (!deck.isInitialized) {
15!
205
    return;
×
206
  }
×
207

15✔
208
  deck._drawLayers('mapbox-repaint', {
15✔
209
    viewports: [currentViewport],
15✔
210
    layerFilter: params => {
15✔
211
      if (deck.props.layerFilter && !deck.props.layerFilter(params)) {
4!
212
        return false;
×
213
      }
×
214

4✔
215
      const layer = params.layer as Layer<LayerOverlayProps>;
4✔
216
      if (layer.props.beforeId === group.beforeId && layer.props.slot === group.slot) {
4✔
217
        return true;
4✔
218
      }
4!
219
      return false;
×
220
    },
4✔
221
    clearStack,
15✔
222
    clearCanvas: false
15✔
223
  });
15✔
224
}
15✔
225

1✔
226
export function getProjection(map: Map): 'mercator' | 'globe' {
1✔
227
  const projection = map.getProjection?.();
80✔
228
  const type =
80✔
229
    // maplibre projection spec
80✔
230
    projection?.type ||
80!
231
    // mapbox projection spec
×
232
    projection?.name;
×
233
  if (type === 'globe') {
80✔
234
    return 'globe';
5✔
235
  }
5✔
236
  if (type && type !== 'mercator') {
80!
237
    throw new Error('Unsupported projection');
×
238
  }
✔
239
  return 'mercator';
75✔
240
}
75✔
241

1✔
242
export function getDefaultView(map: Map): GlobeView | MapView {
1✔
243
  if (getProjection(map) === 'globe') {
33✔
244
    return new GlobeView({id: MAPBOX_VIEW_ID});
2✔
245
  }
2✔
246
  return new MapView({id: MAPBOX_VIEW_ID});
31✔
247
}
31✔
248

1✔
249
export function getViewState(map: Map): MapViewState & {
1✔
250
  repeat: boolean;
44✔
251
  padding: {
44✔
252
    left: number;
44✔
253
    right: number;
44✔
254
    top: number;
44✔
255
    bottom: number;
44✔
256
  };
44✔
257
} {
44✔
258
  const {lng, lat} = map.getCenter();
44✔
259

44✔
260
  const viewState: MapViewState & {
44✔
261
    repeat: boolean;
44✔
262
    padding: {
44✔
263
      left: number;
44✔
264
      right: number;
44✔
265
      top: number;
44✔
266
      bottom: number;
44✔
267
    };
44✔
268
  } = {
44✔
269
    // Longitude returned by getCenter can be outside of [-180, 180] when zooming near the anti meridian
44✔
270
    // https://github.com/visgl/deck.gl/issues/6894
44✔
271
    longitude: ((lng + 540) % 360) - 180,
44✔
272
    latitude: lat,
44✔
273
    zoom: map.getZoom(),
44✔
274
    bearing: map.getBearing(),
44✔
275
    pitch: map.getPitch(),
44✔
276
    padding: map.getPadding(),
44✔
277
    repeat: map.getRenderWorldCopies()
44✔
278
  };
44✔
279

44✔
280
  if (map.getTerrain?.()) {
44!
281
    // When the base map has terrain, we need to target the camera at the terrain surface
×
282
    centerCameraOnTerrain(map, viewState);
×
283
  }
×
284

44✔
285
  return viewState;
44✔
286
}
44✔
287

1✔
288
function centerCameraOnTerrain(map: Map, viewState: MapViewState) {
×
289
  if (map.getFreeCameraOptions) {
×
290
    // mapbox-gl v2
×
291
    const {position} = map.getFreeCameraOptions();
×
292
    if (!position || position.z === undefined) {
×
293
      return;
×
294
    }
×
295

×
296
    // @ts-ignore transform is not typed
×
297
    const height = map.transform.height;
×
298
    const {longitude, latitude, pitch} = viewState;
×
299

×
300
    // Convert mapbox mercator coordinate to deck common space
×
301
    const cameraX = position.x * TILE_SIZE;
×
302
    const cameraY = (1 - position.y) * TILE_SIZE;
×
303
    const cameraZ = position.z * TILE_SIZE;
×
304

×
305
    // Mapbox manipulates zoom in terrain mode, see discussion here: https://github.com/mapbox/mapbox-gl-js/issues/12040
×
306
    const center = lngLatToWorld([longitude, latitude]);
×
307
    const dx = cameraX - center[0];
×
308
    const dy = cameraY - center[1];
×
309
    const cameraToCenterDistanceGround = Math.sqrt(dx * dx + dy * dy);
×
310

×
311
    const pitchRadians = pitch! * DEGREES_TO_RADIANS;
×
312
    const altitudePixels = 1.5 * height;
×
313
    const scale =
×
314
      pitchRadians < 0.001
×
315
        ? // Pitch angle too small to deduce the look at point, assume elevation is 0
×
316
          (altitudePixels * Math.cos(pitchRadians)) / cameraZ
×
317
        : (altitudePixels * Math.sin(pitchRadians)) / cameraToCenterDistanceGround;
×
318
    viewState.zoom = Math.log2(scale);
×
319

×
320
    const cameraZFromSurface = (altitudePixels * Math.cos(pitchRadians)) / scale;
×
321
    const surfaceElevation = cameraZ - cameraZFromSurface;
×
322
    viewState.position = [0, 0, surfaceElevation / unitsPerMeter(latitude)];
×
323
  }
×
324
  // @ts-ignore transform is not typed
×
325
  else if (typeof map.transform.elevation === 'number') {
×
326
    // maplibre-gl
×
327
    // @ts-ignore transform is not typed
×
328
    viewState.position = [0, 0, map.transform.elevation];
×
329
  }
×
330
}
×
331

1✔
332
// Since maplibre-gl@5
1✔
333
// https://github.com/maplibre/maplibre-gl-js/blob/main/src/style/style_layer/custom_style_layer.ts
1✔
334
type MaplibreRenderParameters = {
1✔
335
  farZ: number;
1✔
336
  nearZ: number;
1✔
337
  fov: number;
1✔
338
  modelViewProjectionMatrix: number[];
1✔
339
  projectionMatrix: number[];
1✔
340
};
1✔
341

1✔
342
function getViewport(deck: Deck, map: Map, renderParameters?: unknown): Viewport {
23✔
343
  const viewState = getViewState(map);
23✔
344
  const view = (deck.isInitialized && deck.getView(MAPBOX_VIEW_ID)) || getDefaultView(map);
23✔
345

23✔
346
  if (renderParameters) {
23!
347
    // Called from MapboxLayer.render
×
348
    // Magic number, matches mapbox-gl@>=1.3.0's projection matrix
×
NEW
349
    // View is always MapView or GlobeView in this context
×
NEW
350
    (view.props as MapView['props'] | GlobeView['props']).nearZMultiplier = 0.2;
×
UNCOV
351
  }
×
352

23✔
353
  // Get the base map near/far plane
23✔
354
  // renderParameters is maplibre API but not mapbox
23✔
355
  // Transform is not an official API, properties could be undefined for older versions
23✔
356
  const nearZ = (renderParameters as MaplibreRenderParameters)?.nearZ ?? map.transform._nearZ;
23!
357
  const farZ = (renderParameters as MaplibreRenderParameters)?.farZ ?? map.transform._farZ;
23!
358
  if (Number.isFinite(nearZ)) {
23!
359
    viewState.nearZ = nearZ / map.transform.height;
×
360
    viewState.farZ = farZ / map.transform.height;
×
361
  }
×
362
  // Otherwise fallback to default calculation using nearZMultiplier/farZMultiplier
23✔
363

23✔
364
  return view.makeViewport({
23✔
365
    width: deck.width,
23✔
366
    height: deck.height,
23✔
367
    viewState
23✔
368
  }) as Viewport;
23✔
369
}
23✔
370

1✔
371
function afterRender(deck: Deck, map: Map): void {
23✔
372
  const {mapboxLayers, isExternal} = deck.userData as UserData;
23✔
373

23✔
374
  if (isExternal) {
23✔
375
    // Draw non-Mapbox layers
16✔
376
    const mapboxLayerIds = Array.from(mapboxLayers, layer => layer.id);
16✔
377
    const deckLayers = flatten(deck.props.layers, Boolean) as Layer[];
16✔
378
    const hasNonMapboxLayers = deckLayers.some(
16✔
379
      layer => layer && !mapboxLayerIds.includes(layer.id)
16✔
380
    );
16✔
381
    let viewports = deck.getViewports();
16✔
382
    const mapboxViewportIdx = viewports.findIndex(vp => vp.id === MAPBOX_VIEW_ID);
16✔
383
    const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
16✔
384

16✔
385
    if (hasNonMapboxLayers || hasNonMapboxViews) {
16✔
386
      if (mapboxViewportIdx >= 0) {
5✔
387
        viewports = viewports.slice();
4✔
388
        viewports[mapboxViewportIdx] = getViewport(deck, map);
4✔
389
      }
4✔
390

5✔
391
      deck._drawLayers('mapbox-repaint', {
5✔
392
        viewports,
5✔
393
        layerFilter: params =>
5✔
394
          (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
9✔
395
          (params.viewport.id !== MAPBOX_VIEW_ID || !mapboxLayerIds.includes(params.layer.id)),
7✔
396
        clearCanvas: false
5✔
397
      });
5✔
398
    }
5✔
399
  }
16✔
400

23✔
401
  // End of render cycle, clear generated viewport
23✔
402
  (deck.userData as UserData).currentViewport = null;
23✔
403
}
23✔
404

1✔
405
function onMapMove(deck: Deck, map: Map): void {
×
406
  deck.setProps({
×
407
    viewState: getViewState(map)
×
408
  });
×
409
  // Camera changed, will trigger a map repaint right after this
×
410
  // Clear any change flag triggered by setting viewState so that deck does not request
×
411
  // a second repaint
×
412
  deck.needsRedraw({clearRedrawFlags: true});
×
413
}
×
414

1✔
415
function updateLayers(deck: Deck): void {
46✔
416
  if ((deck.userData as UserData).isExternal) {
46✔
417
    return;
42✔
418
  }
42✔
419

4✔
420
  const layers: Layer[] = [];
4✔
421
  (deck.userData as UserData).mapboxLayers.forEach(deckLayer => {
4✔
422
    const LayerType = deckLayer.props.type;
3✔
423
    const layer = new LayerType(deckLayer.props);
3✔
424
    layers.push(layer);
3✔
425
  });
4✔
426
  deck.setProps({layers});
4✔
427
}
4✔
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc