fix crash when renderSubLayers returns array

modules/core/src/index.js

@@ -85,7 +85,7 @@ export {fp64LowPart} from './utils/math-utils';
 export {default as Tesselator} from './utils/tesselator'; // Export? move to luma.gl or math.gl?
 
 // Experimental utilities
-export {fillArray as _fillArray} from './utils/flatten'; // Export? move to luma.gl or math.gl?
+export {fillArray as _fillArray, flatten as _flatten} from './utils/flatten'; // Export? move to luma.gl or math.gl?
 export {count as _count} from './utils/count';
 export {default as _memoize} from './utils/memoize';
 export {mergeShaders as _mergeShaders} from './utils/shader';

modules/geo-layers/src/tile-layer/tile-layer.js

@@ -1,4 +1,4 @@
-import {CompositeLayer} from '@deck.gl/core';
+import {CompositeLayer, _flatten as flatten} from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
 
 import Tileset2D, {STRATEGY_DEFAULT} from './tileset-2d';
@@ -130,16 +130,17 @@ export default class TileLayer extends CompositeLayer {
       const isVisible = visible && tile.isVisible;
       // cache the rendered layer in the tile
       if (!tile.layer) {
-        tile.layer = renderSubLayers(
+        const layers = renderSubLayers(
           Object.assign({}, this.props, {
             id: `${this.id}-${tile.x}-${tile.y}-${tile.z}`,
             data: tile.data,
             visible: isVisible,
             tile
           })
         );
-      } else if (tile.layer.props.visible !== isVisible) {
-        tile.layer = tile.layer.clone({visible: isVisible});
+        tile.layer = flatten(layers, Boolean);
+      } else if (tile.layer[0] && tile.layer[0].props.visible !== isVisible) {
+        tile.layer = tile.layer.map(layer => layer.clone({visible: isVisible}));
       }
       return tile.layer;
     });

test/modules/geo-layers/tile-layer/tile-layer.spec.js

@@ -19,6 +19,8 @@
 // THE SOFTWARE.
 
 import test from 'tape-catch';
+import {WebMercatorViewport} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
 import {generateLayerTests, testLayer} from '@deck.gl/test-utils';
 import {TileLayer} from '@deck.gl/geo-layers';
 
@@ -31,3 +33,102 @@ test('TileLayer', t => {
   testLayer({Layer: TileLayer, testCases, onError: t.notOk});
   t.end();
 });
+
+test('TileLayer', t => {
+  let getTileDataCalled = 0;
+  const getTileData = () => {
+    getTileDataCalled++;
+    return [];
+  };
+
+  const renderSubLayers = props => {
+    return new ScatterplotLayer(props);
+  };
+  const renderNestedSubLayers = props => {
+    return [
+      new ScatterplotLayer(props, {id: `${props.id}-fill`, filled: true, stroked: false}),
+      new ScatterplotLayer(props, {id: `${props.id}-stroke`, filled: false, stroked: true})
+    ];
+  };
+
+  const testViewport1 = new WebMercatorViewport({
+    width: 100,
+    height: 100,
+    longitude: 0,
+    latitude: 60,
+    zoom: 2
+  });
+  const testViewport2 = new WebMercatorViewport({
+    width: 100,
+    height: 100,
+    longitude: -90,
+    latitude: -60,
+    zoom: 3
+  });
+
+  const testCases = [
+    {
+      props: {
+        getTileData,
+        renderSubLayers
+      },
+      onAfterUpdate: ({layer, subLayers}) => {
+        t.is(subLayers.length, 2, 'Rendered sublayers');
+        t.is(getTileDataCalled, 2, 'Fetched tile data');
+        t.notOk(layer.isLoaded, 'Layer is not loaded');
+        t.ok(subLayers.every(l => l.props.visible), 'Sublayers at z=2 are visible');
+      }
+    },
+    {
+      viewport: testViewport2,
+      onAfterUpdate: ({subLayers}) => {
+        t.is(subLayers.length, 4, 'Rendered new sublayers');
+        t.is(getTileDataCalled, 4, 'Fetched tile data');
+        t.ok(
+          subLayers.filter(l => l.props.tile.z === 3).every(l => l.props.visible),
+          'Sublayers at z=3 are visible'
+        );
+      }
+    },
+    {
+      viewport: testViewport1,
+      onAfterUpdate: ({subLayers}) => {
+        t.is(subLayers.length, 4, 'Rendered cached sublayers');
+        t.is(getTileDataCalled, 4, 'Used cached data');
+        t.ok(
+          subLayers.filter(l => l.props.tile.z === 3).every(l => !l.props.visible),
+          'Sublayers at z=3 are hidden'
+        );
+      }
+    },
+    {
+      updateProps: {
+        renderSubLayers: renderNestedSubLayers
+      },
+      onAfterUpdate: ({subLayers}) => {
+        t.is(subLayers.length, 4, 'Should rendered cached sublayers without prop change');
+      }
+    },
+    {
+      updateProps: {
+        minWidthPixels: 1
+      },
+      onAfterUpdate: ({subLayers}) => {
+        t.is(subLayers.length, 8, 'Invalidated cached sublayers with prop change');
+      }
+    },
+    {
+      updateProps: {
+        updateTriggers: {
+          getTileData: 1
+        }
+      },
+      onAfterUpdate: ({subLayers}) => {
+        t.is(getTileDataCalled, 6, 'Refetched tile data');
+        t.is(subLayers.length, 4, 'Invalidated cached sublayers with prop change');
+      }
+    }
+  ];
+  testLayer({Layer: TileLayer, viewport: testViewport1, testCases, onError: t.notOk});
+  t.end();
+});