Add initial capability to show infovis layers in layer-browser (visgl…

…#1210)
sdob · Dec 10, 2017 · 91b22e7 · 91b22e7
1 parent 5828904
commit 91b22e7
Showing 8 changed files with 188 additions and 149 deletions.
diff --git a/examples/layer-browser/src/app.js b/examples/layer-browser/src/app.js
@@ -1,29 +1,32 @@
 /* global window, document */
 
+// deck.gl ES6 components
 import {
-  // COORDINATE_SYSTEM,
+  COORDINATE_SYSTEM,
   WebMercatorViewport,
   experimental
 } from 'deck.gl';
 
- // deck.gl react components
-import DeckGL from 'deck.gl';
-
 const {
-  FirstPersonViewport,
   MapState,
-  ReflectionEffect,
-  ViewportController
+  OrbitState,
+  FirstPersonViewport,
+  OrbitViewport,
+  ReflectionEffect
 } = experimental;
 
+ // deck.gl react components
+import DeckGL from 'deck.gl';
+const {ViewportController} = experimental;
+
 import React, {PureComponent} from 'react';
 import ReactDOM from 'react-dom';
 import autobind from 'react-autobind';
 
 import {StaticMap} from 'react-map-gl';
 import {FPSStats} from 'react-stats';
 
-import {Matrix4} from 'luma.gl';
+import {Matrix4} from 'math.gl';
 
 import LayerInfo from './components/layer-info';
 import LayerSelector from './components/layer-selector';
@@ -68,22 +71,30 @@ class App extends PureComponent {
         pitch: 0,
         bearing: 0
       },
+      orbitViewState: {
+        lookAt: [0, 0, 0],
+        distance: 3,
+        rotationX: -30,
+        rotationOrbit: 30,
+        orbitAxis: 'Y',
+        fov: 50,
+        minDistance: 1,
+        maxDistance: 20
+      },
       activeExamples: {
         ScatterplotLayer: true
       },
       settings: {
+        infovis: false,
         multiview: false,
         useDevicePixels: true,
         pickingRadius: 0,
         drawPickingColors: false,
 
-        separation: 0
-        // the rotation controls works only for layers in
-        // meter offset projection mode. They are commented out
-        // here since layer browser currently only have one layer
-        // in this mode, and that layer's data is rotation symmetrical
-        // rotationZ: 0,
-        // rotationX: 0
+        // Model matrix manipulation
+        separation: 0,
+        rotationZ: 0,
+        rotationX: 0
 
         // immutable: false,
         // Effects are experimental for now. Will be enabled in the future
@@ -197,38 +208,46 @@ class App extends PureComponent {
   /* eslint-enable max-depth */
 
   _getModelMatrix(index, coordinateSystem) {
-    // the rotation controls works only for layers in
-    // meter offset projection mode. They are commented out
-    // here since layer browser currently only have one layer
-    // in this mode.
     const {settings: {separation}} = this.state;
     const modelMatrix = new Matrix4().translate([0, 0, 1000 * index * separation]);
 
-    // if (coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {
-    //   const {settings: {rotationZ, rotationX}} = this.state;
-    //   modelMatrix.rotateZ(index * rotationZ * Math.PI);
-    //   modelMatrix.rotateX(index * rotationX * Math.PI);
-    // }
+    switch (coordinateSystem) {
+    case COORDINATE_SYSTEM.METER_OFFSETS:
+    case COORDINATE_SYSTEM.IDENTITY:
+      const {settings: {rotationZ, rotationX}} = this.state;
+      modelMatrix.rotateZ(index * rotationZ * Math.PI);
+      modelMatrix.rotateX(index * rotationX * Math.PI);
+      break;
+    default:
+      // Rotations don't work well for layers in lng lat coordinates
+      // since the origin is far away.
+      // We could rotate around current view point...
+    }
 
     return modelMatrix;
   }
 
-  _renderNoTokenWarning() {
-    /* eslint-disable max-len */
-    return (
-      <div id="no-token-warning">
-        <h3>No Mapbox access token found.</h3>
-        Read <a href="http://uber.github.io/deck.gl/#/documentation/overview/getting-started#note-on-map-tokens-">"Note on Map Tokens"</a> for information on setting up your basemap.
-      </div>
-    );
-    /* eslint-disable max-len */
-  }
-
   _getViewports() {
-    const {width, height, mapViewState, settings: {multiview}} = this.state;
+    const {
+      width, height, mapViewState, orbitViewState,
+      settings: {infovis, multiview}
+    } = this.state;
+
+    if (infovis) {
+      return [
+        new OrbitViewport({
+          id: 'infovis',
+          ...orbitViewState,
+          width,
+          height
+        })
+      ];
+    }
+
     return [
       new WebMercatorViewport({
-        id: 'basemap', ...mapViewState,
+        id: 'basemap',
+        ...mapViewState,
         width,
         height: multiview ? height / 2 : height,
         y: multiview ? height / 2 : 0
@@ -243,17 +262,24 @@ class App extends PureComponent {
     ];
   }
 
+  // Only show infovis layers in infovis mode and vice versa
+  _layerFilter({layer}) {
+    const {settings} = this.state;
+    const isIdentity = layer.props.coordinateSystem === COORDINATE_SYSTEM.IDENTITY;
+    return settings.infovis ? isIdentity : !isIdentity;
+  }
+
   _renderMap() {
-    const {width, height, mapViewState, settings} = this.state;
-    const {effects, pickingRadius, drawPickingColors, useDevicePixels} = settings;
+    const {width, height, orbitViewState, mapViewState, settings} = this.state;
+    const {infovis, effects, pickingRadius, drawPickingColors, useDevicePixels} = settings;
 
     const viewports = this._getViewports();
 
     return (
       <div style={{backgroundColor: '#eeeeee'}}>
         <ViewportController
-          viewportState={MapState}
-          {...mapViewState}
+          viewportState={infovis ? OrbitState : MapState}
+          {...(infovis ? orbitViewState : mapViewState)}
           width={width}
           height={height}
           onViewportChange={this._onViewportChange} >
@@ -265,15 +291,14 @@ class App extends PureComponent {
             height={height}
             viewports={viewports}
             layers={this._renderExamples()}
+            layerFilter={this._layerFilter}
             effects={effects ? this._effects : []}
-            useDefaultGLSettings
             pickingRadius={pickingRadius}
             onLayerHover={this._onHover}
             onLayerClick={this._onClick}
-            initWebGLParameters
 
+            initWebGLParameters
             useDevicePixels={useDevicePixels}
-
             debug={false}
             drawPickingColors={drawPickingColors}
           >
@@ -291,11 +316,13 @@ class App extends PureComponent {
               First Person View
             </ViewportLabel>
 
-            { viewports[1] && (
-              <ViewportLabel viewportId="basemap">
-                Map View
-              </ViewportLabel>
-            )}
+            <ViewportLabel viewportId="basemap">
+              Map View
+            </ViewportLabel>
+
+            <ViewportLabel viewportId="infovis">
+              Orbit View (PlotLayer only, No Navigation)
+            </ViewportLabel>
 
           </DeckGL>
 
@@ -310,7 +337,6 @@ class App extends PureComponent {
     return (
       <div>
         {this._renderMap()}
-        {!MapboxAccessToken && this._renderNoTokenWarning()}
         <div id="control-panel">
           <div style={{textAlign: 'center', padding: '5px 0 5px'}}>
             <button onClick={this._onPickObjects}>
@@ -341,5 +367,4 @@ class App extends PureComponent {
 
 const container = document.createElement('div');
 document.body.appendChild(container);
-
 ReactDOM.render(<App />, container);
diff --git a/examples/layer-browser/src/examples/core-layers.js b/examples/layer-browser/src/examples/core-layers.js
@@ -24,21 +24,24 @@ const {get} = experimental;
 import dataSamples from '../immutable-data-samples';
 import {parseColor, setOpacity} from '../utils/color';
 
-const MARKER_SIZE_MAP = {
-  small: 200,
-  medium: 500,
-  large: 1000
-};
-
 const LIGHT_SETTINGS = {
-  lightsPosition: [-122.45, 37.66, 8000, -122.0, 38.00, 8000],
+  lightsPosition: [
+    -122.45, 37.66, 8000,
+    -122.0, 38.00, 8000
+  ],
   ambientRatio: 0.3,
   diffuseRatio: 0.6,
   specularRatio: 0.4,
   lightsStrength: [1, 0.0, 0.8, 0.0],
   numberOfLights: 2
 };
 
+const MARKER_SIZE_MAP = {
+  small: 200,
+  medium: 500,
+  large: 1000
+};
+
 const ArcLayerExample = {
   layer: ArcLayer,
   getData: () => dataSamples.routes,

diff --git a/examples/layer-browser/src/examples/deprecated-layers.js b/examples/layer-browser/src/examples/deprecated-layers.js
diff --git a/examples/layer-browser/src/examples/index.js b/examples/layer-browser/src/examples/index.js
@@ -1,11 +1,11 @@
 import coreLayerExamples from './core-layers';
 import experimentalLayerExamples from './experimental-layers';
 import sampleLayerExamples from './sample-layers';
-import deprecatedLayerExamples from './deprecated-layers';
+import infovisLayerExamples from './infovis-layers';
 
 export default {
   ...coreLayerExamples,
   ...experimentalLayerExamples,
   ...sampleLayerExamples,
-  ...deprecatedLayerExamples
+  ...infovisLayerExamples
 };