@deck.gl/mapbox 9.1.0-beta.1 → 9.1.0-beta.3

package/src/mapbox-overlay.ts

@@ -3,9 +3,15 @@
 // Copyright (c) vis.gl contributors
 
 import {Deck, assert} from '@deck.gl/core';
-import {getViewState, getDeckInstance, removeDeckInstance, getInterleavedProps} from './deck-utils';
-
-import type {Map, IControl, MapMouseEvent} from 'mapbox-gl';
+import {
+  getViewState,
+  getDefaultView,
+  getDeckInstance,
+  removeDeckInstance,
+  getDefaultParameters
+} from './deck-utils';
+
+import type {Map, IControl, MapMouseEvent, ControlPosition} from './types';
 import type {MjolnirGestureEvent, MjolnirPointerEvent} from 'mjolnir.js';
 import type {DeckProps} from '@deck.gl/core';
 import {log} from '@deck.gl/core';
@@ -26,7 +32,6 @@ export type MapboxOverlayProps = Omit<
 > & {
   interleaved?: boolean;
 };
-type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
 /**
  * Implements Mapbox [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol) interface
@@ -34,7 +39,7 @@ type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  */
 export default class MapboxOverlay implements IControl {
   private _props: MapboxOverlayProps;
-  private _deck?: Deck;
+  private _deck?: Deck<any>;
   private _map?: Map;
   private _container?: HTMLDivElement;
   private _interleaved: boolean;
@@ -54,8 +59,14 @@ export default class MapboxOverlay implements IControl {
 
     Object.assign(this._props, props);
 
-    if (this._deck) {
-      this._deck.setProps(this._interleaved ? getInterleavedProps(this._props) : this._props);
+    if (this._deck && this._map) {
+      this._deck.setProps({
+        ...this._props,
+        parameters: {
+          ...getDefaultParameters(this._map, this._interleaved),
+          ...this._props.parameters
+        }
+      });
     }
   }
 
@@ -77,9 +88,11 @@ export default class MapboxOverlay implements IControl {
     });
     this._container = container;
 
-    this._deck = new Deck({
+    this._deck = new Deck<any>({
       ...this._props,
       parent: container,
+      parameters: {...getDefaultParameters(map, false), ...this._props.parameters},
+      views: this._props.views || getDefaultView(map),
       viewState: getViewState(map)
     });
 
@@ -213,9 +226,12 @@ export default class MapboxOverlay implements IControl {
 
   private _updateViewState = () => {
     const deck = this._deck;
-    if (deck) {
-      // @ts-ignore (2345) map is always defined if deck is
-      deck.setProps({viewState: getViewState(this._map)});
+    const map = this._map;
+    if (deck && map) {
+      deck.setProps({
+        views: this._props.views || getDefaultView(map),
+        viewState: getViewState(map)
+      });
       // Redraw immediately if view state has changed
       if (deck.isInitialized) {
         deck.redraw();
@@ -256,7 +272,7 @@ export default class MapboxOverlay implements IControl {
 
     switch (mockEvent.type) {
       case 'mousedown':
-        deck._onPointerDown(mockEvent as MjolnirPointerEvent);
+        deck._onPointerDown(mockEvent as unknown as MjolnirPointerEvent);
         this._lastMouseDownPoint = {
           ...event.point,
           clientX: event.originalEvent.clientX,
@@ -266,38 +282,38 @@ export default class MapboxOverlay implements IControl {
 
       case 'dragstart':
         mockEvent.type = 'panstart';
-        deck._onEvent(mockEvent as MjolnirGestureEvent);
+        deck._onEvent(mockEvent as unknown as MjolnirGestureEvent);
         break;
 
       case 'drag':
         mockEvent.type = 'panmove';
-        deck._onEvent(mockEvent as MjolnirGestureEvent);
+        deck._onEvent(mockEvent as unknown as MjolnirGestureEvent);
         break;
 
       case 'dragend':
         mockEvent.type = 'panend';
-        deck._onEvent(mockEvent as MjolnirGestureEvent);
+        deck._onEvent(mockEvent as unknown as MjolnirGestureEvent);
         break;
 
       case 'click':
         mockEvent.tapCount = 1;
-        deck._onEvent(mockEvent as MjolnirGestureEvent);
+        deck._onEvent(mockEvent as unknown as MjolnirGestureEvent);
         break;
 
       case 'dblclick':
         mockEvent.type = 'click';
         mockEvent.tapCount = 2;
-        deck._onEvent(mockEvent as MjolnirGestureEvent);
+        deck._onEvent(mockEvent as unknown as MjolnirGestureEvent);
         break;
 
       case 'mousemove':
         mockEvent.type = 'pointermove';
-        deck._onPointerMove(mockEvent as MjolnirPointerEvent);
+        deck._onPointerMove(mockEvent as unknown as MjolnirPointerEvent);
         break;
 
       case 'mouseout':
         mockEvent.type = 'pointerleave';
-        deck._onPointerMove(mockEvent as MjolnirPointerEvent);
+        deck._onPointerMove(mockEvent as unknown as MjolnirPointerEvent);
         break;
 
       default:

package/src/resolve-layers.ts

@@ -6,7 +6,7 @@ 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';
+import type {Map} from './types';
 
 const UNDEFINED_BEFORE_ID = '__UNDEFINED__';
 

package/src/types.ts

@@ -0,0 +1,125 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// Types that offer basic interface compatible with mapbox-gl and maplibre-gl
+
+type Listener = (event?: any) => any;
+
+export interface Evented {
+  on(type: string, listener: Listener);
+
+  off(type: string, listener?: Listener);
+
+  once(type: string, listener: Listener);
+}
+
+export type Point = {
+  x: number;
+  y: number;
+};
+
+export type LngLat = {
+  lng: number;
+  lat: number;
+};
+
+export type PaddingOptions = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+export type FreeCameraOptions = {
+  position?: {
+    x: number;
+    y: number;
+    z: number;
+  };
+};
+
+export interface IControl {
+  onAdd(map: Map): HTMLElement;
+
+  onRemove(map: Map): void;
+
+  getDefaultPosition?: (() => string) | undefined;
+}
+
+export type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export interface CustomLayerInterface {
+  id: string;
+  type: 'custom';
+  renderingMode?: '2d' | '3d';
+
+  onRemove?(map: Map, gl: WebGLRenderingContext): void;
+  onAdd?(map: Map, gl: WebGLRenderingContext): void;
+
+  prerender?(gl: WebGLRenderingContext, matrix: number[]): void;
+  render(gl: WebGLRenderingContext, matrix: number[]): void;
+}
+
+export type MapMouseEvent = {
+  type: string;
+  target: Map;
+  originalEvent: MouseEvent;
+  point: Point;
+  lngLat: LngLat;
+};
+
+/**
+ * A minimal type that represents Mapbox.Map or Maplibre.Map
+ * Only losely typed for compatibility
+ */
+export interface Map extends Evented {
+  addControl(control: IControl, position?: ControlPosition);
+
+  removeControl(control: IControl);
+
+  hasControl(control: IControl): boolean;
+
+  resize(): this;
+
+  isStyleLoaded(): boolean | void;
+
+  addSource(id: string, source: any);
+
+  removeSource(id: string): this;
+
+  getSource(id: string): any;
+
+  addLayer(layer: any, before?: string);
+
+  moveLayer(id: string, beforeId?: string);
+
+  removeLayer(id: string);
+
+  getLayer(id: string): any;
+
+  getContainer(): HTMLElement;
+
+  getCanvas(): HTMLCanvasElement;
+
+  getCenter(): LngLat;
+  getZoom(): number;
+  getBearing(): number;
+  getPitch(): number;
+  getPadding(): PaddingOptions;
+  getRenderWorldCopies(): boolean;
+
+  // mapbox v2+, maplibre v3+
+  getTerrain?(): any;
+  // mapbox v2+, maplibre v5+
+  getProjection?(): any;
+  // mapbox v2+
+  getFreeCameraOptions?(): FreeCameraOptions;
+
+  // This is not a public property
+  transform?: any;
+
+  remove(): void;
+
+  triggerRepaint(): void;
+}