[MapboxLayer] integrate mapbox-gl's near plane fix (#3490)

modules/mapbox/src/deck-utils.js

@@ -53,6 +53,7 @@ export function getDeckInstance({map, gl, deck}) {
       map.__deck = null;
     });
   }
+  deck.props.userData.mapboxVersion = getMapboxVersion(map);
   map.__deck = deck;
   map.on('render', () => afterRender(deck, map));
 
@@ -101,7 +102,22 @@ function getViewState(map) {
   };
 }
 
+function getMapboxVersion(map) {
+  // parse mapbox version string
+  let major = 0;
+  let minor = 0;
+  if (map.version) {
+    [major, minor] = map.version
+      .split('.')
+      .slice(0, 2)
+      .map(Number);
+  }
+  return {major, minor};
+}
+
 function getViewport(deck, map, useMapboxProjection = true) {
+  const {mapboxVersion} = deck.props.userData;
+
   return new WebMercatorViewport(
     Object.assign(
       {
@@ -111,12 +127,16 @@ function getViewport(deck, map, useMapboxProjection = true) {
         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
+            // 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),
+            farZMultiplier: 1.01
           }
         : {
             // use deck.gl's projection matrix

test/modules/mapbox/mapbox-layer.spec.js

@@ -8,6 +8,7 @@ import {gl} from '@deck.gl/test-utils';
 class MockMapboxMap {
   constructor(opts) {
     this.opts = opts;
+    this.version = opts.version;
     this._callbacks = {};
     this._layers = {};
   }
@@ -71,6 +72,7 @@ test('MapboxLayer#onAdd, onRemove, setProps', t => {
   );
 
   const map = new MockMapboxMap({
+    version: '1.10.0-beta.1',
     center: {lng: -122.45, lat: 37.78},
     zoom: 12
   });
@@ -87,6 +89,7 @@ test('MapboxLayer#onAdd, onRemove, setProps', t => {
     ),
     'Layer is added to deck'
   );
+  t.deepEqual(deck.props.userData.mapboxVersion, {major: 1, minor: 10}, 'Mapbox version is parsed');
 
   t.deepEqual(
     deck.props.viewState,
@@ -157,6 +160,7 @@ test('MapboxLayer#external Deck', t => {
   deck.props.onLoad = () => {
     map.addLayer(layer);
     t.is(layer.deck, deck, 'Used external Deck instance');
+    t.ok(deck.props.userData.mapboxVersion, 'Mapbox version is parsed');
 
     map.emit('render');
     t.pass('Map render does not throw');