Merge e1bd936 into 872889e

visgl · Aug 27, 2019 · 9185548 · 9185548
2 parents 872889e + e1bd936
commit 9185548
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 72 deletions.
diff --git a/examples/3d-tiles/app.js b/examples/3d-tiles/app.js
@@ -1,4 +1,3 @@
-/* global fetch */
 import '@babel/polyfill';
 
 import React, {PureComponent} from 'react';
@@ -14,14 +13,11 @@ import Tile3DLayer from './tile-3d-layer/tile-3d-layer';
 import ControlPanel from './components/control-panel';
 import fileDrop from './components/file-drop';
 
-const DATA_URI = 'https://raw.githubusercontent.com/uber-web/loaders.gl/master';
-const INDEX_FILE = `${DATA_URI}/modules/3d-tiles/test/data/index.json`;
+import {loadExampleIndex, DATA_URI} from './examples';
+
+export const INITIAL_EXAMPLE_CATEGORY = 'additional';
+export const INITIAL_EXAMPLE_NAME = 'Mount St Helens (Cesium Ion PointCloud)';
 
-// eslint-disable-next-line
-const ION_ACCESS_TOKEN_1 =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxN2NhMzkwYi0zNWM4LTRjNTYtYWE3Mi1jMDAxYzhlOGVmNTAiLCJpZCI6OTYxOSwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU2MjE4MTMxM30.OkgVr6NaKYxabUMIGqPOYFe0V5JifXLVLfpae63x-tA';
-const ION_ACCESS_TOKEN_2 =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMGY4ODczYy1mNTk4LTRiMDUtYmIxYy0xZWYwOWZmMGY4NjQiLCJpZCI6NDQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJhc3NldHMiOlsxLDIsMyw0LDYxOTMsNjI3Myw3MTYyLDczNTMsNzE0Ml0sImlhdCI6MTU0MTYxODM0NX0.lWnGs9ySXO4QK3HagcMsDpZ8L01DpmUDQm38-2QAQuE';
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 
@@ -33,27 +29,6 @@ const MAP_STYLES = {
 
 const INITIAL_MAP_STYLE = MAP_STYLES['Dark Base Map'];
 
-const ADDITIONAL_EXAMPLES = {
-  name: 'additional',
-  examples: {
-    'Royal Exhibition Building (Github Pages)': {
-      tilesetUrl:
-        'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/3d-tiles/RoyalExhibitionBuilding/tileset.json',
-      color: [115, 101, 152, 200]
-    },
-    '6193 (Cesium Ion Batched)': {ionAssetId: 6193, ionAccessToken: ION_ACCESS_TOKEN_2},
-    '7162 (Cesium Ion Batched)': {ionAssetId: 7162, ionAccessToken: ION_ACCESS_TOKEN_2},
-    'Mount St Helens (Cesium Ion PointCloud)': {
-      ionAssetId: 33301,
-      ionAccessToken: ION_ACCESS_TOKEN_1
-    },
-    'Montreal (Cesium Ion PointCloud)': {ionAssetId: 28945, ionAccessToken: ION_ACCESS_TOKEN_1}
-  }
-};
-
-const INITIAL_EXAMPLE_CATEGORY = 'additional';
-const INITIAL_EXAMPLE_NAME = 'Mount St Helens (Cesium Ion PointCloud)';
-
 const EXAMPLES_VIEWSTATE = {
   latitude: 40.04248558075302,
   longitude: -75.61213987669433
@@ -118,33 +93,18 @@ export default class App extends PureComponent {
     await this._loadInitialTileset();
   }
 
+  // load the index file that lists example tilesets
   async _loadExampleIndex() {
-    // load the index file that lists example tilesets
-    const response = await fetch(INDEX_FILE);
-    const data = await response.json();
-    this.setState({
-      examplesByCategory: {
-        ...data,
-        additional: ADDITIONAL_EXAMPLES,
-        custom: {
-          name: 'Custom',
-          examples: {
-            'Custom Tileset': {},
-            'ION Tileset': {}
-          }
-        }
-      }
-    });
+    const examplesByCategory = await loadExampleIndex();
+    this.setState({examplesByCategory});
   }
 
   async _loadInitialTileset() {
     /* global URL */
     const parsedUrl = new URL(window.location.href);
+    const ionAccessToken = parsedUrl.searchParams.get('ionAccessToken');
     const ionAssetId = parsedUrl.searchParams.get('ionAssetId');
-    let ionAccessToken = parsedUrl.searchParams.get('ionAccessToken');
-    if (ionAssetId || ionAccessToken) {
-      // load the tileset specified in the URL
-      ionAccessToken = ionAccessToken || ION_ACCESS_TOKEN_1;
+    if (ionAccessToken && ionAssetId) {
       await this._loadTilesetFromIonAsset(ionAccessToken, ionAssetId);
       return;
     }
@@ -164,24 +124,24 @@ export default class App extends PureComponent {
   async _loadExampleTileset(category, name) {
     const {examplesByCategory} = this.state;
 
+    // TODO - unify this as part of cleanup
     let tilesetUrl;
     let tilesetExampleProps;
-    if (category === 'additional') {
-      tilesetExampleProps = ADDITIONAL_EXAMPLES.examples[name];
-    } else {
-      const selectedExample = examplesByCategory[category].examples[name];
-      if (selectedExample && selectedExample.tileset) {
-        tilesetUrl = `${DATA_URI}/${selectedExample.path}/${selectedExample.tileset}`;
-        tilesetExampleProps = {
-          tilesetUrl,
-          isWGS84: true
-        };
-      }
+    switch (category) {
+      case 'additional':
+      case 'vricon':
+        tilesetExampleProps = examplesByCategory[category].examples[name];
+        break;
+      default:
+        const selectedExample = examplesByCategory[category].examples[name];
+        if (selectedExample && selectedExample.tileset) {
+          tilesetUrl = `${DATA_URI}/${selectedExample.path}/${selectedExample.tileset}`;
+          tilesetExampleProps = {
+            tilesetUrl
+          };
+        }
     }
-
-    this.setState({
-      tilesetExampleProps
-    });
+    this.setState({tilesetExampleProps});
   }
 
   async _loadTilesetFromIonAsset(ionAccessToken, ionAssetId) {

diff --git a/examples/3d-tiles/deckCommit b/examples/3d-tiles/deckCommit
diff --git a/examples/3d-tiles/deckTags b/examples/3d-tiles/deckTags
diff --git a/examples/3d-tiles/examples.js b/examples/3d-tiles/examples.js
@@ -0,0 +1,66 @@
+/* global fetch */
+const DECK_DATA_URI = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master';
+
+const ION_ACCESS_TOKEN_VRICON =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlNGZmZjBjMS04ZGYwLTRhYjAtOWIzYy0wZWJmNzI4OWZhNGEiLCJpZCI6MTYyMywic2NvcGVzIjpbImFzciIsImdjIl0sImFzc2V0cyI6WzI5MzI4LDI5MzMxLDI5MzMyLDI5MzMzLDI5MzM0LDI5MzM1LDEsMiwzLDQsMzk1NF0sImlhdCI6MTU2MDQ0ODA2Nn0.zZPuc5WzTsrKNviCY2jyhmDwJITXzhbRTnJS025_uBw';
+const ION_ACCESS_TOKEN_1 =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxN2NhMzkwYi0zNWM4LTRjNTYtYWE3Mi1jMDAxYzhlOGVmNTAiLCJpZCI6OTYxOSwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU2MjE4MTMxM30.OkgVr6NaKYxabUMIGqPOYFe0V5JifXLVLfpae63x-tA';
+const ION_ACCESS_TOKEN_2 =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMGY4ODczYy1mNTk4LTRiMDUtYmIxYy0xZWYwOWZmMGY4NjQiLCJpZCI6NDQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJhc3NldHMiOlsxLDIsMyw0LDYxOTMsNjI3Myw3MTYyLDczNTMsNzE0Ml0sImlhdCI6MTU0MTYxODM0NX0.lWnGs9ySXO4QK3HagcMsDpZ8L01DpmUDQm38-2QAQuE';
+
+export const DATA_URI = 'https://raw.githubusercontent.com/uber-web/loaders.gl/master';
+
+const EXAMPLE_INDEX_URL = `${DATA_URI}/modules/3d-tiles/test/data/index.json`;
+
+const ADDITIONAL_EXAMPLES = {
+  additional: {
+    name: 'additional',
+    examples: {
+      'Mount St Helens (Cesium Ion PointCloud)': {
+        ionAssetId: 33301,
+        ionAccessToken: ION_ACCESS_TOKEN_1
+      },
+      'Montreal (Cesium Ion PointCloud)': {ionAssetId: 28945, ionAccessToken: ION_ACCESS_TOKEN_1},
+      '6193 (Cesium Ion Batched)': {ionAssetId: 6193, ionAccessToken: ION_ACCESS_TOKEN_2},
+      '7162 (Cesium Ion Batched)': {ionAssetId: 7162, ionAccessToken: ION_ACCESS_TOKEN_2},
+      'Royal Exhibition Building (Github Pages)': {
+        tilesetUrl: `${DECK_DATA_URI}/3d-tiles/RoyalExhibitionBuilding/tileset.json`
+      }
+    }
+  },
+  vricon: {
+    name: 'vricon',
+    examples: {
+      Cairo: {ionAssetId: 29328, ionAccessToken: ION_ACCESS_TOKEN_VRICON},
+      Caracas: {ionAssetId: 29331, ionAccessToken: ION_ACCESS_TOKEN_VRICON},
+      Damascus: {ionAssetId: 29332, ionAccessToken: ION_ACCESS_TOKEN_VRICON},
+      Honolulu: {ionAssetId: 29333, ionAccessToken: ION_ACCESS_TOKEN_VRICON},
+      'San Francisco': {ionAssetId: 29334, ionAccessToken: ION_ACCESS_TOKEN_VRICON},
+      Tehran: {ionAssetId: 29335, ionAccessToken: ION_ACCESS_TOKEN_VRICON}
+    }
+  }
+};
+
+export async function loadExampleIndex() {
+  // Load the index file that lists example tilesets (from the loaders.gl github repo)
+  const response = await fetch(EXAMPLE_INDEX_URL);
+  const testExamples = await response.json();
+
+  // We don't yet support geometry and vector tiles, so remove those categories for now
+  delete testExamples.Geometry;
+  delete testExamples.Vector;
+  // TODO - We should fix rendering of composite tiles, not hard
+  delete testExamples.Composite;
+
+  return {
+    ...testExamples,
+    ...ADDITIONAL_EXAMPLES,
+    custom: {
+      name: 'Custom',
+      examples: {
+        'Custom Tileset': {},
+        'ION Tileset': {}
+      }
+    }
+  };
+}