Merge 0f682c8 into 54e7093

visgl · Sep 19, 2019 · 9b1e0c5 · 9b1e0c5
2 parents 54e7093 + 0f682c8
commit 9b1e0c5
Show file tree

Hide file tree

Showing 15 changed files with 197 additions and 153 deletions.
diff --git a/examples/website/heatmap-layer/index.html b/examples/website/heatmap-layer/index.html
diff --git a/examples/website/heatmap-layer/app.js → examples/website/heatmap/app.js b/examples/website/heatmap-layer/app.js → examples/website/heatmap/app.js
@@ -1,9 +1,6 @@
-/* global document */
-/* eslint-disable no-console */
 import React, {PureComponent} from 'react';
 import {render} from 'react-dom';
 import {StaticMap} from 'react-map-gl';
-import {isWebGL2} from '@luma.gl/core';
 import DeckGL from 'deck.gl';
 import {HeatmapLayer} from '@deck.gl/aggregation-layers';
 
@@ -21,16 +18,7 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 
-const MAP_STYLE = 'mapbox://styles/mapbox/dark-v9';
-
-class Root extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      webGL2Supported: true
-    };
-  }
-
+export class App extends PureComponent {
   _renderLayers() {
     const {data = DATA_URL, intensity = 1, threshold = 0.03} = this.props;
 
@@ -48,38 +36,19 @@ class Root extends PureComponent {
     ];
   }
 
-  _onWebGLInitialized(gl) {
-    const webGL2Supported = isWebGL2(gl);
-    this.setState({webGL2Supported});
-  }
-
   render() {
-    const {webGL2Supported} = this.state;
-    if (!webGL2Supported) {
-      return (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: '100vh'
-          }}
-        >
-          <h2> {'HeatmapLayer is not supported on this browser, requires WebGL2'} </h2>
-        </div>
-      );
-    }
+    const {mapStyle = 'mapbox://styles/mapbox/light-v9'} = this.props;
+
     return (
       <div>
         <DeckGL
           initialViewState={INITIAL_VIEW_STATE}
           controller={true}
           layers={this._renderLayers()}
-          onWebGLInitialized={this._onWebGLInitialized.bind(this)}
         >
           <StaticMap
             reuseMaps
-            mapStyle={MAP_STYLE}
+            mapStyle={mapStyle}
             preventStyleDiffing={true}
             mapboxApiAccessToken={MAPBOX_TOKEN}
           />
@@ -89,4 +58,6 @@ class Root extends PureComponent {
   }
 }
 
-render(<Root />, document.body.appendChild(document.createElement('div')));
+export function renderToDOM(container) {
+  render(<App />, container);
+}
diff --git a/examples/website/heatmap/index.html b/examples/website/heatmap/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="text/javascript" src="app.js"></script>
+<script type="text/javascript">
+  App.renderToDOM(document.getElementById('app'));
+</script>
+</html>
diff --git a/examples/website/heatmap-layer/package.json → examples/website/heatmap/package.json b/examples/website/heatmap-layer/package.json → examples/website/heatmap/package.json
diff --git a/...s/website/heatmap-layer/webpack.config.js → examples/website/heatmap/webpack.config.js b/...s/website/heatmap-layer/webpack.config.js → examples/website/heatmap/webpack.config.js
@@ -1,42 +1,37 @@
 // NOTE: To use this example standalone (e.g. outside of deck.gl repo)
 // delete the local development overrides at the bottom of this file
 
-// avoid destructuring for older Node version support
-const resolve = require('path').resolve;
 const webpack = require('webpack');
 
 const CONFIG = {
+  mode: 'development',
+
   entry: {
-    app: resolve('./app.js')
+    app: './app.js'
   },
 
-  devtool: 'source-map',
+  output: {
+    library: 'App'
+  },
 
   module: {
     rules: [
       {
-        // Compile ES2015 using buble
+        // Transpile ES6 to ES5 with babel
+        // Remove if your app does not use JSX or you don't need to support old browsers
         test: /\.js$/,
-        loader: 'buble-loader',
-        include: [resolve('.')],
+        loader: 'babel-loader',
         exclude: [/node_modules/],
         options: {
-          objectAssign: 'Object.assign'
+          presets: ['@babel/preset-react']
         }
       }
     ]
   },
 
-  resolve: {
-    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')
-    }
-  },
-
   // Optional: Enables reading mapbox token from environment variable
   plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken'])]
 };
 
-// This line enables bundling against src in this repo rather than installed deck.gl module
+// This line enables bundling against src in this repo rather than installed module
 module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);
diff --git a/website/contents/pages.js b/website/contents/pages.js
@@ -57,7 +57,7 @@ export const examplePages = generatePath([
       {
         name: 'HexagonLayer',
         content: {
-          demo: 'HeatmapDemo',
+          demo: 'HexagonDemo',
           code: getCodeUrl('examples/website/3d-heatmap')
         }
       },
@@ -131,6 +131,13 @@ export const examplePages = generatePath([
           code: getCodeUrl('examples/website/trips')
         }
       },
+      {
+        name: 'HeatmapLayer',
+        content: {
+          demo: 'HeatmapDemo',
+          code: getCodeUrl('examples/website/heatmap')
+        }
+      },
       {
         name: 'Tile3DLayer',
         content: {

diff --git a/website/src/components/demos/heatmap-demo.js b/website/src/components/demos/heatmap-demo.js
@@ -1,29 +1,20 @@
 import React, {Component} from 'react';
 import {readableInteger} from '../../utils/format-utils';
-import {App} from 'website-examples/3d-heatmap/app';
-
 import {MAPBOX_STYLES, DATA_URI} from '../../constants/defaults';
+import {App} from 'website-examples/heatmap/app';
 
 export default class HeatmapDemo extends Component {
   static get data() {
     return {
-      url: `${DATA_URI}/heatmap-data.txt`,
-      worker: 'workers/heatmap-data-decoder.js'
+      url: `${DATA_URI}/screen-grid-data-uber-pickups-nyc.txt`,
+      worker: 'workers/screen-grid-data-decoder.js'
     };
   }
 
   static get parameters() {
     return {
-      radius: {displayName: 'Radius', type: 'range', value: 2000, step: 100, min: 500, max: 20000},
-      coverage: {displayName: 'Coverage', type: 'range', value: 0.7, step: 0.1, min: 0, max: 1},
-      upperPercentile: {
-        displayName: 'Upper Percentile',
-        type: 'range',
-        value: 100,
-        step: 0.1,
-        min: 80,
-        max: 100
-      }
+      intensity: {displayName: 'Intensity', type: 'range', value: 1, step: 0.1, min: 0, max: 5},
+      threshold: {displayName: 'Threshold', type: 'range', value: 0.03, step: 0.01, min: 0, max: 1}
     };
   }
 
@@ -32,89 +23,36 @@ export default class HeatmapDemo extends Component {
   }
 
   static renderInfo(meta) {
-    const colorRamp = App.defaultColorRange.slice().map(color => `rgb(${color.join(',')})`);
-
     return (
       <div>
-        <h3>United Kingdom Road Safety</h3>
-        <p>Personal injury road accidents in GB from 1979</p>
-        <p>The layer aggregates data within the boundary of each hexagon cell</p>
-
-        <div className="layout">
-          {colorRamp.map((c, i) => (
-            <div
-              key={i}
-              className="legend"
-              style={{background: c, width: `${100 / colorRamp.length}%`}}
-            />
-          ))}
+        <h3>Uber Pickup Locations In NewYork City</h3>
+        <p>Pickup locations form April to September 2014.</p>
+        <div>
+          <img src="./images/colorbrewer_YlOrRd_6.png" style={{height: 8, width: '100%'}} />
         </div>
         <p className="layout">
-          <span className="col-1-2">Fewer Accidents</span>
-          <span className="col-1-2 text-right">More Accidents</span>
+          <span className="col-1-2">Fewer</span>
+          <span className="col-1-2 text-right">More</span>
         </p>
-
         <p>
-          Data source: <a href="https://data.gov.uk">DATA.GOV.UK</a>
+          Data source:{' '}
+          <a href="https://github.com/fivethirtyeight/uber-tlc-foil-response">
+            Uber TLC FOIL Response
+          </a>
         </p>
-
-        <div className="layout">
-          <div className="stat col-1-2">
-            Accidents
-            <b>{readableInteger(meta.count) || 0}</b>
-          </div>
+        <div className="stat">
+          No. of Samples
+          <b>{readableInteger(meta.count || 0)}</b>
         </div>
       </div>
     );
   }
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hoveredObject: null
-    };
-  }
-
-  _onHover({x, y, object}) {
-    this.setState({x, y, hoveredObject: object});
-  }
-
-  _renderTooltip() {
-    const {x, y, hoveredObject} = this.state;
-
-    if (!hoveredObject) {
-      return null;
-    }
-
-    const lat = hoveredObject.position[1];
-    const lng = hoveredObject.position[0];
-    const count = hoveredObject.points.length;
-
-    return (
-      <div className="tooltip" style={{left: x, top: y}}>
-        <div>{`latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}`}</div>
-        <div>{`longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}`}</div>
-        <div>{`${count} Accidents`}</div>
-      </div>
-    );
-  }
-
   render() {
-    const {data, params} = this.props;
+    const {params, data} = this.props;
+    const intensity = params.intensity.value;
+    const threshold = params.threshold.value;
 
-    return (
-      <div>
-        {this._renderTooltip()}
-        <App
-          {...this.props}
-          data={data}
-          radius={params.radius.value}
-          upperPercentile={params.upperPercentile.value}
-          coverage={params.coverage.value}
-          onHover={this._onHover.bind(this)}
-        />
-      </div>
-    );
+    return <App {...this.props} data={data} intensity={intensity} threshold={threshold} />;
   }
 }