diff --git a/examples/website/heatmap-layer/index.html b/examples/website/heatmap-layer/index.html deleted file mode 100644 index 91a535cf9d7..00000000000 --- a/examples/website/heatmap-layer/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - deck.gl example - - - - - - diff --git a/examples/website/heatmap-layer/app.js b/examples/website/heatmap/app.js similarity index 57% rename from examples/website/heatmap-layer/app.js rename to examples/website/heatmap/app.js index 6815b19756f..ffd57086f00 100644 --- a/examples/website/heatmap-layer/app.js +++ b/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 ( -
-

{'HeatmapLayer is not supported on this browser, requires WebGL2'}

-
- ); - } + const {mapStyle = 'mapbox://styles/mapbox/light-v9'} = this.props; + return (
@@ -89,4 +58,6 @@ class Root extends PureComponent { } } -render(, document.body.appendChild(document.createElement('div'))); +export function renderToDOM(container) { + render(, container); +} diff --git a/examples/website/heatmap/index.html b/examples/website/heatmap/index.html new file mode 100644 index 00000000000..22fe02abf4e --- /dev/null +++ b/examples/website/heatmap/index.html @@ -0,0 +1,18 @@ + + + + + deck.gl Example + + + + +
+ + + + diff --git a/examples/website/heatmap-layer/package.json b/examples/website/heatmap/package.json similarity index 100% rename from examples/website/heatmap-layer/package.json rename to examples/website/heatmap/package.json diff --git a/examples/website/heatmap-layer/webpack.config.js b/examples/website/heatmap/webpack.config.js similarity index 56% rename from examples/website/heatmap-layer/webpack.config.js rename to examples/website/heatmap/webpack.config.js index 30f2ec87d17..801f604438a 100644 --- a/examples/website/heatmap-layer/webpack.config.js +++ b/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 index 76cf2d2ef31..6bb461cee3a 100644 --- 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 index c7297ff5a9f..f36fdd4fc4b 100644 --- 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 (
-

United Kingdom Road Safety

-

Personal injury road accidents in GB from 1979

-

The layer aggregates data within the boundary of each hexagon cell

- -
- {colorRamp.map((c, i) => ( -
- ))} +

Uber Pickup Locations In NewYork City

+

Pickup locations form April to September 2014.

+
+

- Fewer Accidents - More Accidents + Fewer + More

-

- Data source: DATA.GOV.UK + Data source:{' '} + + Uber TLC FOIL Response +

- -
-
- Accidents - {readableInteger(meta.count) || 0} -
+
+ No. of Samples + {readableInteger(meta.count || 0)}
); } - 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 ( -
-
{`latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}`}
-
{`longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}`}
-
{`${count} Accidents`}
-
- ); - } - render() { - const {data, params} = this.props; + const {params, data} = this.props; + const intensity = params.intensity.value; + const threshold = params.threshold.value; - return ( -
- {this._renderTooltip()} - -
- ); + return ; } } diff --git a/website/src/components/demos/hexagon-demo.js b/website/src/components/demos/hexagon-demo.js new file mode 100644 index 00000000000..c0ba358960b --- /dev/null +++ b/website/src/components/demos/hexagon-demo.js @@ -0,0 +1,120 @@ +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'; + +export default class HexagonDemo extends Component { + static get data() { + return { + url: `${DATA_URI}/heatmap-data.txt`, + worker: 'workers/heatmap-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 + } + }; + } + + static get mapStyle() { + return MAPBOX_STYLES.DARK; + } + + static renderInfo(meta) { + const colorRamp = App.defaultColorRange.slice().map(color => `rgb(${color.join(',')})`); + + return ( +
+

United Kingdom Road Safety

+

Personal injury road accidents in GB from 1979

+

The layer aggregates data within the boundary of each hexagon cell

+ +
+ {colorRamp.map((c, i) => ( +
+ ))} +
+

+ Fewer Accidents + More Accidents +

+ +

+ Data source: DATA.GOV.UK +

+ +
+
+ Accidents + {readableInteger(meta.count) || 0} +
+
+
+ ); + } + + 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 ( +
+
{`latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}`}
+
{`longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}`}
+
{`${count} Accidents`}
+
+ ); + } + + render() { + const {data, params} = this.props; + + return ( +
+ {this._renderTooltip()} + +
+ ); + } +} diff --git a/website/src/components/demos/index.js b/website/src/components/demos/index.js index daa7b745567..d95eb6d3585 100644 --- a/website/src/components/demos/index.js +++ b/website/src/components/demos/index.js @@ -7,6 +7,7 @@ export {default as GeoJsonDemo} from './geojson-demo'; export {default as TripsDemo} from './trips-demo'; export {default as HomeDemo} from './home-demo'; export {default as PlotDemo} from './plot-demo'; +export {default as HexagonDemo} from './hexagon-demo'; export {default as HeatmapDemo} from './heatmap-demo'; export {default as LineDemo} from './line-demo'; export {default as IconDemo} from './icon-demo'; diff --git a/website/src/static/images/demo-thumb-3d-tiles.jpg b/website/src/static/images/demo-thumb-3d-tiles.jpg index cf1d8bcbe98..3400199f28c 100644 Binary files a/website/src/static/images/demo-thumb-3d-tiles.jpg and b/website/src/static/images/demo-thumb-3d-tiles.jpg differ diff --git a/website/src/static/images/demo-thumb-heatmap.jpg b/website/src/static/images/demo-thumb-heatmap.jpg index 126d90f6d49..beedf799142 100644 Binary files a/website/src/static/images/demo-thumb-heatmap.jpg and b/website/src/static/images/demo-thumb-heatmap.jpg differ diff --git a/website/src/static/images/demo-thumb-hexagon.jpg b/website/src/static/images/demo-thumb-hexagon.jpg new file mode 100644 index 00000000000..126d90f6d49 Binary files /dev/null and b/website/src/static/images/demo-thumb-hexagon.jpg differ diff --git a/website/src/static/images/demo-thumb-playground.jpg b/website/src/static/images/demo-thumb-playground.jpg new file mode 100644 index 00000000000..a4908675124 Binary files /dev/null and b/website/src/static/images/demo-thumb-playground.jpg differ diff --git a/website/src/static/images/playground-thumb.png b/website/src/static/images/playground-thumb.png deleted file mode 100644 index dc9b6ee8c60..00000000000 Binary files a/website/src/static/images/playground-thumb.png and /dev/null differ diff --git a/website/src/static/markdown/examples.md b/website/src/static/markdown/examples.md index b2e5f4ebd66..c5bf16e14de 100644 --- a/website/src/static/markdown/examples.md +++ b/website/src/static/markdown/examples.md @@ -18,7 +18,7 @@
- +
@@ -85,6 +85,13 @@
+
+
+ + + +
+
@@ -124,9 +131,9 @@