@deck.gl/mapbox 8.8.0-alpha.5 → 8.8.0-beta.2

package/src/mapbox-layer.ts

@@ -4,6 +4,8 @@ import type {Deck, Layer} from '@deck.gl/core';
 
 export type MapboxLayerProps<LayerT extends Layer> = Partial<LayerT['props']> & {
   id: string;
+  renderingMode?: '2d' | '3d';
+  deck?: Deck;
 };
 
 export default class MapboxLayer<LayerT extends Layer> implements CustomLayerInterface {

package/src/mapbox-overlay.ts

@@ -5,28 +5,50 @@ import type {Map, IControl, MapMouseEvent} from 'mapbox-gl';
 import type {MjolnirGestureEvent, MjolnirPointerEvent} from 'mjolnir.js';
 import type {DeckProps} from '@deck.gl/core';
 
+import {resolveLayers} from './resolve-layers';
+
+export type MapboxOverlayProps = Omit<
+  DeckProps,
+  | 'width'
+  | 'height'
+  | 'gl'
+  | 'parent'
+  | 'canvas'
+  | '_customRender'
+  | 'viewState'
+  | 'initialViewState'
+  | 'controller'
+>;
+
 /**
  * Implements Mapbox [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol) interface
  * Renders deck.gl layers over the base map and automatically synchronizes with the map's camera
  */
 export default class MapboxOverlay implements IControl {
-  private _props: DeckProps;
+  private _props: MapboxOverlayProps;
   private _deck?: Deck;
   private _map?: Map;
   private _container?: HTMLDivElement;
+  private _interleaved: boolean;
 
-  constructor(props: DeckProps) {
-    this._props = {...props};
+  constructor(
+    props: MapboxOverlayProps & {
+      interleaved?: boolean;
+    }
+  ) {
+    const {interleaved = false, ...otherProps} = props;
+    this._interleaved = interleaved;
+    this._props = otherProps;
   }
 
   /** Update (partial) props of the underlying Deck instance. */
-  setProps(props: DeckProps): void {
-    Object.assign(this._props, props);
-
-    if ('viewState' in this._props) {
-      delete this._props.viewState;
+  setProps(props: MapboxOverlayProps): void {
+    if (this._interleaved && props.layers) {
+      resolveLayers(this._map, this._deck, this._props.layers, props.layers);
     }
 
+    Object.assign(this._props, props);
+
     if (this._deck) {
       this._deck.setProps(this._props);
     }
@@ -35,7 +57,10 @@ export default class MapboxOverlay implements IControl {
   /** Called when the control is added to a map */
   onAdd(map: Map): HTMLDivElement {
     this._map = map;
+    return this._interleaved ? this._onAddInterleaved(map) : this._onAddOverlaid(map);
+  }
 
+  private _onAddOverlaid(map: Map): HTMLDivElement {
     /* global document */
     const container = document.createElement('div');
     Object.assign(container.style, {
@@ -63,17 +88,29 @@ export default class MapboxOverlay implements IControl {
     return container;
   }
 
+  private _onAddInterleaved(map: Map): HTMLDivElement {
+    this._deck = new Deck({
+      ...this._props,
+      // @ts-ignore non-public map property
+      gl: map.painter.context.gl
+    });
+
+    map.on('styledata', this._handleStyleChange);
+    resolveLayers(map, this._deck, [], this._props.layers);
+
+    return document.createElement('div');
+  }
+
   /** Called when the control is removed from a map */
   onRemove(): void {
     const map = this._map;
 
     if (map) {
-      map.off('resize', this._updateContainerSize);
-      map.off('render', this._updateViewState);
-      map.off('mousemove', this._handleMouseEvent);
-      map.off('mouseout', this._handleMouseEvent);
-      map.off('click', this._handleMouseEvent);
-      map.off('dblclick', this._handleMouseEvent);
+      if (this._interleaved) {
+        this._onRemoveInterleaved(map);
+      } else {
+        this._onRemoveOverlaid(map);
+      }
     }
 
     this._deck?.finalize();
@@ -82,6 +119,20 @@ export default class MapboxOverlay implements IControl {
     this._container = undefined;
   }
 
+  private _onRemoveOverlaid(map: Map): void {
+    map.off('resize', this._updateContainerSize);
+    map.off('render', this._updateViewState);
+    map.off('mousemove', this._handleMouseEvent);
+    map.off('mouseout', this._handleMouseEvent);
+    map.off('click', this._handleMouseEvent);
+    map.off('dblclick', this._handleMouseEvent);
+  }
+
+  private _onRemoveInterleaved(map: Map): void {
+    map.off('styledata', this._handleStyleChange);
+    resolveLayers(map, this._deck, this._props.layers, []);
+  }
+
   getDefaultPosition() {
     return 'top-left';
   }
@@ -113,6 +164,10 @@ export default class MapboxOverlay implements IControl {
     }
   }
 
+  private _handleStyleChange = () => {
+    resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);
+  };
+
   private _updateContainerSize = () => {
     if (this._map && this._container) {
       const {clientWidth, clientHeight} = this._map.getContainer();

package/src/resolve-layers.ts

@@ -0,0 +1,89 @@
+import {_flatten as flatten} from '@deck.gl/core';
+import MapboxLayer from './mapbox-layer';
+
+import type {Deck, LayersList, Layer} from '@deck.gl/core';
+import type {Map} from 'mapbox-gl';
+
+const UNDEFINED_BEFORE_ID = '__UNDEFINED__';
+
+/** Insert Deck layers into the mapbox Map according to the user-defined order */
+export function resolveLayers(
+  map?: Map,
+  deck?: Deck,
+  oldLayers?: LayersList,
+  newLayers?: LayersList
+) {
+  // Wait until map style is loaded
+  // @ts-ignore non-public map property
+  if (!map || !deck || !map.style || !map.style._loaded) {
+    return;
+  }
+
+  const layers = flatten(newLayers, Boolean) as Layer[];
+
+  if (oldLayers !== newLayers) {
+    // Step 1: remove layers that no longer exist
+    const prevLayers = flatten(oldLayers, Boolean) as Layer[];
+    const prevLayerIds = new Set<string>(prevLayers.map(l => l.id));
+
+    for (const layer of layers) {
+      prevLayerIds.delete(layer.id);
+    }
+
+    for (const id of prevLayerIds) {
+      if (map.getLayer(id)) {
+        map.removeLayer(id);
+      }
+    }
+  }
+
+  // Step 2: add missing layers
+  for (const layer of layers) {
+    if (!map.getLayer(layer.id)) {
+      map.addLayer(
+        new MapboxLayer({id: layer.id, deck}),
+        // @ts-expect-error beforeId is not defined in LayerProps
+        layer.props.beforeId
+      );
+    }
+  }
+
+  // Step 3: check the order of layers
+  // If beforeId is defined, the deck layer should always render before the mapbox layer [beforeId]
+  // If beforeId is not defined, the deck layer should appear after all mapbox layers
+  // When two deck layers share the same beforeId, they are rendered in the order that is passed into Deck props.layers
+  // @ts-ignore non-public map property
+  const mapLayers: string[] = map.style._order;
+
+  // Group deck layers by beforeId
+  const layerGroups: Record<string, string[]> = {};
+  for (const layer of layers) {
+    // @ts-expect-error beforeId is not defined in LayerProps
+    let {beforeId} = layer.props;
+    if (!beforeId || !mapLayers.includes(beforeId)) {
+      beforeId = UNDEFINED_BEFORE_ID;
+    }
+    layerGroups[beforeId] = layerGroups[beforeId] || [];
+    layerGroups[beforeId].push(layer.id);
+  }
+
+  for (const beforeId in layerGroups) {
+    const layerGroup = layerGroups[beforeId];
+    let lastLayerIndex =
+      beforeId === UNDEFINED_BEFORE_ID ? mapLayers.length : mapLayers.indexOf(beforeId);
+    let lastLayerId = beforeId === UNDEFINED_BEFORE_ID ? undefined : beforeId;
+    for (let i = layerGroup.length - 1; i >= 0; i--) {
+      const layerId = layerGroup[i];
+      const layerIndex = mapLayers.indexOf(layerId);
+      if (layerIndex !== lastLayerIndex - 1) {
+        map.moveLayer(layerId, lastLayerId);
+        if (layerIndex > lastLayerIndex) {
+          // The last layer's index have changed
+          lastLayerIndex++;
+        }
+      }
+      lastLayerIndex--;
+      lastLayerId = layerId;
+    }
+  }
+}

package/typed/deck-utils.d.ts

@@ -15,5 +15,11 @@ export declare function updateLayer(deck: Deck, layer: MapboxLayer<any>): void;
 export declare function drawLayer(deck: Deck, map: Map, layer: MapboxLayer<any>): void;
 export declare function getViewState(map: Map): MapViewState & {
     repeat: boolean;
+    padding: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
 };
 //# sourceMappingURL=deck-utils.d.ts.map

package/typed/deck-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deck-utils.d.ts","sourceRoot":"","sources":["../src/deck-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAoD,MAAM,eAAe,CAAC;AACtF,OAAO,KAAK,EAAY,YAAY,EAAQ,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,WAAW,CAAC;AASnC,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,EAAE,EACF,IAAI,EACL,EAAE;IACD,GAAG,EAAE,GAAG,GAAG;QAAC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;IAClC,EAAE,EAAE,qBAAqB,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CAgEP;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGlE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGrE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAErE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAmB7E;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,YAAY,GAAG;IAAC,MAAM,EAAE,OAAO,CAAA;CAAC,CAYvE"}
+{"version":3,"file":"deck-utils.d.ts","sourceRoot":"","sources":["../src/deck-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAoD,MAAM,eAAe,CAAC;AACtF,OAAO,KAAK,EAAY,YAAY,EAAQ,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,WAAW,CAAC;AASnC,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,EAAE,EACF,IAAI,EACL,EAAE;IACD,GAAG,EAAE,GAAG,GAAG;QAAC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;IAClC,EAAE,EAAE,qBAAqB,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CAgEP;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGlE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGrE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAErE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAmB7E;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,YAAY,GAAG;IACrD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAaA"}

package/typed/deck-utils.js

@@ -0,0 +1,185 @@
+import { Deck, WebMercatorViewport, MapView, _flatten as flatten } from '@deck.gl/core';
+export function getDeckInstance({ map, gl, deck }) {
+    // Only create one deck instance per context
+    if (map.__deck) {
+        return map.__deck;
+    }
+    const customRender = deck?.props._customRender;
+    const deckProps = {
+        useDevicePixels: true,
+        _customRender: (reason) => {
+            map.triggerRepaint();
+            // customRender may be subscribed by DeckGL React component to update child props
+            // make sure it is still called
+            customRender?.(reason);
+        },
+        // TODO: import these defaults from a single source of truth
+        parameters: {
+            depthMask: true,
+            depthTest: true,
+            blend: true,
+            blendFunc: [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA],
+            polygonOffsetFill: true,
+            depthFunc: gl.LEQUAL,
+            blendEquation: gl.FUNC_ADD
+        },
+        views: (deck && deck.props.views) || [new MapView({ id: 'mapbox' })]
+    };
+    if (!deck || deck.props.gl === gl) {
+        // deck is using the WebGLContext created by mapbox
+        // block deck from setting the canvas size
+        Object.assign(deckProps, {
+            gl,
+            width: null,
+            height: null,
+            touchAction: 'unset',
+            viewState: getViewState(map)
+        });
+        // If using the WebGLContext created by deck (React use case), we use deck's viewState to drive the map.
+        // Otherwise (pure JS use case), we use the map's viewState to drive deck.
+        map.on('move', () => onMapMove(deck, map));
+    }
+    if (deck) {
+        deck.setProps(deckProps);
+        deck.userData.isExternal = true;
+    }
+    else {
+        deck = new Deck(deckProps);
+        map.on('remove', () => {
+            deck.finalize();
+            map.__deck = null;
+        });
+    }
+    deck.userData.mapboxLayers = new Set();
+    deck.userData.mapboxVersion = getMapboxVersion(map);
+    map.__deck = deck;
+    map.on('render', () => {
+        // @ts-expect-error (2445) protected property
+        if (deck.layerManager)
+            afterRender(deck, map);
+    });
+    return deck;
+}
+export function addLayer(deck, layer) {
+    deck.userData.mapboxLayers.add(layer);
+    updateLayers(deck);
+}
+export function removeLayer(deck, layer) {
+    deck.userData.mapboxLayers.delete(layer);
+    updateLayers(deck);
+}
+export function updateLayer(deck, layer) {
+    updateLayers(deck);
+}
+export function drawLayer(deck, map, layer) {
+    let { currentViewport } = deck.userData;
+    if (!currentViewport) {
+        // This is the first layer drawn in this render cycle.
+        // Generate viewport from the current map state.
+        currentViewport = getViewport(deck, map, true);
+        deck.userData.currentViewport = currentViewport;
+    }
+    // @ts-expect-error (2445) protected property
+    if (!deck.layerManager) {
+        return;
+    }
+    deck._drawLayers('mapbox-repaint', {
+        viewports: [currentViewport],
+        layerFilter: ({ layer: deckLayer }) => layer.id === deckLayer.id,
+        clearCanvas: false
+    });
+}
+export function getViewState(map) {
+    const { lng, lat } = map.getCenter();
+    return {
+        // Longitude returned by getCenter can be outside of [-180, 180] when zooming near the anti meridian
+        // https://github.com/visgl/deck.gl/issues/6894
+        longitude: ((lng + 540) % 360) - 180,
+        latitude: lat,
+        zoom: map.getZoom(),
+        bearing: map.getBearing(),
+        pitch: map.getPitch(),
+        repeat: map.getRenderWorldCopies()
+    };
+}
+function getMapboxVersion(map) {
+    // parse mapbox version string
+    let major = 0;
+    let minor = 0;
+    // @ts-ignore (2339) undefined property
+    const version = map.version;
+    if (version) {
+        [major, minor] = version.split('.').slice(0, 2).map(Number);
+    }
+    return { major, minor };
+}
+function getViewport(deck, map, useMapboxProjection = true) {
+    const { mapboxVersion } = deck.userData;
+    return new WebMercatorViewport(Object.assign({
+        id: 'mapbox',
+        x: 0,
+        y: 0,
+        width: deck.width,
+        height: deck.height
+    }, getViewState(map), useMapboxProjection
+        ? {
+            // match mapbox's projection matrix
+            // A change of near plane was made in 1.3.0
+            // https://github.com/mapbox/mapbox-gl-js/pull/8502
+            nearZMultiplier: (mapboxVersion.major === 1 && mapboxVersion.minor >= 3) || mapboxVersion.major >= 2
+                ? 0.02
+                : 1 / (deck.height || 1)
+        }
+        : {
+            // use deck.gl's own default
+            nearZMultiplier: 0.1
+        }));
+}
+function afterRender(deck, map) {
+    const { mapboxLayers, isExternal } = deck.userData;
+    if (isExternal) {
+        // Draw non-Mapbox layers
+        const mapboxLayerIds = Array.from(mapboxLayers, layer => layer.id);
+        const deckLayers = flatten(deck.props.layers, Boolean);
+        const hasNonMapboxLayers = deckLayers.some(layer => layer && !mapboxLayerIds.includes(layer.id));
+        let viewports = deck.getViewports();
+        const mapboxViewportIdx = viewports.findIndex(vp => vp.id === 'mapbox');
+        const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
+        if (hasNonMapboxLayers || hasNonMapboxViews) {
+            if (mapboxViewportIdx >= 0) {
+                viewports = viewports.slice();
+                viewports[mapboxViewportIdx] = getViewport(deck, map, false);
+            }
+            deck._drawLayers('mapbox-repaint', {
+                viewports,
+                layerFilter: params => (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
+                    (params.viewport.id !== 'mapbox' || !mapboxLayerIds.includes(params.layer.id)),
+                clearCanvas: false
+            });
+        }
+    }
+    // End of render cycle, clear generated viewport
+    deck.userData.currentViewport = null;
+}
+function onMapMove(deck, map) {
+    deck.setProps({
+        viewState: getViewState(map)
+    });
+    // Camera changed, will trigger a map repaint right after this
+    // Clear any change flag triggered by setting viewState so that deck does not request
+    // a second repaint
+    deck.needsRedraw({ clearRedrawFlags: true });
+}
+function updateLayers(deck) {
+    if (deck.userData.isExternal) {
+        return;
+    }
+    const layers = [];
+    let layerIndex = 0;
+    deck.userData.mapboxLayers.forEach(deckLayer => {
+        const LayerType = deckLayer.props.type;
+        const layer = new LayerType(deckLayer.props, { _offset: layerIndex++ });
+        layers.push(layer);
+    });
+    deck.setProps({ layers });
+}

package/typed/index.d.ts

@@ -1,3 +1,4 @@
 export { default as MapboxLayer } from './mapbox-layer';
 export { default as MapboxOverlay } from './mapbox-overlay';
+export type { MapboxOverlayProps } from './mapbox-overlay';
 //# sourceMappingURL=index.d.ts.map

package/typed/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAE1D,YAAY,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC"}

package/typed/index.js

@@ -0,0 +1,2 @@
+export { default as MapboxLayer } from './mapbox-layer';
+export { default as MapboxOverlay } from './mapbox-overlay';

package/typed/mapbox-layer.d.ts

@@ -2,6 +2,8 @@ import type { Map, CustomLayerInterface } from 'mapbox-gl';
 import type { Deck, Layer } from '@deck.gl/core/typed';
 export declare type MapboxLayerProps<LayerT extends Layer> = Partial<LayerT['props']> & {
     id: string;
+    renderingMode?: '2d' | '3d';
+    deck?: Deck;
 };
 export default class MapboxLayer<LayerT extends Layer> implements CustomLayerInterface {
     id: string;

package/typed/mapbox-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapbox-layer.d.ts","sourceRoot":"","sources":["../src/mapbox-layer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,GAAG,EAAE,oBAAoB,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAE/C,oBAAY,gBAAgB,CAAC,MAAM,SAAS,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG;IAC9E,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,WAAW,CAAC,MAAM,SAAS,KAAK,CAAE,YAAW,oBAAoB;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;gBAGpB,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAe3C,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,qBAAqB,GAAG,IAAI;IAMhD,QAAQ,IAAI,IAAI;IAMhB,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC;IASxC,MAAM;CAGP"}
+{"version":3,"file":"mapbox-layer.d.ts","sourceRoot":"","sources":["../src/mapbox-layer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,GAAG,EAAE,oBAAoB,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAE/C,oBAAY,gBAAgB,CAAC,MAAM,SAAS,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG;IAC9E,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,WAAW,CAAC,MAAM,SAAS,KAAK,CAAE,YAAW,oBAAoB;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;gBAGpB,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAe3C,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,qBAAqB,GAAG,IAAI;IAMhD,QAAQ,IAAI,IAAI;IAMhB,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC;IASxC,MAAM;CAGP"}

package/typed/mapbox-layer.js

@@ -0,0 +1,37 @@
+import { getDeckInstance, addLayer, removeLayer, updateLayer, drawLayer } from './deck-utils';
+export default class MapboxLayer {
+    /* eslint-disable no-this-before-super */
+    constructor(props) {
+        if (!props.id) {
+            throw new Error('Layer must have an unique id');
+        }
+        this.id = props.id;
+        this.type = 'custom';
+        this.renderingMode = props.renderingMode || '3d';
+        this.map = null;
+        this.deck = null;
+        this.props = props;
+    }
+    /* Mapbox custom layer methods */
+    onAdd(map, gl) {
+        this.map = map;
+        this.deck = getDeckInstance({ map, gl, deck: this.props.deck });
+        addLayer(this.deck, this);
+    }
+    onRemove() {
+        if (this.deck) {
+            removeLayer(this.deck, this);
+        }
+    }
+    setProps(props) {
+        // 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() {
+        drawLayer(this.deck, this.map, this);
+    }
+}

package/typed/mapbox-overlay.d.ts

@@ -1,6 +1,7 @@
 import { Deck } from '@deck.gl/core/typed';
 import type { Map, IControl } from 'mapbox-gl';
 import type { DeckProps } from '@deck.gl/core/typed';
+export declare type MapboxOverlayProps = Omit<DeckProps, 'width' | 'height' | 'gl' | 'parent' | 'canvas' | '_customRender' | 'viewState' | 'initialViewState' | 'controller'>;
 /**
  * Implements Mapbox [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol) interface
  * Renders deck.gl layers over the base map and automatically synchronizes with the map's camera
@@ -10,13 +11,20 @@ export default class MapboxOverlay implements IControl {
     private _deck?;
     private _map?;
     private _container?;
-    constructor(props: DeckProps);
+    private _interleaved;
+    constructor(props: MapboxOverlayProps & {
+        interleaved?: boolean;
+    });
     /** Update (partial) props of the underlying Deck instance. */
-    setProps(props: DeckProps): void;
+    setProps(props: MapboxOverlayProps): void;
     /** Called when the control is added to a map */
     onAdd(map: Map): HTMLDivElement;
+    private _onAddOverlaid;
+    private _onAddInterleaved;
     /** Called when the control is removed from a map */
     onRemove(): void;
+    private _onRemoveOverlaid;
+    private _onRemoveInterleaved;
     getDefaultPosition(): string;
     /** Forwards the Deck.pickObject method */
     pickObject(params: Parameters<Deck['pickObject']>[0]): ReturnType<Deck['pickObject']>;
@@ -26,6 +34,7 @@ export default class MapboxOverlay implements IControl {
     pickObjects(params: Parameters<Deck['pickObjects']>[0]): ReturnType<Deck['pickObjects']>;
     /** Remove from map and releases all resources */
     finalize(): void;
+    private _handleStyleChange;
     private _updateContainerSize;
     private _updateViewState;
     private _handleMouseEvent;

package/typed/mapbox-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapbox-overlay.d.ts","sourceRoot":"","sources":["../src/mapbox-overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAS,MAAM,eAAe,CAAC;AAG3C,OAAO,KAAK,EAAC,GAAG,EAAE,QAAQ,EAAgB,MAAM,WAAW,CAAC;AAE5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAE7C;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,YAAW,QAAQ;IACpD,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,KAAK,CAAC,CAAO;IACrB,OAAO,CAAC,IAAI,CAAC,CAAM;IACnB,OAAO,CAAC,UAAU,CAAC,CAAiB;gBAExB,KAAK,EAAE,SAAS;IAI5B,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAYhC,gDAAgD;IAChD,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc;IA8B/B,oDAAoD;IACpD,QAAQ,IAAI,IAAI;IAkBhB,kBAAkB;IAIlB,0CAA0C;IAC1C,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAKrF,mDAAmD;IACnD,mBAAmB,CACjB,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,GACjD,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAK1C,2CAA2C;IAC3C,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAKxF,iDAAiD;IACjD,QAAQ;IAMR,OAAO,CAAC,oBAAoB,CAQ1B;IAEF,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,iBAAiB,CA4CvB;CACH"}
+{"version":3,"file":"mapbox-overlay.d.ts","sourceRoot":"","sources":["../src/mapbox-overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAS,MAAM,eAAe,CAAC;AAG3C,OAAO,KAAK,EAAC,GAAG,EAAE,QAAQ,EAAgB,MAAM,WAAW,CAAC;AAE5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAI7C,oBAAY,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACP,OAAO,GACP,QAAQ,GACR,IAAI,GACJ,QAAQ,GACR,QAAQ,GACR,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,YAAY,CACf,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,YAAW,QAAQ;IACpD,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,KAAK,CAAC,CAAO;IACrB,OAAO,CAAC,IAAI,CAAC,CAAM;IACnB,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAU;gBAG5B,KAAK,EAAE,kBAAkB,GAAG;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;IAOH,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI;IAYzC,gDAAgD;IAChD,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc;IAK/B,OAAO,CAAC,cAAc;IA4BtB,OAAO,CAAC,iBAAiB;IAazB,oDAAoD;IACpD,QAAQ,IAAI,IAAI;IAiBhB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,oBAAoB;IAK5B,kBAAkB;IAIlB,0CAA0C;IAC1C,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAKrF,mDAAmD;IACnD,mBAAmB,CACjB,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,GACjD,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAK1C,2CAA2C;IAC3C,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAKxF,iDAAiD;IACjD,QAAQ;IAMR,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,oBAAoB,CAQ1B;IAEF,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,iBAAiB,CA4CvB;CACH"}