Add "Playground" (aka json-browser) to website (#3561)

examples/experimental/json-examples/3d-heatmap-minimap.json → examples/playground/json-examples/3d-heatmap-minimap.json

@@ -16,7 +16,7 @@
       "type": "MapView",
       "id": "main",
       "mapStyle": "mapbox://styles/mapbox/dark-v9",
-      "controller": "true"
+      "controller": true
     },
     {
       "type": "MapView",
@@ -59,4 +59,4 @@
       ]
     }
   ]
-}
+}

examples/experimental/json-examples/3d-heatmap.json → examples/playground/json-examples/3d-heatmap.json

@@ -13,7 +13,7 @@
   "views": [
     {
       "type": "MapView",
-      "controller": "true",
+      "controller": true,
       "mapStyle": "mapbox://styles/mapbox/dark-v9"
     }
   ],

examples/playground/json-examples/README.md

@@ -0,0 +1,6 @@
+# JSON examples
+
+JSON versions of deck.gl examples go into this folder.
+
+- New examples need to be listed in `../'src/templates.js`
+- Any new layers or classes used by the examples need to be added to `../'src/configuration.js`

examples/experimental/json-examples/geojson.json → examples/playground/json-examples/geojson.json

@@ -12,7 +12,7 @@
   "views": [
     {
       "type": "MapView",
-      "controller": "true",
+      "controller": true,
       "mapStyle": "mapbox://styles/mapbox/light-v9"
     }
   ],

examples/playground/json-examples/index.js

@@ -0,0 +1,13 @@
+export default {
+  // WEBSITE EXAMPLES AS JSON PAYLOADS
+  'website/3D Heatmap (HexagonLayer)': require('./3d-heatmap.json'),
+  'website/3D Heatmap (wth Minimap)': require('./3d-heatmap-minimap.json'),
+  'website/GeoJSON (GeoJsonLayer)': require('./geojson.json'),
+  'website/Line (LineLayer)': require('./line.json'),
+  'website/Scatterplot (ScatterplotLayer)': require('./scatterplot.json'),
+  'website/Screen Grid (ScreenGridLayer)': require('./screen-grid.json'),
+  'website/TagMap (TextLayer)': require('./tagmap.json'),
+  // GET STARTED EXAMPLES AS JSON PAYLOADS
+  'get-started/US map (GeoJsonLayer)': require('./us-map.json'),
+  'get-started/Dot Text (Scatterplot/TextLayer)': require('./dot-text.json')
+};

examples/experimental/json-examples/line.json → examples/playground/json-examples/line.json

@@ -14,7 +14,7 @@
   "views": [
     {
       "type": "MapView",
-      "controller": "true",
+      "controller": true,
       "mapStyle": "mapbox://styles/mapbox/dark-v9"
     }
   ],

examples/experimental/json-examples/scatterplot.json → examples/playground/json-examples/scatterplot.json

@@ -12,7 +12,7 @@
   "views": [
     {
       "type": "MapView",
-      "controller": "true",
+      "controller": true,
       "mapStyle": "mapbox://styles/mapbox/light-v9"
     }
   ],

examples/experimental/json-examples/screen-grid.json → examples/playground/json-examples/screen-grid.json

@@ -13,7 +13,7 @@
   "views": [
     {
       "type": "MapView",
-      "controller": "true",
+      "controller": true,
       "mapStyle": "mapbox://styles/mapbox/light-v9"
     }
   ],

examples/experimental/json-examples/tagmap.json → examples/playground/json-examples/tagmap.json

@@ -11,7 +11,7 @@
   "views": [
     {
       "type": "MapView",
-      "controller": "true",
+      "controller": true,
       "mapStyle": "https://rivulet-zhang.github.io/dataRepo/mapbox/style/map-style-dark-v9-no-labels.json"
     }
   ],

examples/experimental/json-browser/app.js → examples/playground/src/app.js

@@ -9,10 +9,9 @@ import AceEditor from 'react-ace';
 import 'brace/mode/json';
 import 'brace/theme/github';
 
-import JSON_CONFIGURATION from './config/configuration';
-import JSON_TEMPLATES from './config/templates';
+import JSON_CONFIGURATION from './configuration';
+import JSON_TEMPLATES from '../json-examples';
 
-// First template, to match the select dropdown
 const INITIAL_TEMPLATE = Object.keys(JSON_TEMPLATES)[0];
 
 // Set your mapbox token here
@@ -67,7 +66,7 @@ function setStyleSheet(url) {
   document.head.appendChild(styles);
 }
 
-export default class App extends Component {
+export class App extends Component {
   constructor(props) {
     super(props);
 

examples/experimental/json-browser/root.js → examples/playground/src/root.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {render} from 'react-dom';
-import App from './app';
+import {App} from './app';
 
 /* global document */
 render(

examples/experimental/json-browser/webpack.config.js → examples/playground/webpack.config.js

@@ -10,7 +10,7 @@ const CONFIG = {
   mode: 'development',
 
   entry: {
-    app: resolve('./root.js')
+    app: resolve('./src/root.js')
   },
 
   module: {
@@ -38,5 +38,4 @@ const CONFIG = {
 };
 
 // This line enables bundling against src in this repo rather than installed deck.gl module
-module.exports = env =>
-  env ? require('../../webpack.config.local')(CONFIG, __dirname)(env) : CONFIG;
+module.exports = env => (env ? require('../webpack.config.local')(CONFIG, __dirname)(env) : CONFIG);

website/contents/pages.js

@@ -159,6 +159,16 @@ export const examplePages = generatePath([
         }
       }
     ]
+  },
+  {
+    name: 'Declarative Layers',
+    expanded: true,
+    children: [
+      {
+        name: 'Playground',
+        external: 'http://deck.gl/json'
+      }
+    ]
   }
 ]);
 

website/src/components/demos/index.js

@@ -18,4 +18,4 @@ export {default as DataFilterDemo} from './data-filter-demo';
 export * from './layer-demos';
 export * from './aggregation-layer-demos';
 export * from './geo-layer-demos';
-export { default as JSONBrowserDemo } from './json-browser-demo';
+

website/src/static/markdown/examples.md

@@ -112,3 +112,16 @@
       </div>
   </div>
 </div>
+
+### Declarative Layers
+
+<div>
+  <div class="thumb">
+    <div data-title="Playground" data-name="Playground">
+      <a href="https://deck.gl/json">
+        <img src="images/playground-thumb.png" />
+      </a>
+    </div>
+  </div>
+</div>
+