Add additional sample layers (visgl#385)

* Add additional sample layers, LabelLayer, MeshLayer, BitmapLayer, OutlinePolygonLayer * Working LabelLayer Example
aravindiiitb · Mar 8, 2017 · 194bd0e · 194bd0e
1 parent e0c1243
commit 194bd0e
Show file tree

Hide file tree

Showing 43 changed files with 938 additions and 116 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -2,9 +2,19 @@
 
 ## Overview
 
-* [Main (Layer Browser)](./main/README.md) - The Layer Browser enables
-  testing of props for all core layers. This is the main example
-  used for testing layers during development of deck.gl.
+* [Layer Browser (Main Example)](./layer-browser/README.md) - The Layer Browser
+  enables testing of props for all core layers and many sample layers.
+  This is the main example used for testing layers during development of deck.gl.
+
+
+## Sample Layers
+
+A number of sample layers are available in `examples/sample-layers`. These can
+be copied into your app and extended/modified as needed.
+
+
+## Tutorial Examples
+
 * [Hello World (webpack2)](./hello-world-webpack2/README.md): Bundles a minimal app with
   [webpack 2](https://github.com/webpack/webpack) and serves it with webpack-dev-server.
   Transpiles with buble.

diff --git a/examples/main/README.md → examples/layer-browser/README.md b/examples/main/README.md → examples/layer-browser/README.md
diff --git a/examples/main/app.css → examples/layer-browser/app.css b/examples/main/app.css → examples/layer-browser/app.css
diff --git a/examples/main/data/hexagons.json → examples/layer-browser/data/hexagons.json b/examples/main/data/hexagons.json → examples/layer-browser/data/hexagons.json
diff --git a/examples/main/data/icon-atlas.json → examples/layer-browser/data/icon-atlas.json b/examples/main/data/icon-atlas.json → examples/layer-browser/data/icon-atlas.json
diff --git a/examples/main/data/icon-atlas.png → examples/layer-browser/data/icon-atlas.png b/examples/main/data/icon-atlas.png → examples/layer-browser/data/icon-atlas.png
diff --git a/examples/main/data/sample.geo.json → examples/layer-browser/data/sample.geo.json b/examples/main/data/sample.geo.json → examples/layer-browser/data/sample.geo.json
diff --git a/examples/main/data/sf.bike.parking.json → ...s/layer-browser/data/sf.bike.parking.json b/examples/main/data/sf.bike.parking.json → ...s/layer-browser/data/sf.bike.parking.json
diff --git a/examples/main/data/sf.zip.geo.json → examples/layer-browser/data/sf.zip.geo.json b/examples/main/data/sf.zip.geo.json → examples/layer-browser/data/sf.zip.geo.json
diff --git a/examples/main/data/sfmta.routes.json → ...ples/layer-browser/data/sfmta.routes.json b/examples/main/data/sfmta.routes.json → ...ples/layer-browser/data/sfmta.routes.json
diff --git a/examples/main/data/trips.json → examples/layer-browser/data/trips.json b/examples/main/data/trips.json → examples/layer-browser/data/trips.json
diff --git a/examples/main/index.html → examples/layer-browser/index.html b/examples/main/index.html → examples/layer-browser/index.html
diff --git a/examples/main/package.json → examples/layer-browser/package.json b/examples/main/package.json → examples/layer-browser/package.json
diff --git a/examples/main/src/app.js → examples/layer-browser/src/app.js b/examples/main/src/app.js → examples/layer-browser/src/app.js
diff --git a/examples/main/src/data-samples.js → examples/layer-browser/src/data-samples.js b/examples/main/src/data-samples.js → examples/layer-browser/src/data-samples.js
diff --git a/examples/main/src/layer-controls.js → examples/layer-browser/src/layer-controls.js b/examples/main/src/layer-controls.js → examples/layer-browser/src/layer-controls.js
diff --git a/...es/main/src/layer-examples/core-layers.js → ...browser/src/layer-examples/core-layers.js b/...es/main/src/layer-examples/core-layers.js → ...browser/src/layer-examples/core-layers.js
diff --git a/...n/src/layer-examples/deprecated-layers.js → ...r/src/layer-examples/deprecated-layers.js b/...n/src/layer-examples/deprecated-layers.js → ...r/src/layer-examples/deprecated-layers.js
@@ -6,17 +6,6 @@ import {
 
 import * as dataSamples from '../data-samples';
 
-const ChoroplethLayerContourExample = {
-  layer: ChoroplethLayer,
-  props: {
-    id: 'choroplethLayerContour',
-    data: dataSamples.choropleths,
-    getColor: f => [0, 80, 200],
-    opacity: 0.8,
-    drawContour: true
-  }
-};
-
 const ChoroplethLayerExample = {
   layer: ChoroplethLayer,
   props: {
@@ -79,8 +68,7 @@ const ExtrudedChoroplethLayer64WireframeExample = {
 /* eslint-disable quote-props */
 export default {
   'Deprecated Layers': {
-    'ChoroplethLayer (Solid)': ChoroplethLayerExample,
-    'ChoroplethLayer (Contour)': ChoroplethLayerContourExample,
+    'ChoroplethLayer': ChoroplethLayerExample,
     'ChoroplethLayer64 (Solid)': ChoroplethLayer64SolidExample,
     'ChoroplethLayer64 (Contour)': ChoroplethLayer64ContourExample,
     'ExtrudedChoroplethLayer64': ExtrudedChoroplethLayer64Example,

diff --git a/examples/main/src/layer-examples/index.js → ...layer-browser/src/layer-examples/index.js b/examples/main/src/layer-examples/index.js → ...layer-browser/src/layer-examples/index.js
diff --git a/.../main/src/layer-examples/sample-layers.js → ...owser/src/layer-examples/sample-layers.js b/.../main/src/layer-examples/sample-layers.js → ...owser/src/layer-examples/sample-layers.js
@@ -3,18 +3,6 @@ import * as mainDataSamples from '../data-samples';
 import * as extraDataSamples from '../../../sample-layers/data';
 const dataSamples = Object.assign({}, mainDataSamples, extraDataSamples);
 
-import EnhancedChoroplethLayer from '../../../sample-layers/enhanced-choropleth-layer/enhanced-choropleth-layer';
-
-const EnhancedChoroplethLayerExample = {
-  layer: EnhancedChoroplethLayer,
-  props: {
-    id: 'enhanced-choropleth-layer',
-    data: dataSamples.choropleths,
-    getColor: f => [200, 0, 80],
-    strokeWidth: 5
-  }
-};
-
 import TripsLayer from '../../../sample-layers/trips-layer/trips-layer';
 
 const TripsLayerExample = {
@@ -49,11 +37,61 @@ const S2LayerExample = {
   }
 };
 
+import EnhancedChoroplethLayer from '../../../sample-layers/enhanced-choropleth-layer/enhanced-choropleth-layer';
+
+const EnhancedChoroplethLayerExample = {
+  layer: EnhancedChoroplethLayer,
+  props: {
+    id: 'enhanced-choropleth-layer',
+    data: dataSamples.choropleths,
+    getColor: f => [200, 0, 80],
+    strokeWidth: 5
+  }
+};
+
+import BitmapLayer from '../../../sample-layers/bitmap-layer/bitmap-layer';
+
+const BitmapLayerExample = {
+  layer: BitmapLayer,
+  props: {
+    data: []
+  }
+};
+
+import MeshLayer from '../../../sample-layers/mesh-layer/mesh-layer';
+
+const MeshLayerExample = {
+  layer: MeshLayer,
+  props: {
+    data: []
+  }
+};
+
+import LabelLayer from '../../../sample-layers/label-layer/label-layer';
+
+const somePoints = dataSamples.points.slice(0, 50);
+
+const LabelLayerExample = {
+  layer: LabelLayer,
+  props: {
+    data: somePoints,
+    getLabel: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`,
+    getPosition: x => x.COORDINATES,
+    getColor: x => [Math.random() * 255, 0, Math.random() * 255, 255],
+    getSize: x => 2
+  }
+};
+
 /* eslint-disable quote-props */
 export default {
   'Sample Layers': {
-    'EnhancedChoroplethLayer': EnhancedChoroplethLayerExample,
     'TripsLayer': TripsLayerExample,
-    'S2Layer': S2LayerExample
+    'S2Layer': S2LayerExample,
+
+    'EnhancedChoroplethLayer': EnhancedChoroplethLayerExample,
+
+    'BitmapLayer': BitmapLayerExample,
+    'MeshLayer': MeshLayerExample,
+    'LabelLayer': LabelLayerExample
   }
 };
diff --git a/examples/main/src/layer-info.js → examples/layer-browser/src/layer-info.js b/examples/main/src/layer-info.js → examples/layer-browser/src/layer-info.js
diff --git a/examples/main/src/layer-selector.js → examples/layer-browser/src/layer-selector.js b/examples/main/src/layer-selector.js → examples/layer-browser/src/layer-selector.js
diff --git a/...es/main/src/utils/color-palette-picker.js → ...browser/src/utils/color-palette-picker.js b/...es/main/src/utils/color-palette-picker.js → ...browser/src/utils/color-palette-picker.js
diff --git a/examples/main/src/utils/color-picker.js → ...s/layer-browser/src/utils/color-picker.js b/examples/main/src/utils/color-picker.js → ...s/layer-browser/src/utils/color-picker.js
diff --git a/examples/main/src/utils/color.js → examples/layer-browser/src/utils/color.js b/examples/main/src/utils/color.js → examples/layer-browser/src/utils/color.js
diff --git a/examples/main/src/utils/grid-aggregator.js → ...ayer-browser/src/utils/grid-aggregator.js b/examples/main/src/utils/grid-aggregator.js → ...ayer-browser/src/utils/grid-aggregator.js
diff --git a/examples/main/src/utils/index.js → examples/layer-browser/src/utils/index.js b/examples/main/src/utils/index.js → examples/layer-browser/src/utils/index.js
diff --git a/examples/main/webpack.config.js → examples/layer-browser/webpack.config.js b/examples/main/webpack.config.js → examples/layer-browser/webpack.config.js
@@ -10,12 +10,11 @@ module.exports = {
   },
 
   // inline source maps seem to work best
-  devtool: 'inline-source-map',
+  devtool: 'source-map',
 
   resolve: {
     // Make src files outside of this dir resolve modules in our node_modules folder
     modules: [resolve(__dirname, '.'), resolve(__dirname, 'node_modules'), 'node_modules'],
-
     alias: {
       // From mapbox-gl-js README. Required for non-browserify bundlers (e.g. webpack):
       'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')