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

visgl / deck.gl / 21386241793

27 Jan 2026 05:52AM UTC coverage: 91.101% (-0.01%) from 91.114%
21386241793

push

github

web-flow
chore(mapbox): Remove internal deck mode from `MapboxLayer` (#9955)

* chore(mapbox): Remove internal deck mode from MapboxLayer

MapboxLayer is no longer a public API (only MapboxOverlay is exported),
so the internal deck mode code paths are no longer needed.

Changes:
- Remove `isExternal` flag from UserData (always true now)
- Remove internal deck creation branch in getDeckInstance
- Remove `updateLayers` function (only used for internal mode)
- Make `deck` prop required in getDeckInstance
- Simplify MapboxLayer and MapboxLayerGroup to read map.__deck directly
- Only MapboxOverlay calls getDeckInstance for initialization
- Update tests to simulate MapboxOverlay flow

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(mapbox): Use getter for deck in MapboxLayer and MapboxLayerGroup

Replace `this.deck` field with a getter that reads from `map.__deck`
directly. This avoids potential stale references and simplifies the
lifecycle - `onAdd` no longer needs to capture the deck instance.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(mapbox): Keep non-null assertions in render method

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(mapbox): Make __deck non-optional in MapWithDeck type

Since MapboxLayer and MapboxLayerGroup are internal classes only used
by MapboxOverlay, and MapboxOverlay always sets up map.__deck before
adding these layers, __deck is guaranteed to exist when the map is set.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(mapbox): Remove deck getter, access map.__deck directly

Since __deck is guaranteed on MapWithDeck, we can access it directly
through the map rather than through a getter.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* test(mapbox): Remove trivial deck instance assertions

These assertions just verified getDeckInstance set map.__deck, which
is obvious and doesn't test any MapboxLayer behavior.

Co-Authored-By: Claude Opus 4.5 <norepl... (continued)

6859 of 7536 branches covered (91.02%)

Branch coverage included in aggregate %.

59 of 59 new or added lines in 4 files covered. (100.0%)

2 existing lines in 1 file now uncovered.

56796 of 62337 relevant lines covered (91.11%)

14394.03 hits per line

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

79.17
/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
  currentViewport?: Viewport | null;
1✔
18
};
1✔
19

1✔
20
// Mercator constants
1✔
21
const TILE_SIZE = 512;
1✔
22
const DEGREES_TO_RADIANS = Math.PI / 180;
1✔
23

1✔
24
// Create an interleaved deck instance.
1✔
25
export function getDeckInstance({
1✔
26
  map,
14✔
27
  deck
14✔
28
}: {
14✔
29
  map: Map & {__deck?: Deck<any> | null};
14✔
30
  deck: Deck<any>;
14✔
31
}): Deck<any> {
14✔
32
  // Only create one deck instance per context
14✔
33
  if (map.__deck) {
14!
UNCOV
34
    return map.__deck;
×
UNCOV
35
  }
×
36

14✔
37
  // Only initialize certain props once per context
14✔
38
  const customRender = deck.props._customRender;
14✔
39
  const onLoad = deck.props.onLoad;
14✔
40

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

14✔
54
  // deck is using the WebGLContext created by mapbox,
14✔
55
  // block deck from setting the canvas size, and use the map's viewState to drive deck.
14✔
56
  Object.assign(deckProps, {
14✔
57
    width: null,
14✔
58
    height: null,
14✔
59
    touchAction: 'unset',
14✔
60
    viewState: getViewState(map)
14✔
61
  });
14✔
62
  if (deck.isInitialized) {
14✔
63
    watchMapMove(deck, map);
2✔
64
  } else {
14✔
65
    deckProps.onLoad = () => {
12✔
66
      onLoad?.();
10✔
67
      watchMapMove(deck, map);
10✔
68
    };
10✔
69
  }
12✔
70

14✔
71
  deck.setProps(deckProps);
14✔
72

14✔
73
  map.__deck = deck;
14✔
74
  map.on('render', () => {
14✔
75
    if (deck.isInitialized) afterRender(deck, map);
17✔
76
  });
14✔
77

14✔
78
  return deck;
14✔
79
}
14✔
80

1✔
81
function watchMapMove(deck: Deck, map: Map & {__deck?: Deck | null}) {
12✔
82
  const _handleMapMove = () => {
12✔
83
    if (deck.isInitialized) {
1!
84
      // call view state methods
×
85
      onMapMove(deck, map);
×
86
    } else {
1✔
87
      // deregister itself when deck is finalized
1✔
88
      map.off('move', _handleMapMove);
1✔
89
    }
1✔
90
  };
1✔
91
  map.on('move', _handleMapMove);
12✔
92
}
12✔
93

1✔
94
export function removeDeckInstance(map: Map & {__deck?: Deck | null}) {
1✔
95
  map.__deck?.finalize();
10✔
96
  map.__deck = null;
10✔
97
}
10✔
98

1✔
99
export function getDefaultParameters(map: Map, interleaved: boolean): Parameters {
1✔
100
  const result: Parameters = interleaved
18✔
101
    ? {
14✔
102
        depthWriteEnabled: true,
14✔
103
        depthCompare: 'less-equal',
14✔
104
        depthBias: 0,
14✔
105
        blend: true,
14✔
106
        blendColorSrcFactor: 'src-alpha',
14✔
107
        blendColorDstFactor: 'one-minus-src-alpha',
14✔
108
        blendAlphaSrcFactor: 'one',
14✔
109
        blendAlphaDstFactor: 'one-minus-src-alpha',
14✔
110
        blendColorOperation: 'add',
14✔
111
        blendAlphaOperation: 'add'
14✔
112
      }
14✔
113
    : {};
4✔
114
  if (getProjection(map) === 'globe') {
18✔
115
    result.cullMode = 'back';
1✔
116
  }
1✔
117
  return result;
18✔
118
}
18✔
119

1✔
120
export function drawLayer(
1✔
121
  deck: Deck,
11✔
122
  map: Map,
11✔
123
  layer: MapboxLayer<any>,
11✔
124
  renderParameters: any
11✔
125
): void {
11✔
126
  let {currentViewport} = deck.userData as UserData;
11✔
127
  let clearStack: boolean = false;
11✔
128
  if (!currentViewport) {
11✔
129
    // This is the first layer drawn in this render cycle.
10✔
130
    // Generate viewport from the current map state.
10✔
131
    currentViewport = getViewport(deck, map, renderParameters);
10✔
132
    (deck.userData as UserData).currentViewport = currentViewport;
10✔
133
    clearStack = true;
10✔
134
  }
10✔
135

11✔
136
  if (!deck.isInitialized) {
11✔
137
    return;
1✔
138
  }
1✔
139

10✔
140
  deck._drawLayers('mapbox-repaint', {
10✔
141
    viewports: [currentViewport],
10✔
142
    layerFilter: params =>
10✔
143
      (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
13✔
144
      (layer.id === params.layer.id || params.layer.props.operation.includes('terrain')),
10✔
145
    clearStack,
10✔
146
    clearCanvas: false
10✔
147
  });
10✔
148
}
10✔
149

1✔
150
export function drawLayerGroup(
1✔
151
  deck: Deck,
3✔
152
  map: Map,
3✔
153
  group: MapboxLayerGroup,
3✔
154
  renderParameters: any
3✔
155
): void {
3✔
156
  let {currentViewport} = deck.userData as UserData;
3✔
157
  let clearStack: boolean = false;
3✔
158
  if (!currentViewport) {
3✔
159
    // This is the first layer drawn in this render cycle.
3✔
160
    // Generate viewport from the current map state.
3✔
161
    currentViewport = getViewport(deck, map, renderParameters);
3✔
162
    (deck.userData as UserData).currentViewport = currentViewport;
3✔
163
    clearStack = true;
3✔
164
  }
3✔
165

3✔
166
  if (!deck.isInitialized) {
3!
167
    return;
×
168
  }
×
169

3✔
170
  deck._drawLayers('mapbox-repaint', {
3✔
171
    viewports: [currentViewport],
3✔
172
    layerFilter: params => {
3✔
173
      if (deck.props.layerFilter && !deck.props.layerFilter(params)) {
4!
174
        return false;
×
175
      }
×
176

4✔
177
      const layer = params.layer as Layer<LayerOverlayProps>;
4✔
178
      if (layer.props.beforeId === group.beforeId && layer.props.slot === group.slot) {
4✔
179
        return true;
4✔
180
      }
4!
181
      return false;
×
182
    },
4✔
183
    clearStack,
3✔
184
    clearCanvas: false
3✔
185
  });
3✔
186
}
3✔
187

1✔
188
export function getProjection(map: Map): 'mercator' | 'globe' {
1✔
189
  const projection = map.getProjection?.();
51✔
190
  const type =
51✔
191
    // maplibre projection spec
51✔
192
    projection?.type ||
51!
193
    // mapbox projection spec
×
194
    projection?.name;
×
195
  if (type === 'globe') {
51✔
196
    return 'globe';
4✔
197
  }
4✔
198
  if (type && type !== 'mercator') {
51!
199
    throw new Error('Unsupported projection');
×
200
  }
✔
201
  return 'mercator';
47✔
202
}
47✔
203

1✔
204
export function getDefaultView(map: Map): GlobeView | MapView {
1✔
205
  if (getProjection(map) === 'globe') {
25✔
206
    return new GlobeView({id: MAPBOX_VIEW_ID});
2✔
207
  }
2✔
208
  return new MapView({id: MAPBOX_VIEW_ID});
23✔
209
}
23✔
210

1✔
211
export function getViewState(map: Map): MapViewState & {
1✔
212
  repeat: boolean;
35✔
213
  padding: {
35✔
214
    left: number;
35✔
215
    right: number;
35✔
216
    top: number;
35✔
217
    bottom: number;
35✔
218
  };
35✔
219
} {
35✔
220
  const {lng, lat} = map.getCenter();
35✔
221

35✔
222
  const viewState: MapViewState & {
35✔
223
    repeat: boolean;
35✔
224
    padding: {
35✔
225
      left: number;
35✔
226
      right: number;
35✔
227
      top: number;
35✔
228
      bottom: number;
35✔
229
    };
35✔
230
  } = {
35✔
231
    // Longitude returned by getCenter can be outside of [-180, 180] when zooming near the anti meridian
35✔
232
    // https://github.com/visgl/deck.gl/issues/6894
35✔
233
    longitude: ((lng + 540) % 360) - 180,
35✔
234
    latitude: lat,
35✔
235
    zoom: map.getZoom(),
35✔
236
    bearing: map.getBearing(),
35✔
237
    pitch: map.getPitch(),
35✔
238
    padding: map.getPadding(),
35✔
239
    repeat: map.getRenderWorldCopies()
35✔
240
  };
35✔
241

35✔
242
  if (map.getTerrain?.()) {
35!
243
    // When the base map has terrain, we need to target the camera at the terrain surface
×
244
    centerCameraOnTerrain(map, viewState);
×
245
  }
×
246

35✔
247
  return viewState;
35✔
248
}
35✔
249

1✔
250
function centerCameraOnTerrain(map: Map, viewState: MapViewState) {
×
251
  if (map.getFreeCameraOptions) {
×
252
    // mapbox-gl v2
×
253
    const {position} = map.getFreeCameraOptions();
×
254
    if (!position || position.z === undefined) {
×
255
      return;
×
256
    }
×
257

×
258
    // @ts-ignore transform is not typed
×
259
    const height = map.transform.height;
×
260
    const {longitude, latitude, pitch} = viewState;
×
261

×
262
    // Convert mapbox mercator coordinate to deck common space
×
263
    const cameraX = position.x * TILE_SIZE;
×
264
    const cameraY = (1 - position.y) * TILE_SIZE;
×
265
    const cameraZ = position.z * TILE_SIZE;
×
266

×
267
    // Mapbox manipulates zoom in terrain mode, see discussion here: https://github.com/mapbox/mapbox-gl-js/issues/12040
×
268
    const center = lngLatToWorld([longitude, latitude]);
×
269
    const dx = cameraX - center[0];
×
270
    const dy = cameraY - center[1];
×
271
    const cameraToCenterDistanceGround = Math.sqrt(dx * dx + dy * dy);
×
272

×
273
    const pitchRadians = pitch! * DEGREES_TO_RADIANS;
×
274
    const altitudePixels = 1.5 * height;
×
275
    const scale =
×
276
      pitchRadians < 0.001
×
277
        ? // Pitch angle too small to deduce the look at point, assume elevation is 0
×
278
          (altitudePixels * Math.cos(pitchRadians)) / cameraZ
×
279
        : (altitudePixels * Math.sin(pitchRadians)) / cameraToCenterDistanceGround;
×
280
    viewState.zoom = Math.log2(scale);
×
281

×
282
    const cameraZFromSurface = (altitudePixels * Math.cos(pitchRadians)) / scale;
×
283
    const surfaceElevation = cameraZ - cameraZFromSurface;
×
284
    viewState.position = [0, 0, surfaceElevation / unitsPerMeter(latitude)];
×
285
  }
×
286
  // @ts-ignore transform is not typed
×
287
  else if (typeof map.transform.elevation === 'number') {
×
288
    // maplibre-gl
×
289
    // @ts-ignore transform is not typed
×
290
    viewState.position = [0, 0, map.transform.elevation];
×
291
  }
×
292
}
×
293

1✔
294
// Since maplibre-gl@5
1✔
295
// https://github.com/maplibre/maplibre-gl-js/blob/main/src/style/style_layer/custom_style_layer.ts
1✔
296
type MaplibreRenderParameters = {
1✔
297
  farZ: number;
1✔
298
  nearZ: number;
1✔
299
  fov: number;
1✔
300
  modelViewProjectionMatrix: number[];
1✔
301
  projectionMatrix: number[];
1✔
302
};
1✔
303

1✔
304
function getViewport(deck: Deck, map: Map, renderParameters?: unknown): Viewport {
17✔
305
  const viewState = getViewState(map);
17✔
306
  const {views} = deck.props;
17✔
307
  const view =
17✔
308
    (views && flatten(views).find((v: {id: string}) => v.id === MAPBOX_VIEW_ID)) ||
17✔
309
    getDefaultView(map);
1✔
310

17✔
311
  if (renderParameters) {
17!
312
    // Called from MapboxLayer.render
×
313
    // Magic number, matches mapbox-gl@>=1.3.0's projection matrix
×
314
    view.props.nearZMultiplier = 0.2;
×
315
  }
×
316

17✔
317
  // Get the base map near/far plane
17✔
318
  // renderParameters is maplibre API but not mapbox
17✔
319
  // Transform is not an official API, properties could be undefined for older versions
17✔
320
  const nearZ = (renderParameters as MaplibreRenderParameters)?.nearZ ?? map.transform._nearZ;
17!
321
  const farZ = (renderParameters as MaplibreRenderParameters)?.farZ ?? map.transform._farZ;
17!
322
  if (Number.isFinite(nearZ)) {
17!
323
    viewState.nearZ = nearZ / map.transform.height;
×
324
    viewState.farZ = farZ / map.transform.height;
×
325
  }
×
326
  // Otherwise fallback to default calculation using nearZMultiplier/farZMultiplier
17✔
327

17✔
328
  return view.makeViewport({
17✔
329
    width: deck.width,
17✔
330
    height: deck.height,
17✔
331
    viewState
17✔
332
  }) as Viewport;
17✔
333
}
17✔
334

1✔
335
function afterRender(deck: Deck, map: Map): void {
16✔
336
  // Draw non-Mapbox layers (layers that don't have a corresponding MapboxLayer on the map)
16✔
337
  const deckLayers = flatten(deck.props.layers, Boolean) as Layer[];
16✔
338
  const hasNonMapboxLayers = deckLayers.some(layer => layer && !map.getLayer(layer.id));
16✔
339
  let viewports = deck.getViewports();
16✔
340
  const mapboxViewportIdx = viewports.findIndex(vp => vp.id === MAPBOX_VIEW_ID);
16✔
341
  const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
16✔
342

16✔
343
  if (hasNonMapboxLayers || hasNonMapboxViews) {
16✔
344
    if (mapboxViewportIdx >= 0) {
5✔
345
      viewports = viewports.slice();
4✔
346
      viewports[mapboxViewportIdx] = getViewport(deck, map);
4✔
347
    }
4✔
348

5✔
349
    deck._drawLayers('mapbox-repaint', {
5✔
350
      viewports,
5✔
351
      layerFilter: params =>
5✔
352
        (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
9✔
353
        (params.viewport.id !== MAPBOX_VIEW_ID || !map.getLayer(params.layer.id)),
7✔
354
      clearCanvas: false
5✔
355
    });
5✔
356
  }
5✔
357

16✔
358
  // End of render cycle, clear generated viewport
16✔
359
  (deck.userData as UserData).currentViewport = null;
16✔
360
}
16✔
361

1✔
362
function onMapMove(deck: Deck, map: Map): void {
×
363
  deck.setProps({
×
364
    viewState: getViewState(map)
×
365
  });
×
366
  // Camera changed, will trigger a map repaint right after this
×
367
  // Clear any change flag triggered by setting viewState so that deck does not request
×
368
  // a second repaint
×
369
  deck.needsRedraw({clearRedrawFlags: true});
×
370
}
×
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