Merge pull request #35 from teralytics/develop

Making it public

Author: ilyabo

.storybook/webpack.config.js

@@ -15,11 +15,17 @@
  *
  */
 
+const Dotenv = require('dotenv-webpack');
+
 module.exports = {
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
   },
 
+  plugins: [
+    new Dotenv()
+  ],
+
   module: {
     rules: [
       {

README.md

@@ -2,12 +2,18 @@
 
 Flow map drawing layer for [deck.gl](http://uber.github.io/deck.gl).
 
-<img src="./doc/ch.png" width="500" />
+Check out [live examples](https://teralytics.github.io/flowmap.gl/index.html). 
+
+<img src="./doc/swiss-cantons-migration.png" width="500" />
 
 ## Usage
 
 Here's a usage example:
 
+    import DeckGL from 'deck.gl';
+    import MapGL from 'react-map-gl';
+    import FlowMapLayer from 'flowmap.gl';
+
     const colors = {
       flows: {
         max: '#137CBD',
@@ -81,8 +87,15 @@ and a more complex [interactive example](./examples/InteractiveExample.tsx).
 
 ## Developing
 
+Create an `.env` file in the project root 
+containing one line: 
+
+    MapboxAccessToken=<your-mapbox-access-token>
+
+Then, run:
+
     npm install
-    MapboxAccessToken=... npm start
+    npm start
     open http://localhost:6006 to open storybook
 
 ## Acknowledgements

doc/ch.png

@@ -161,7 +161,13 @@ export default class InteractiveExample extends React.Component<Props, State> {
         onViewportChange={this.handleChangeViewport}
         mapboxApiAccessToken={mapboxAccessToken}
       >
-        <DeckGL {...viewport} width={width} height={height} layers={[flowMapLayer]} />
+        <DeckGL
+          {...viewport}
+          width={width}
+          height={height}
+          layers={[flowMapLayer]}
+          style={{ mixBlendMode: 'darken' }}
+        />
         <LegendBox top={10} left={10}>
           {diff && <DiffColorsLegend colors={flowMapLayer.props.colors as DiffColors} />}
           {diff && <hr />}

doc/swiss-cantons-migration.png

@@ -69,7 +69,7 @@ const StaticExample: React.SFC<Props> = ({ width, height, locations, flows, view
 
   return (
     <MapGL {...viewport} width={width} height={height} mapboxApiAccessToken={mapboxAccessToken}>
-      <DeckGL {...viewport} width={width} height={height} layers={[flowMapLayer]} />
+      <DeckGL {...viewport} width={width} height={height} style={{ mixBlendMode: 'darken' }} layers={[flowMapLayer]} />
     </MapGL>
   );
 };

examples/InteractiveExample.tsx

@@ -22,7 +22,7 @@ import InteractiveExample, { Flow, LocationProperties } from './InteractiveExamp
 import StaticExample from './StaticExample';
 import { getViewportForFeature } from './utils';
 
-const mapboxAccessToken = process.env.STORYBOOK_MapboxAccessToken || '';
+const mapboxAccessToken = process.env.MapboxAccessToken || '';
 
 // tslint:disable:no-var-requires
 const flows16: Flow[] = require('./data/flows-2016.json');