GlobalFishingWatch · j8seangel · Nov 24, 2021
diff --git a/examples/get-started/pure-js/basic/app.js b/examples/get-started/pure-js/basic/app.js
@@ -9,9 +9,9 @@ const COUNTRIES =
 const INITIAL_VIEW_STATE = {
   latitude: 51.47,
   longitude: 0.45,
-  zoom: 4,
+  zoom: 1.5,
   bearing: 0,
-  pitch: 30
+  pitch: 0
 };
 
 let frame = 0;

diff --git a/examples/get-started/pure-js/basic/index.html b/examples/get-started/pure-js/basic/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset='UTF-8' />
-    <title>CARTO deck.gl example</title>
+    <title>deck.gl temporalgrid example</title>
     <style>
     body {margin: 0; padding: 0; font-family: UberMove, Helvetica, Arial, sans-serif;}
     #container {

diff --git a/examples/get-started/react/temporalgrid/README.md b/examples/get-started/react/temporalgrid/README.md
@@ -0,0 +1,22 @@
+<div align="center">
+   <img width="150" heigth="150" src="https://webpack.js.org/assets/icon-square-big.svg" />
+</div>
+
+## Example: Use deck.gl with React
+
+Uses [Webpack](https://github.com/webpack/webpack) to bundle files and serves it
+with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
+
+## Usage
+
+To install dependencies:
+
+```bash
+npm install
+# or
+yarn
+```
+
+Commands:
+* `npm start` is the development target, to serve the app and hot reload.
+* `npm run build` is the production target, to create the final bundle and write to disk.
diff --git a/examples/get-started/react/temporalgrid/app.js b/examples/get-started/react/temporalgrid/app.js
@@ -0,0 +1,68 @@
+import React, {useState, useMemo, Fragment} from 'react';
+import {render} from 'react-dom';
+import DeckGL from '@deck.gl/react';
+import {GeoJsonLayer} from '@deck.gl/layers';
+import {TemporalGridLayer} from '@deck.gl/geo-layers';
+
+// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
+const COUNTRIES =
+  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'; //eslint-disable-line
+
+const INITIAL_VIEW_STATE = {
+  latitude: 51.47,
+  longitude: 0.45,
+  zoom: 1.5,
+  bearing: 0,
+  pitch: 0
+};
+
+const temporalConfig = {
+  // data: 'https://dev-api-4wings-tiler-gee-poc-jzzp2ui3wq-uc.a.run.app/v1/4wings/tile/heatmap/{z}/{x}/{y}?date-range=2018-01-01T00:00:00.000Z,2019-04-11T23:59:59.000Z&datasets[0]=public-current-um-global4km&format=mvt&interval=day&temporal-aggregation=false',
+  data:
+    'https://gateway.api.dev.globalfishingwatch.org/v1/4wings/tile/heatmap/{z}/{x}/{y}?proxy=true&format=intArray&temporal-aggregation=false&interval=10days&datasets[0]=public-global-fishing-effort:v20201001&',
+  minZoom: 0,
+  maxZoom: 19,
+  tileSize: 512,
+  frame: 0
+};
+
+function Root() {
+  const [frame, setFrame] = useState(0);
+
+  const temporalGridLayer = useMemo(
+    () => {
+      return new TemporalGridLayer({...temporalConfig, frame});
+    },
+    [frame]
+  );
+
+  const onButtonClick = () => {
+    temporalGridLayer.getViewportData();
+  };
+
+  return (
+    <Fragment>
+      <DeckGL layers={[temporalGridLayer]} controller={true} initialViewState={INITIAL_VIEW_STATE}>
+        <GeoJsonLayer
+          id="base-map"
+          data={COUNTRIES}
+          stroked={true}
+          filled={true}
+          lineWidthMinPixels={2}
+          opacity={0.4}
+          getLineColor={[60, 60, 60]}
+          getFillColor={[200, 200, 200]}
+        />
+      </DeckGL>
+      <div style={{position: 'fixed'}}>
+        <button onClick={onButtonClick}>Click to get data in viewport</button>
+        <button style={{position: 'fixed'}} onClick={() => setFrame(f => f + 1)}>
+          Increase frame {frame}
+        </button>
+      </div>
+    </Fragment>
+  );
+}
+
+/* global document */
+render(<Root />, document.body.appendChild(document.createElement('div')));
diff --git a/examples/get-started/react/temporalgrid/package.json b/examples/get-started/react/temporalgrid/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "react-basic",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open",
+    "build": "webpack -p"
+  },
+  "dependencies": {
+    "deck.gl": "^8.6.0-alpha.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "html-webpack-plugin": "^3.0.7",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.1"
+  }
+}
diff --git a/examples/get-started/react/temporalgrid/webpack.config.js b/examples/get-started/react/temporalgrid/webpack.config.js
@@ -0,0 +1,32 @@
+// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
+// delete the local development overrides at the bottom of this file
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const CONFIG = {
+  mode: 'development',
+
+  entry: {
+    app: './app.js'
+  },
+
+  module: {
+    rules: [
+      {
+        // 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: 'babel-loader',
+        exclude: [/node_modules/],
+        options: {
+          presets: ['@babel/preset-react']
+        }
+      }
+    ]
+  },
+
+  plugins: [new HtmlWebpackPlugin({title: 'deck.gl temporalgrid example'})]
+};
+
+// This line enables bundling against src in this repo rather than installed module
+module.exports = env => (env ? require('../../../webpack.config.local')(CONFIG)(env) : CONFIG);