visgl
diff --git a/‎docs/api-reference/mapbox/mapbox-layer.md‎
Lines changed: 0 additions & 73 deletions b/‎docs/api-reference/mapbox/mapbox-layer.md‎
Lines changed: 0 additions & 73 deletions
diff --git a/‎docs/whats-new.md‎
Lines changed: 1 addition & 1 deletion b/‎docs/whats-new.md‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎modules/mapbox/src/deck-utils.ts‎
Lines changed: 41 additions & 95 deletions b/‎modules/mapbox/src/deck-utils.ts‎
Lines changed: 41 additions & 95 deletions
diff --git a/‎modules/mapbox/src/mapbox-layer-group.ts‎
Lines changed: 7 additions & 8 deletions b/‎modules/mapbox/src/mapbox-layer-group.ts‎
Lines changed: 7 additions & 8 deletions
diff --git a/‎modules/mapbox/src/mapbox-layer.ts‎
Lines changed: 9 additions & 16 deletions b/‎modules/mapbox/src/mapbox-layer.ts‎
Lines changed: 9 additions & 16 deletions
@@ -850,7 +850,7 @@ You can now use ArcGIS basemaps with deck.gl. This new module lets apps render d
 
 The `MapView` now supports repeating worlds at low zoom levels. For backward compatibility, this feature is opt-in. Apps may turn it on by setting `views: new MapView({repeat: true})` on `Deck` or `DeckGL`.
 
-Repeating is always on when using [MapboxLayer](./api-reference/mapbox/mapbox-layer.md) and [GoogleMapsOverlay](./api-reference/google-maps/google-maps-overlay.md).
+Repeating is always on when using `MapboxLayer` and [GoogleMapsOverlay](./api-reference/google-maps/google-maps-overlay.md).
 
 As a result, `GoogleMapsOverlay` now supports all Google Maps zoom levels.
 
 
@@ -14,10 +14,7 @@ import {lngLatToWorld, unitsPerMeter} from '@math.gl/web-mercator';
 const MAPBOX_VIEW_ID = 'mapbox';
 
 type UserData = {
-  isExternal: boolean;
   currentViewport?: Viewport | null;
-  mapboxLayers: Set<MapboxLayer<any>>;
-  // mapboxVersion: {minor: number; major: number};
 };
 
 // Mercator constants
@@ -27,24 +24,22 @@ const DEGREES_TO_RADIANS = Math.PI / 180;
 // Create an interleaved deck instance.
 export function getDeckInstance({
   map,
-  gl,
   deck
 }: {
   map: Map & {__deck?: Deck<any> | null};
-  gl: WebGL2RenderingContext;
-  deck?: Deck<any>;
+  deck: Deck<any>;
 }): Deck<any> {
   // Only create one deck instance per context
   if (map.__deck) {
     return map.__deck;
   }
 
   // Only initialize certain props once per context
-  const customRender = deck?.props._customRender;
-  const onLoad = deck?.props.onLoad;
+  const customRender = deck.props._customRender;
+  const onLoad = deck.props.onLoad;
 
   const deckProps = {
-    ...deck?.props,
+    ...deck.props,
     _customRender: () => {
       map.triggerRepaint();
       // customRender may be subscribed by DeckGL React component to update child props
@@ -54,52 +49,33 @@ export function getDeckInstance({
       customRender?.('');
     }
   };
-  deckProps.parameters = {...getDefaultParameters(map, true), ...deckProps.parameters};
   deckProps.views ||= getDefaultView(map);
 
-  let deckInstance: Deck;
-
-  if (!deck || deck.props.gl === gl) {
-    // If deck isn't defined (Internal MapboxLayer use case),
-    // or if deck is defined and is using the WebGLContext created by mapbox (MapboxOverlay and External MapboxLayer use case),
-    // block deck from setting the canvas size, and use the map's viewState to drive deck.
-    // Otherwise, we use deck's viewState to drive the map.
-    Object.assign(deckProps, {
-      gl,
-      width: null,
-      height: null,
-      touchAction: 'unset',
-      viewState: getViewState(map)
-    });
-    if (deck?.isInitialized) {
+  // deck is using the WebGLContext created by mapbox,
+  // block deck from setting the canvas size, and use the map's viewState to drive deck.
+  Object.assign(deckProps, {
+    width: null,
+    height: null,
+    touchAction: 'unset',
+    viewState: getViewState(map)
+  });
+  if (deck.isInitialized) {
+    watchMapMove(deck, map);
+  } else {
+    deckProps.onLoad = () => {
+      onLoad?.();
       watchMapMove(deck, map);
-    } else {
-      deckProps.onLoad = () => {
-        onLoad?.();
-        watchMapMove(deckInstance, map);
-      };
-    }
+    };
   }
 
-  if (deck) {
-    deckInstance = deck;
-    deck.setProps(deckProps);
-    (deck.userData as UserData).isExternal = true;
-  } else {
-    deckInstance = new Deck(deckProps);
-    map.on('remove', () => {
-      removeDeckInstance(map);
-    });
-  }
+  deck.setProps(deckProps);
 
-  (deckInstance.userData as UserData).mapboxLayers = new Set();
-  // (deckInstance.userData as UserData).mapboxVersion = getMapboxVersion(map);
-  map.__deck = deckInstance;
+  map.__deck = deck;
   map.on('render', () => {
-    if (deckInstance.isInitialized) afterRender(deckInstance, map);
+    if (deck.isInitialized) afterRender(deck, map);
   });
 
-  return deckInstance;
+  return deck;
 }
 
 function watchMapMove(deck: Deck, map: Map & {__deck?: Deck | null}) {
@@ -141,20 +117,6 @@ export function getDefaultParameters(map: Map, interleaved: boolean): Parameters
   return result;
 }
 
-export function addLayer(deck: Deck, layer: MapboxLayer<any>): void {
-  (deck.userData as UserData).mapboxLayers.add(layer);
-  updateLayers(deck);
-}
-
-export function removeLayer(deck: Deck, layer: MapboxLayer<any>): void {
-  (deck.userData as UserData).mapboxLayers.delete(layer);
-  updateLayers(deck);
-}
-
-export function updateLayer(deck: Deck, layer: MapboxLayer<any>): void {
-  updateLayers(deck);
-}
-
 export function drawLayer(
   deck: Deck,
   map: Map,
@@ -371,28 +333,26 @@ function getViewport(deck: Deck, map: Map, renderParameters?: unknown): Viewport
 }
 
 function afterRender(deck: Deck, map: Map): void {
-  const {isExternal} = deck.userData as UserData;
-
-  if (isExternal) {
-    // Draw non-Mapbox layers
-    let viewports = deck.getViewports();
-    const mapboxViewportIdx = viewports.findIndex(vp => vp.id === MAPBOX_VIEW_ID);
-    const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
-
-    if (hasNonMapboxViews) {
-      if (mapboxViewportIdx >= 0) {
-        viewports = viewports.slice();
-        viewports[mapboxViewportIdx] = getViewport(deck, map);
-      }
-
-      deck._drawLayers('mapbox-repaint', {
-        viewports,
-        layerFilter: params =>
-          (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
-          params.viewport.id !== MAPBOX_VIEW_ID,
-        clearCanvas: false
-      });
+  // Draw non-Mapbox layers (layers that don't have a corresponding MapboxLayer on the map)
+  const deckLayers = flatten(deck.props.layers, Boolean) as Layer[];
+  const hasNonMapboxLayers = deckLayers.some(layer => layer && !map.getLayer(layer.id));
+  let viewports = deck.getViewports();
+  const mapboxViewportIdx = viewports.findIndex(vp => vp.id === MAPBOX_VIEW_ID);
+  const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
+
+  if (hasNonMapboxLayers || hasNonMapboxViews) {
+    if (mapboxViewportIdx >= 0) {
+      viewports = viewports.slice();
+      viewports[mapboxViewportIdx] = getViewport(deck, map);
     }
+
+    deck._drawLayers('mapbox-repaint', {
+      viewports,
+      layerFilter: params =>
+        (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
+        (params.viewport.id !== MAPBOX_VIEW_ID || !map.getLayer(params.layer.id)),
+      clearCanvas: false
+    });
   }
 
   // End of render cycle, clear generated viewport
@@ -408,17 +368,3 @@ function onMapMove(deck: Deck, map: Map): void {
   // a second repaint
   deck.needsRedraw({clearRedrawFlags: true});
 }
-
-function updateLayers(deck: Deck): void {
-  if ((deck.userData as UserData).isExternal) {
-    return;
-  }
-
-  const layers: Layer[] = [];
-  (deck.userData as UserData).mapboxLayers.forEach(deckLayer => {
-    const LayerType = deckLayer.props.type;
-    const layer = new LayerType(deckLayer.props);
-    layers.push(layer);
-  });
-  deck.setProps({layers});
-}
@@ -2,10 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {getDeckInstance, drawLayerGroup} from './deck-utils';
+import {drawLayerGroup} from './deck-utils';
 import type {Map, CustomLayerInterface} from './types';
 import {assert, type Deck} from '@deck.gl/core';
 
+type MapWithDeck = Map & {__deck: Deck};
+
 export type MapboxLayerGroupProps = {
   id: string;
   renderingMode?: '2d' | '3d';
@@ -21,8 +23,7 @@ export default class MapboxLayerGroup implements CustomLayerInterface {
   /* Mapbox v3 Standard style */
   slot?: 'bottom' | 'middle' | 'top';
   beforeId?: string;
-  map: Map | null;
-  deck: Deck | null;
+  map: MapWithDeck | null;
 
   /* eslint-disable no-this-before-super */
   constructor(props: MapboxLayerGroupProps) {
@@ -34,19 +35,17 @@ export default class MapboxLayerGroup implements CustomLayerInterface {
     this.slot = props.slot;
     this.beforeId = props.beforeId;
     this.map = null;
-    this.deck = null;
   }
 
   /* Mapbox custom layer methods */
 
-  onAdd(map: Map, gl: WebGL2RenderingContext): void {
+  onAdd(map: MapWithDeck, gl: WebGL2RenderingContext): void {
     this.map = map;
-    this.deck = getDeckInstance({map, gl});
   }
 
   render(gl, renderParameters) {
-    if (!this.deck || !this.map) return;
+    if (!this.map) return;
 
-    drawLayerGroup(this.deck, this.map, this, renderParameters);
+    drawLayerGroup(this.map.__deck, this.map, this, renderParameters);
   }
 }
@@ -2,14 +2,15 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {getDeckInstance, addLayer, removeLayer, updateLayer, drawLayer} from './deck-utils';
+import {drawLayer} from './deck-utils';
 import type {Map, CustomLayerInterface} from './types';
 import type {Deck, Layer} from '@deck.gl/core';
 
+type MapWithDeck = Map & {__deck: Deck};
+
 export type MapboxLayerProps<LayerT extends Layer> = Partial<LayerT['props']> & {
   id: string;
   renderingMode?: '2d' | '3d';
-  deck?: Deck;
   /* Mapbox v3 Standard style */
   slot?: 'bottom' | 'middle' | 'top';
 };
@@ -20,8 +21,7 @@ export default class MapboxLayer<LayerT extends Layer> implements CustomLayerInt
   renderingMode: '2d' | '3d';
   /* Mapbox v3 Standard style */
   slot?: 'bottom' | 'middle' | 'top';
-  map: Map | null;
-  deck: Deck | null;
+  map: MapWithDeck | null;
   props: MapboxLayerProps<LayerT>;
 
   /* eslint-disable no-this-before-super */
@@ -35,34 +35,27 @@ export default class MapboxLayer<LayerT extends Layer> implements CustomLayerInt
     this.renderingMode = props.renderingMode || '3d';
     this.slot = props.slot;
     this.map = null;
-    this.deck = null;
     this.props = props;
   }
 
   /* Mapbox custom layer methods */
 
-  onAdd(map: Map, gl: WebGL2RenderingContext): void {
+  onAdd(map: MapWithDeck, gl: WebGL2RenderingContext): void {
     this.map = map;
-    this.deck = getDeckInstance({map, gl, deck: this.props.deck});
-    addLayer(this.deck, this);
   }
 
   onRemove(): void {
-    if (this.deck) {
-      removeLayer(this.deck, this);
-    }
+    this.map = null;
   }
 
   setProps(props: MapboxLayerProps<LayerT>) {
     // id cannot be changed
     Object.assign(this.props, props, {id: this.id});
-    // safe guard in case setProps is called before onAdd
-    if (this.deck) {
-      updateLayer(this.deck, this);
-    }
   }
 
   render(gl, renderParameters) {
-    drawLayer(this.deck!, this.map!, this, renderParameters);
+    if (!this.map) return;
+
+    drawLayer(this.map.__deck, this.map, this, renderParameters);
   }
 }