Merge 4e84f80 into 9b8e6e4

modules/core/src/lib/deck.js

@@ -207,7 +207,7 @@ export default class Deck {
 
     // We need to overwrite CSS style width and height with actual, numeric values
     const newProps = Object.assign({}, props, {
-      views: this._getViews(props),
+      views: this._getViews(this.props),
       width: this.width,
       height: this.height
     });

modules/mapbox/src/deck-utils.js

@@ -1,4 +1,4 @@
-import {Deck} from '@deck.gl/core';
+import {Deck, WebMercatorViewport} from '@deck.gl/core';
 
 export function getDeckInstance({map, gl, deck}) {
   // Only create one deck instance per context
@@ -39,10 +39,15 @@ export function getDeckInstance({map, gl, deck}) {
     Object.assign(deckProps, {
       gl,
       width: false,
-      height: false
+      height: false,
+      viewState: getViewState(map)
     });
     deck = new Deck(deckProps);
 
+    // If deck is externally provided (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('remove', () => {
       deck.finalize();
       map.__deck = null;
@@ -68,39 +73,64 @@ export function updateLayer(deck, layer) {
   updateLayers(deck);
 }
 
-export function drawLayer(deck, layer) {
+export function drawLayer(deck, map, layer) {
+  let {currentViewport} = deck.props.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._drawLayers('mapbox-repaint', {
+    viewports: [currentViewport],
     // TODO - accept layerFilter in drawLayers' renderOptions
     layers: getLayers(deck, deckLayer => shouldDrawLayer(layer.id, deckLayer)),
     clearCanvas: false
   });
 }
 
-export function getViewState(map, extraProps) {
+function getViewState(map) {
   const {lng, lat} = map.getCenter();
-  return Object.assign(
-    {
-      longitude: lng,
-      latitude: lat,
-      zoom: map.getZoom(),
-      bearing: map.getBearing(),
-      pitch: map.getPitch()
-    },
-    extraProps
+  return {
+    longitude: lng,
+    latitude: lat,
+    zoom: map.getZoom(),
+    bearing: map.getBearing(),
+    pitch: map.getPitch()
+  };
+}
+
+function getViewport(deck, map, useMapboxProjection = true) {
+  return new WebMercatorViewport(
+    Object.assign(
+      {
+        x: 0,
+        y: 0,
+        width: deck.width,
+        height: deck.height
+      },
+      getViewState(map),
+      // https://github.com/mapbox/mapbox-gl-js/issues/7573
+      useMapboxProjection
+        ? {
+            // match mapbox's projection matrix
+            nearZMultiplier: deck.height ? 1 / deck.height : 1,
+            farZMultiplier: 1
+          }
+        : {
+            // use deck.gl's projection matrix
+            nearZMultiplier: 0.1,
+            farZMultiplier: 10
+          }
+    )
   );
 }
 
 function afterRender(deck, map) {
   const {mapboxLayers, isExternal} = deck.props.userData;
 
   if (isExternal) {
-    // Update viewState
-    const viewState = getViewState(map, {
-      nearZMultiplier: 0.1,
-      farZMultiplier: 10
-    });
-    deck.setProps({viewState});
-
     // Draw non-Mapbox layers
     const mapboxLayerIds = Array.from(mapboxLayers, layer => layer.id);
     const layers = getLayers(deck, deckLayer => {
@@ -113,12 +143,24 @@ function afterRender(deck, map) {
     });
     if (layers.length > 0) {
       deck._drawLayers('mapbox-repaint', {
+        viewports: [getViewport(deck, map, false)],
         layers,
         clearCanvas: false
       });
     }
   }
 
+  // End of render cycle, clear generated viewport
+  deck.props.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});
 }
 

modules/mapbox/src/mapbox-layer.js

@@ -1,11 +1,4 @@
-import {
-  getDeckInstance,
-  addLayer,
-  removeLayer,
-  updateLayer,
-  drawLayer,
-  getViewState
-} from './deck-utils';
+import {getDeckInstance, addLayer, removeLayer, updateLayer, drawLayer} from './deck-utils';
 
 export default class MapboxLayer {
   /* eslint-disable no-this-before-super */
@@ -44,19 +37,6 @@ export default class MapboxLayer {
   }
 
   render(gl, matrix) {
-    this.deck.setProps({
-      viewState: this._getViewState()
-    });
-    drawLayer(this.deck, this);
-  }
-
-  /* Private API */
-
-  _getViewState() {
-    const {map, deck} = this;
-    return getViewState(map, {
-      nearZMultiplier: deck.height ? 1 / deck.height : 1,
-      farZMultiplier: 1
-    });
+    drawLayer(this.deck, this.map, this);
   }
 }

test/apps/mapbox-layers/layers.js

@@ -22,7 +22,7 @@ export const deckPoiLayer = {
   autoHighlight: true,
   radiusMinPixels: 0.25,
   getPosition: d => d.coordinates,
-  getColor: [255, 180],
+  getFillColor: [255, 180],
   getRadius: 10
 };
 
@@ -44,5 +44,5 @@ export const deckRouteLayer = {
   getTargetPosition: d => d[1],
   getSourceColor: [0, 128, 255],
   getTargetColor: [255, 0, 128],
-  getStrokeWidth: 4
+  getWidth: 4
 };

test/apps/mapbox-layers/package.json

@@ -11,7 +11,7 @@
     "deck.gl": "^6.2.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
-    "react-map-gl": "^4.0.0-beta"
+    "react-map-gl": "^4.1.2"
   },
   "devDependencies": {
     "buble": "^0.19.3",