@deck.gl/mapbox 8.8.7 → 8.9.0-alpha.2

package/src/deck-utils.ts

@@ -3,13 +3,19 @@ import type {DeckProps, MapViewState, Layer} from '@deck.gl/core';
 import type MapboxLayer from './mapbox-layer';
 import type {Map} from 'mapbox-gl';
 
+import {lngLatToWorld, unitsPerMeter} from '@math.gl/web-mercator';
+
 type UserData = {
   isExternal: boolean;
   currentViewport?: WebMercatorViewport | null;
   mapboxLayers: Set<MapboxLayer<any>>;
-  mapboxVersion: {minor: number; major: number};
+  // mapboxVersion: {minor: number; major: number};
 };
 
+// Mercator constants
+const TILE_SIZE = 512;
+const DEGREES_TO_RADIANS = Math.PI / 180;
+
 export function getDeckInstance({
   map,
   gl,
@@ -28,11 +34,13 @@ export function getDeckInstance({
 
   const deckProps: DeckProps = {
     useDevicePixels: true,
-    _customRender: (reason: string) => {
+    _customRender: () => {
       map.triggerRepaint();
       // customRender may be subscribed by DeckGL React component to update child props
       // make sure it is still called
-      customRender?.(reason);
+      // Hack - do not pass a redraw reason here to prevent the React component from clearing the context
+      // Rerender will be triggered by MapboxLayer's render()
+      customRender?.('');
     },
     // TODO: import these defaults from a single source of truth
     parameters: {
@@ -77,7 +85,7 @@ export function getDeckInstance({
   }
 
   (deckInstance.userData as UserData).mapboxLayers = new Set();
-  (deckInstance.userData as UserData).mapboxVersion = getMapboxVersion(map);
+  // (deckInstance.userData as UserData).mapboxVersion = getMapboxVersion(map);
   map.__deck = deckInstance;
   map.on('render', () => {
     if (deckInstance.isInitialized) afterRender(deckInstance, map);
@@ -133,7 +141,16 @@ export function getViewState(map: Map): MapViewState & {
   };
 } {
   const {lng, lat} = map.getCenter();
-  return {
+
+  const viewState: MapViewState & {
+    repeat: boolean;
+    padding: {
+      left: number;
+      right: number;
+      top: number;
+      bottom: number;
+    };
+  } = {
     // 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,
@@ -144,49 +161,81 @@ export function getViewState(map: Map): MapViewState & {
     padding: map.getPadding(),
     repeat: map.getRenderWorldCopies()
   };
+
+  if (map.getTerrain?.()) {
+    // When the base map has terrain, we need to target the camera at the terrain surface
+    centerCameraOnTerrain(map, viewState);
+  }
+
+  return viewState;
 }
 
-function getMapboxVersion(map: Map): {minor: number; major: number} {
-  // parse mapbox version string
-  let major = 0;
-  let minor = 0;
-  // @ts-ignore (2339) undefined property
-  const version: string = map.version;
-  if (version) {
-    [major, minor] = version.split('.').slice(0, 2).map(Number);
+function centerCameraOnTerrain(map: Map, viewState: MapViewState) {
+  if (map.getFreeCameraOptions) {
+    // mapbox-gl v2
+    const {position} = map.getFreeCameraOptions();
+    if (!position || position.z === undefined) {
+      return;
+    }
+
+    // @ts-ignore transform is not typed
+    const height = map.transform.height;
+    const {longitude, latitude, pitch} = viewState;
+
+    // Convert mapbox mercator coordinate to deck common space
+    const cameraX = position.x * TILE_SIZE;
+    const cameraY = (1 - position.y) * TILE_SIZE;
+    const cameraZ = position.z * TILE_SIZE;
+
+    // Mapbox manipulates zoom in terrain mode, see discussion here: https://github.com/mapbox/mapbox-gl-js/issues/12040
+    const center = lngLatToWorld([longitude, latitude]);
+    const dx = cameraX - center[0];
+    const dy = cameraY - center[1];
+    const cameraToCenterDistanceGround = Math.sqrt(dx * dx + dy * dy);
+
+    const pitchRadians = pitch! * DEGREES_TO_RADIANS;
+    const altitudePixels = 1.5 * height;
+    const scale = (altitudePixels * Math.sin(pitchRadians)) / cameraToCenterDistanceGround;
+    viewState.zoom = Math.log2(scale);
+
+    const cameraZFromSurface = (altitudePixels * Math.cos(pitchRadians)) / scale;
+    const surfaceElevation = cameraZ - cameraZFromSurface;
+    viewState.position = [0, 0, surfaceElevation / unitsPerMeter(latitude)];
+  }
+  // @ts-ignore transform is not typed
+  else if (typeof map.transform.elevation === 'number') {
+    // maplibre-gl
+    // @ts-ignore transform is not typed
+    viewState.position = [0, 0, map.transform.elevation];
   }
-  return {major, minor};
 }
 
+// function getMapboxVersion(map: Map): {minor: number; major: number} {
+//   // parse mapbox version string
+//   let major = 0;
+//   let minor = 0;
+//   // @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: Deck, map: Map, useMapboxProjection = true): WebMercatorViewport {
-  const {mapboxVersion} = deck.userData as 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
-          }
-    )
-  );
+  return new WebMercatorViewport({
+    id: 'mapbox',
+    x: 0,
+    y: 0,
+    width: deck.width,
+    height: deck.height,
+    ...getViewState(map),
+    nearZMultiplier: useMapboxProjection
+      ? // match mapbox-gl@>=1.3.0's projection matrix
+        0.02
+      : // use deck.gl's own default
+        0.1
+  });
 }
 
 function afterRender(deck: Deck, map: Map): void {

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,CAkEP;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,CAqB7E;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"}
+{"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;AAenC,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,CAoEP;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,CAqB7E;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,CA6BA"}

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.js

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

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.js

@@ -0,0 +1,139 @@
+import { Deck, assert } from '@deck.gl/core';
+import { getViewState } from './deck-utils';
+/**
+ * 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 {
+    constructor(props) {
+        this._updateContainerSize = () => {
+            if (this._map && this._container) {
+                const { clientWidth, clientHeight } = this._map.getContainer();
+                Object.assign(this._container.style, {
+                    width: `${clientWidth}px`,
+                    height: `${clientHeight}px`
+                });
+            }
+        };
+        this._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();
+            }
+        };
+        this._handleMouseEvent = (event) => {
+            const deck = this._deck;
+            if (!deck) {
+                return;
+            }
+            const mockEvent = {
+                type: event.type,
+                offsetCenter: event.point,
+                srcEvent: event
+            };
+            switch (event.type) {
+                case 'click':
+                    mockEvent.tapCount = 1;
+                    // Hack: because we do not listen to pointer down, perform picking now
+                    deck._onPointerDown(mockEvent);
+                    deck._onEvent(mockEvent);
+                    break;
+                case 'dblclick':
+                    mockEvent.type = 'click';
+                    mockEvent.tapCount = 2;
+                    deck._onEvent(mockEvent);
+                    break;
+                case 'mousemove':
+                    mockEvent.type = 'pointermove';
+                    deck._onPointerMove(mockEvent);
+                    break;
+                case 'mouseout':
+                    mockEvent.type = 'pointerleave';
+                    deck._onPointerMove(mockEvent);
+                    break;
+                default:
+                    return;
+            }
+        };
+        this._props = { ...props };
+    }
+    /** Update (partial) props of the underlying Deck instance. */
+    setProps(props) {
+        Object.assign(this._props, props);
+        if ('viewState' in this._props) {
+            delete this._props.viewState;
+        }
+        if (this._deck) {
+            this._deck.setProps(this._props);
+        }
+    }
+    /** Called when the control is added to a map */
+    onAdd(map) {
+        this._map = map;
+        /* global document */
+        const container = document.createElement('div');
+        Object.assign(container.style, {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            pointerEvents: 'none'
+        });
+        this._container = container;
+        this._deck = new Deck({
+            ...this._props,
+            parent: container,
+            viewState: getViewState(map)
+        });
+        map.on('resize', this._updateContainerSize);
+        map.on('render', this._updateViewState);
+        map.on('mousemove', this._handleMouseEvent);
+        map.on('mouseout', this._handleMouseEvent);
+        map.on('click', this._handleMouseEvent);
+        map.on('dblclick', this._handleMouseEvent);
+        this._updateContainerSize();
+        return container;
+    }
+    /** Called when the control is removed from a map */
+    onRemove() {
+        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);
+        }
+        this._deck?.finalize();
+        this._deck = undefined;
+        this._map = undefined;
+        this._container = undefined;
+    }
+    getDefaultPosition() {
+        return 'top-left';
+    }
+    /** Forwards the Deck.pickObject method */
+    pickObject(params) {
+        assert(this._deck);
+        return this._deck.pickObject(params);
+    }
+    /** Forwards the Deck.pickMultipleObjects method */
+    pickMultipleObjects(params) {
+        assert(this._deck);
+        return this._deck.pickMultipleObjects(params);
+    }
+    /** Forwards the Deck.pickObjects method */
+    pickObjects(params) {
+        assert(this._deck);
+        return this._deck.pickObjects(params);
+    }
+    /** Remove from map and releases all resources */
+    finalize() {
+        if (this._map) {
+            this._map.removeControl(this);
+        }
+    }
+}