Reactmapgl deckgl new syntax (uber-archive#72)

* upgraded scaffold from buble to babel 7, react to react 16, all vis libraries to latest version * updating starting-with-map * updated up to module 3 * updated lesson 4 * update all lessons * modifying the docs * forgot those 2 files * changes to webpack config files
qiaoxin136 · Nov 14, 2018 · d144742 · d144742
1 parent eb10472
commit d144742
Show file tree

Hide file tree

Showing 103 changed files with 35,461 additions and 11,366 deletions.
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/.npmrc b/src/demos/building-a-geospatial-app/1-starting-with-map/.npmrc
diff --git a/...a-geospatial-app/starting-code/index.html → ...l-app/1-starting-with-map/dist/index.html b/...a-geospatial-app/starting-code/index.html → ...l-app/1-starting-with-map/dist/index.html
@@ -22,7 +22,7 @@
     </style>
   </head>
   <body>
-    <div id='root' />
-    <script type="text/javascript" src="bundle.js"></script>
+    <div id='app' />
+    <script type="text/javascript" src="/bundle.js"></script>
   </body>
 </html>
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/index.html b/src/demos/building-a-geospatial-app/1-starting-with-map/index.html
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/package.json b/src/demos/building-a-geospatial-app/1-starting-with-map/package.json
@@ -1,21 +1,35 @@
 {
+  "name": "building-a-geospatial-app",
+  "version": "0.0.1",
   "scripts": {
-    "start-local": "webpack-dev-server --env.local --progress --hot --port 3030 --open",
-    "start": "webpack-dev-server --progress --hot --port 3030 --open",
-    "build": "NODE_ENV=production webpack --env.prod=true"
+    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
   },
   "dependencies": {
-    "deck.gl": "^4.1.0",
-    "immutable": "^3.8.1",
-    "luma.gl": "^4.0.1",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "react-map-gl": "^3.0.4",
-    "react-vis": "^1.7.2"
+    "deck.gl": "^6.2.4",
+    "luma.gl": "^6.2.0",
+    "react": "^16.6.1",
+    "react-dom": "^16.6.1",
+    "react-map-gl": "^4.0.0",
+    "react-vis": "^1.11.4"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties"
+    ]
   },
   "devDependencies": {
-    "buble-loader": "^0.4.0",
-    "webpack": "^2.2.0",
-    "webpack-dev-server": "^2.2.0"
+    "@babel/core": "^7.1.5",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "react-hot-loader": "^4.3.12",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   }
 }
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/root.js b/src/demos/building-a-geospatial-app/1-starting-with-map/root.js
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/src/app.js b/src/demos/building-a-geospatial-app/1-starting-with-map/src/app.js
@@ -1,26 +1,19 @@
 /* global window */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import MapGL from 'react-map-gl';
-
-const MAPBOX_STYLE = 'mapbox://styles/mapbox/dark-v9';
-// Set your mapbox token here
-const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+import {MapStylePicker} from './controls';
 
 export default class App extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      viewport: {
-        width: window.innerWidth,
-        height: window.innerHeight,
-        longitude: -74,
-        latitude: 40.7,
-        zoom: 11,
-        maxZoom: 16
-      }
-    };
-    this._resize = this._resize.bind(this);
+  state = {
+    style: 'mapbox://styles/mapbox/light-v9',
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      longitude: -74,
+      latitude: 40.7,
+      zoom: 11,
+      maxZoom: 16
+    }
   }
 
   componentDidMount() {
@@ -32,13 +25,17 @@ export default class App extends Component {
     window.removeEventListener('resize', this._resize);
   }
 
-  _onViewportChange(viewport) {
+  onStyleChange = (style) => {
+    this.setState({style});
+  }
+
+  _onViewportChange = (viewport) => {
     this.setState({
-      viewport: {...this.state.viewport, ...viewport}
+      viewport: { ...this.state.viewport, ...viewport }
     });
   }
 
-  _resize() {
+  _resize = () => {
     this._onViewportChange({
       width: window.innerWidth,
       height: window.innerHeight
@@ -48,11 +45,12 @@ export default class App extends Component {
   render() {
     return (
       <div>
+        <MapStylePicker onStyleChange={this.onStyleChange} currentStyle={this.state.style}/>
         <MapGL
           {...this.state.viewport}
-          mapStyle={MAPBOX_STYLE}
+          mapStyle={this.state.style}
           onViewportChange={viewport => this._onViewportChange(viewport)}
-          mapboxApiAccessToken={MAPBOX_TOKEN}>
+        >
         </MapGL>
       </div>
     );

diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/src/charts.js b/src/demos/building-a-geospatial-app/1-starting-with-map/src/charts.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { charts } from "./style";
+
+import { VerticalBarSeries, XAxis, XYPlot, YAxis } from "react-vis";
+
+export default function Charts({ pickups }) {
+  return (
+    <div style={charts}>
+      <h2>Pickups by hour</h2>
+      <p>As percentage of all trips</p>
+      <XYPlot height={140} width={480}>
+        <XAxis />
+        <YAxis />
+        <VerticalBarSeries data={pickups} />
+      </XYPlot>
+    </div>
+  );
+}
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/src/controls.js b/src/demos/building-a-geospatial-app/1-starting-with-map/src/controls.js
@@ -0,0 +1,195 @@
+import React, { Component } from 'react';
+import { mapStylePicker, layerControl } from './style';
+
+export const HEXAGON_CONTROLS = {
+  showHexagon: {
+    displayName: 'Show Hexagon',
+    type: 'boolean',
+    value: true
+  },
+  radius: {
+    displayName: 'Hexagon Radius',
+    type: 'range',
+    value: 250,
+    step: 50,
+    min: 50,
+    max: 1000
+  },
+  coverage: {
+    displayName: 'Hexagon Coverage',
+    type: 'range',
+    value: 0.7,
+    step: 0.1,
+    min: 0,
+    max: 1
+  },
+  upperPercentile: {
+    displayName: 'Hexagon Upper Percentile',
+    type: 'range',
+    value: 100,
+    step: 0.1,
+    min: 80,
+    max: 100
+  },
+  radiusScale: {
+    displayName: 'Scatterplot Radius',
+    type: 'range',
+    value: 30,
+    step: 10,
+    min: 10,
+    max: 200
+  }
+};
+
+export const SCATTERPLOT_CONTROLS = {
+  radiusScale: {
+    displayName: 'Scatterplot Radius',
+    type: 'range',
+    value: 30,
+    step: 10,
+    min: 10,
+    max: 200
+  },
+  showHexagon: {
+    displayName: 'Show Hexagon',
+    type: 'boolean',
+    value: true
+  }
+};
+
+const MAPBOX_DEFAULT_MAPSTYLES = [
+  { label: 'Streets V10', value: 'mapbox://styles/mapbox/streets-v10' },
+  { label: 'Outdoors V10', value: 'mapbox://styles/mapbox/outdoors-v10' },
+  { label: 'Light V9', value: 'mapbox://styles/mapbox/light-v9' },
+  { label: 'Dark V9', value: 'mapbox://styles/mapbox/dark-v9' },
+  { label: 'Satellite V9', value: 'mapbox://styles/mapbox/satellite-v9' },
+  {
+    label: 'Satellite Streets V10',
+    value: 'mapbox://styles/mapbox/satellite-streets-v10'
+  },
+  {
+    label: 'Navigation Preview Day V4',
+    value: 'mapbox://styles/mapbox/navigation-preview-day-v4'
+  },
+  {
+    label: 'Navitation Preview Night V4',
+    value: 'mapbox://styles/mapbox/navigation-preview-night-v4'
+  },
+  {
+    label: 'Navigation Guidance Day V4',
+    value: 'mapbox://styles/mapbox/navigation-guidance-day-v4'
+  },
+  {
+    label: 'Navigation Guidance Night V4',
+    value: 'mapbox://styles/mapbox/navigation-guidance-night-v4'
+  }
+];
+
+export function MapStylePicker({ currentStyle, onStyleChange }) {
+  return (
+    <select
+      className="map-style-picker"
+      style={mapStylePicker}
+      value={currentStyle}
+      onChange={e => onStyleChange(e.target.value)}
+    >
+      {MAPBOX_DEFAULT_MAPSTYLES.map(style => (
+        <option key={style.value} value={style.value}>
+          {style.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export class LayerControls extends Component {
+  _onValueChange(settingName, newValue) {
+    const { settings } = this.props;
+    // Only update if we have a confirmed change
+    if (settings[settingName] !== newValue) {
+      // Create a new object so that shallow-equal detects a change
+      const newSettings = {
+        ...this.props.settings,
+        [settingName]: newValue
+      };
+
+      this.props.onChange(newSettings);
+    }
+  }
+
+  render() {
+    const { title, settings, propTypes = {} } = this.props;
+
+    return (
+      <div className="layer-controls" style={layerControl}>
+        {title && <h4>{title}</h4>}
+        {Object.keys(settings).map(key => (
+          <div key={key}>
+            <label>{propTypes[key].displayName}</label>
+            <div style={{ display: 'inline-block', float: 'right' }}>
+              {settings[key]}
+            </div>
+            <Setting
+              settingName={key}
+              value={settings[key]}
+              propType={propTypes[key]}
+              onChange={this._onValueChange.bind(this)}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+const Setting = props => {
+  const { propType } = props;
+  if (propType && propType.type) {
+    switch (propType.type) {
+      case 'range':
+        return <Slider {...props} />;
+
+      case 'boolean':
+        return <Checkbox {...props} />;
+      default:
+        return <input {...props} />;
+    }
+  }
+};
+
+const Checkbox = ({ settingName, value, onChange }) => {
+  return (
+    <div key={settingName}>
+      <div className="input-group">
+        <input
+          type="checkbox"
+          id={settingName}
+          checked={value}
+          onChange={e => onChange(settingName, e.target.checked)}
+        />
+      </div>
+    </div>
+  );
+};
+
+const Slider = ({ settingName, value, propType, onChange }) => {
+  const { max = 100 } = propType;
+
+  return (
+    <div key={settingName}>
+      <div className="input-group">
+        <div>
+          <input
+            type="range"
+            id={settingName}
+            min={0}
+            max={max}
+            step={max / 100}
+            value={value}
+            onChange={e => onChange(settingName, Number(e.target.value))}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/src/deckgl-layers.js b/src/demos/building-a-geospatial-app/1-starting-with-map/src/deckgl-layers.js
@@ -0,0 +1,8 @@
+import React, { Component } from 'react';
+
+const PICKUP_COLOR = [114, 19, 108];
+const DROPOFF_COLOR = [243, 185, 72];
+
+export function renderLayers(props) {
+  return [];
+}
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/src/index.js b/src/demos/building-a-geospatial-app/1-starting-with-map/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './app';
+ReactDOM.render(<App />, document.getElementById('app'));
+module.hot.accept();