@deck.gl/mapbox 8.8.0-alpha.4 → 8.8.0-beta.1

package/src/{deck-utils.js → deck-utils.ts}

@@ -1,22 +1,38 @@
-import {Deck, WebMercatorViewport, MapView} from '@deck.gl/core';
-
-export function getDeckInstance({map, gl, deck}) {
+import {Deck, WebMercatorViewport, MapView, _flatten as flatten} from '@deck.gl/core';
+import type {DeckProps, MapViewState, Layer} from '@deck.gl/core';
+import type MapboxLayer from './mapbox-layer';
+import type {Map} from 'mapbox-gl';
+
+type UserData = {
+  isExternal: boolean;
+  currentViewport?: WebMercatorViewport | null;
+  mapboxLayers: Set<MapboxLayer<any>>;
+  mapboxVersion: {minor: number; major: number};
+};
+
+export function getDeckInstance({
+  map,
+  gl,
+  deck
+}: {
+  map: Map & {__deck?: Deck | null};
+  gl: WebGLRenderingContext;
+  deck?: Deck;
+}): Deck {
   // Only create one deck instance per context
   if (map.__deck) {
     return map.__deck;
   }
 
-  const customRender = deck && deck.props._customRender;
+  const customRender = deck?.props._customRender;
 
-  const deckProps = {
+  const deckProps: DeckProps = {
     useDevicePixels: true,
-    _customRender: () => {
+    _customRender: (reason: string) => {
       map.triggerRepaint();
-      if (customRender) {
-        // customRender may be subscribed by DeckGL React component to update child props
-        // make sure it is still called
-        customRender();
-      }
+      // 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: {
@@ -28,10 +44,6 @@ export function getDeckInstance({map, gl, deck}) {
       depthFunc: gl.LEQUAL,
       blendEquation: gl.FUNC_ADD
     },
-    userData: {
-      isExternal: false,
-      mapboxLayers: new Set()
-    },
     views: (deck && deck.props.views) || [new MapView({id: 'mapbox'})]
   };
 
@@ -40,58 +52,62 @@ export function getDeckInstance({map, gl, deck}) {
     // block deck from setting the canvas size
     Object.assign(deckProps, {
       gl,
-      width: false,
-      height: false,
+      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));
+    map.on('move', () => onMapMove(deck!, map));
   }
 
   if (deck) {
     deck.setProps(deckProps);
-    deck.props.userData.isExternal = true;
+    (deck.userData as UserData).isExternal = true;
   } else {
     deck = new Deck(deckProps);
     map.on('remove', () => {
-      deck.finalize();
+      deck!.finalize();
       map.__deck = null;
     });
   }
 
-  deck.props.userData.mapboxVersion = getMapboxVersion(map);
+  (deck.userData as UserData).mapboxLayers = new Set();
+  (deck.userData as 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.props.userData.mapboxLayers.add(layer);
+export function addLayer(deck: Deck, layer: MapboxLayer<any>): void {
+  (deck.userData as UserData).mapboxLayers.add(layer);
   updateLayers(deck);
 }
 
-export function removeLayer(deck, layer) {
-  deck.props.userData.mapboxLayers.delete(layer);
+export function removeLayer(deck: Deck, layer: MapboxLayer<any>): void {
+  (deck.userData as UserData).mapboxLayers.delete(layer);
   updateLayers(deck);
 }
 
-export function updateLayer(deck, layer) {
+export function updateLayer(deck: Deck, layer: MapboxLayer<any>): void {
   updateLayers(deck);
 }
 
-export function drawLayer(deck, map, layer) {
-  let {currentViewport} = deck.props.userData;
+export function drawLayer(deck: Deck, map: Map, layer: MapboxLayer<any>): void {
+  let {currentViewport} = deck.userData as 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.props.userData.currentViewport = currentViewport;
+    (deck.userData as UserData).currentViewport = currentViewport;
   }
+
+  // @ts-expect-error (2445) protected property
   if (!deck.layerManager) {
     return;
   }
@@ -103,7 +119,7 @@ export function drawLayer(deck, map, layer) {
   });
 }
 
-export function getViewState(map) {
+export function getViewState(map: Map): MapViewState & {repeat: boolean} {
   const {lng, lat} = map.getCenter();
   return {
     // Longitude returned by getCenter can be outside of [-180, 180] when zooming near the anti meridian
@@ -117,18 +133,20 @@ export function getViewState(map) {
   };
 }
 
-function getMapboxVersion(map) {
+function getMapboxVersion(map: Map): {minor: number; major: number} {
   // parse mapbox version string
   let major = 0;
   let minor = 0;
-  if (map.version) {
-    [major, minor] = map.version.split('.').slice(0, 2).map(Number);
+  // @ts-ignore (2339) undefined property
+  const version: string = 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.props.userData;
+function getViewport(deck: Deck, map: Map, useMapboxProjection = true): WebMercatorViewport {
+  const {mapboxVersion} = deck.userData as UserData;
 
   return new WebMercatorViewport(
     Object.assign(
@@ -158,13 +176,16 @@ function getViewport(deck, map, useMapboxProjection = true) {
   );
 }
 
-function afterRender(deck, map) {
-  const {mapboxLayers, isExternal} = deck.props.userData;
+function afterRender(deck: Deck, map: Map): void {
+  const {mapboxLayers, isExternal} = deck.userData as UserData;
 
   if (isExternal) {
     // Draw non-Mapbox layers
     const mapboxLayerIds = Array.from(mapboxLayers, layer => layer.id);
-    const hasNonMapboxLayers = deck.props.layers.some(layer => !mapboxLayerIds.includes(layer.id));
+    const deckLayers = flatten(deck.props.layers, Boolean) as Layer[];
+    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;
@@ -186,10 +207,10 @@ function afterRender(deck, map) {
   }
 
   // End of render cycle, clear generated viewport
-  deck.props.userData.currentViewport = null;
+  (deck.userData as UserData).currentViewport = null;
 }
 
-function onMapMove(deck, map) {
+function onMapMove(deck: Deck, map: Map): void {
   deck.setProps({
     viewState: getViewState(map)
   });
@@ -199,14 +220,14 @@ function onMapMove(deck, map) {
   deck.needsRedraw({clearRedrawFlags: true});
 }
 
-function updateLayers(deck) {
-  if (deck.props.userData.isExternal) {
+function updateLayers(deck: Deck): void {
+  if ((deck.userData as UserData).isExternal) {
     return;
   }
 
-  const layers = [];
+  const layers: Layer[] = [];
   let layerIndex = 0;
-  deck.props.userData.mapboxLayers.forEach(deckLayer => {
+  (deck.userData as UserData).mapboxLayers.forEach(deckLayer => {
     const LayerType = deckLayer.props.type;
     const layer = new LayerType(deckLayer.props, {_offset: layerIndex++});
     layers.push(layer);

package/src/{mapbox-layer.js → mapbox-layer.ts}

@@ -1,8 +1,23 @@
 import {getDeckInstance, addLayer, removeLayer, updateLayer, drawLayer} from './deck-utils';
+import type {Map, CustomLayerInterface} from 'mapbox-gl';
+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 {
+  id: string;
+  type: 'custom';
+  renderingMode: '2d' | '3d';
+  map: Map | null;
+  deck: Deck | null;
+  props: MapboxLayerProps<LayerT>;
 
-export default class MapboxLayer {
   /* eslint-disable no-this-before-super */
-  constructor(props) {
+  constructor(props: MapboxLayerProps<LayerT>) {
     if (!props.id) {
       throw new Error('Layer must have an unique id');
     }
@@ -17,17 +32,19 @@ export default class MapboxLayer {
 
   /* Mapbox custom layer methods */
 
-  onAdd(map, gl) {
+  onAdd(map: Map, gl: WebGLRenderingContext): void {
     this.map = map;
     this.deck = getDeckInstance({map, gl, deck: this.props.deck});
     addLayer(this.deck, this);
   }
 
-  onRemove() {
-    removeLayer(this.deck, this);
+  onRemove(): void {
+    if (this.deck) {
+      removeLayer(this.deck, this);
+    }
   }
 
-  setProps(props) {
+  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
@@ -36,7 +53,7 @@ export default class MapboxLayer {
     }
   }
 
-  render(gl, matrix) {
-    drawLayer(this.deck, this.map, this);
+  render() {
+    drawLayer(this.deck!, this.map!, this);
   }
 }

package/src/mapbox-overlay.ts

@@ -1,24 +1,26 @@
-import {Deck} from '@deck.gl/core';
+import {Deck, assert} from '@deck.gl/core';
 import {getViewState} from './deck-utils';
 
 import type {Map, IControl, MapMouseEvent} from 'mapbox-gl';
+import type {MjolnirGestureEvent, MjolnirPointerEvent} from 'mjolnir.js';
+import type {DeckProps} from '@deck.gl/core';
 
 /**
  * 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: any;
-  private _deck: Deck;
+  private _props: DeckProps;
+  private _deck?: Deck;
   private _map?: Map;
   private _container?: HTMLDivElement;
 
-  constructor(props) {
+  constructor(props: DeckProps) {
     this._props = {...props};
   }
 
   /** Update (partial) props of the underlying Deck instance. */
-  setProps(props: any): void {
+  setProps(props: DeckProps): void {
     Object.assign(this._props, props);
 
     if ('viewState' in this._props) {
@@ -31,7 +33,7 @@ export default class MapboxOverlay implements IControl {
   }
 
   /** Called when the control is added to a map */
-  onAdd(map: Map) {
+  onAdd(map: Map): HTMLDivElement {
     this._map = map;
 
     /* global document */
@@ -62,7 +64,7 @@ export default class MapboxOverlay implements IControl {
   }
 
   /** Called when the control is removed from a map */
-  onRemove() {
+  onRemove(): void {
     const map = this._map;
 
     if (map) {
@@ -75,6 +77,7 @@ export default class MapboxOverlay implements IControl {
     }
 
     this._deck?.finalize();
+    this._deck = undefined;
     this._map = undefined;
     this._container = undefined;
   }
@@ -84,18 +87,23 @@ export default class MapboxOverlay implements IControl {
   }
 
   /** Forwards the Deck.pickObject method */
-  pickObject(params) {
-    return this._deck && this._deck.pickObject(params);
+  pickObject(params: Parameters<Deck['pickObject']>[0]): ReturnType<Deck['pickObject']> {
+    assert(this._deck);
+    return this._deck.pickObject(params);
   }
 
   /** Forwards the Deck.pickMultipleObjects method */
-  pickMultipleObjects(params) {
-    return this._deck && this._deck.pickMultipleObjects(params);
+  pickMultipleObjects(
+    params: Parameters<Deck['pickMultipleObjects']>[0]
+  ): ReturnType<Deck['pickMultipleObjects']> {
+    assert(this._deck);
+    return this._deck.pickMultipleObjects(params);
   }
 
   /** Forwards the Deck.pickObjects method */
-  pickObjects(params) {
-    return this._deck && this._deck.pickObjects(params);
+  pickObjects(params: Parameters<Deck['pickObjects']>[0]): ReturnType<Deck['pickObjects']> {
+    assert(this._deck);
+    return this._deck.pickObjects(params);
   }
 
   /** Remove from map and releases all resources */
@@ -105,7 +113,7 @@ export default class MapboxOverlay implements IControl {
     }
   }
 
-  _updateContainerSize = () => {
+  private _updateContainerSize = () => {
     if (this._map && this._container) {
       const {clientWidth, clientHeight} = this._map.getContainer();
       Object.assign(this._container.style, {
@@ -115,16 +123,17 @@ export default class MapboxOverlay implements IControl {
     }
   };
 
-  _updateViewState = () => {
+  private _updateViewState = () => {
     const deck = this._deck;
     if (deck) {
+      // @ts-ignore (2345) map is always defined if deck is
       deck.setProps({viewState: getViewState(this._map)});
       // Redraw immediately if view state has changed
-      deck.redraw(false);
+      deck.redraw();
     }
   };
 
-  _handleMouseEvent = (event: MapMouseEvent) => {
+  private _handleMouseEvent = (event: MapMouseEvent) => {
     const deck = this._deck;
     if (!deck) {
       return;
@@ -143,29 +152,26 @@ export default class MapboxOverlay implements IControl {
 
     switch (event.type) {
       case 'click':
-        // Hack: because we do not listen to pointer down, perform picking now
-        deck._lastPointerDownInfo = deck.pickObject({
-          ...mockEvent.offsetCenter,
-          radius: deck.props.pickingRadius
-        });
         mockEvent.tapCount = 1;
-        deck._onEvent(mockEvent);
+        // Hack: because we do not listen to pointer down, perform picking now
+        deck._onPointerDown(mockEvent as MjolnirGestureEvent);
+        deck._onEvent(mockEvent as MjolnirGestureEvent);
         break;
 
       case 'dblclick':
         mockEvent.type = 'click';
         mockEvent.tapCount = 2;
-        deck._onEvent(mockEvent);
+        deck._onEvent(mockEvent as MjolnirGestureEvent);
         break;
 
       case 'mousemove':
         mockEvent.type = 'pointermove';
-        deck._onPointerMove(mockEvent);
+        deck._onPointerMove(mockEvent as MjolnirPointerEvent);
         break;
 
       case 'mouseout':
         mockEvent.type = 'pointerleave';
-        deck._onPointerMove(mockEvent);
+        deck._onPointerMove(mockEvent as MjolnirPointerEvent);
         break;
 
       default:

package/typed/deck-utils.d.ts

@@ -0,0 +1,19 @@
+import { Deck } from '@deck.gl/core/typed';
+import type { MapViewState } from '@deck.gl/core/typed';
+import type MapboxLayer from './mapbox-layer';
+import type { Map } from 'mapbox-gl';
+export declare function getDeckInstance({ map, gl, deck }: {
+    map: Map & {
+        __deck?: Deck | null;
+    };
+    gl: WebGLRenderingContext;
+    deck?: Deck;
+}): Deck;
+export declare function addLayer(deck: Deck, layer: MapboxLayer<any>): void;
+export declare function removeLayer(deck: Deck, layer: MapboxLayer<any>): void;
+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;
+};
+//# sourceMappingURL=deck-utils.d.ts.map

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

@@ -0,0 +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"}

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

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

package/typed/index.d.ts.map

@@ -0,0 +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"}

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

@@ -0,0 +1,21 @@
+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;
+    type: 'custom';
+    renderingMode: '2d' | '3d';
+    map: Map | null;
+    deck: Deck | null;
+    props: MapboxLayerProps<LayerT>;
+    constructor(props: MapboxLayerProps<LayerT>);
+    onAdd(map: Map, gl: WebGLRenderingContext): void;
+    onRemove(): void;
+    setProps(props: MapboxLayerProps<LayerT>): void;
+    render(): void;
+}
+//# sourceMappingURL=mapbox-layer.d.ts.map