Add LineLayer Example (#489)

visgl · Mar 29, 2017 · 0b77367 · 0b77367
1 parent 9eb9b61
commit 0b77367
Show file tree

Hide file tree

Showing 17 changed files with 9,749 additions and 7 deletions.
diff --git a/demo/src/components/demos/index.js b/demo/src/components/demos/index.js
@@ -7,4 +7,5 @@ export {default as HomeDemo} from './home-demo';
 export {default as PlotDemo} from './plot-demo';
 export {default as IconDemo} from './icon-demo';
 export {default as HeatmapDemo} from './heatmap-demo';
+export {default as LineDemo} from './line-demo';
 export * from './layer-demos';
diff --git a/demo/src/components/demos/line-demo.js b/demo/src/components/demos/line-demo.js
@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import {readableInteger} from '../../utils/format-utils';
+import {MAPBOX_STYLES} from '../../constants/defaults';
+import LineOverlay from '../../../../examples/line/deckgl-overlay';
+
+export default class LineDemo extends Component {
+
+  static get data() {
+    return [
+      {
+        url: 'data/flight-path-data.txt',
+        worker: 'workers/flight-path-data-decoder.js'
+      },
+      {
+        url: 'data/airports.json'
+      }
+    ];
+  }
+
+  static get parameters() {
+    return {
+      strokeWidth: {displayName: 'Stroke Width', type: 'number', value: 3, step: 1, min: 1}
+    };
+  }
+
+  static get viewport() {
+    return {
+      ...LineOverlay.defaultViewport,
+      mapStyle: MAPBOX_STYLES.DARK
+    };
+  }
+
+  static renderInfo(meta) {
+    return (
+      <div>
+        <h3>Flights In And Out Of Heathrow Airport</h3>
+        <p>Flight paths from a 4 hour window on March 28th, 2017</p>
+        <p>Flight tracking data source:
+          <a href="https://opensky-network.org/"> The OpenSky Network</a><br />
+          Airport data source:
+          <a href="http://www.naturalearthdata.com/"> Natrual Earth</a>
+        </p>
+        <div className="stat">Segments<b>{ readableInteger(meta.count || 0) }</b></div>
+      </div>
+    );
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tooltipLine1: '',
+      tooltipLine2: ''
+    };
+  }
+
+  _onHover({x, y, object}) {
+    let tooltipLine1 = '';
+    let tooltipLine2 = '';
+    if (object) {
+      tooltipLine1 = object.name;
+      tooltipLine2 = object.country || object.abbrev;
+    }
+    this.setState({x, y, tooltipLine1, tooltipLine2});
+  }
+
+  _renderTooltip() {
+    const {x, y, tooltipLine1, tooltipLine2} = this.state;
+    return tooltipLine1 && (
+      <div className="tooltip" style={{left: x, top: y}}>
+        <div>{ tooltipLine1 }</div>
+        <div>{ tooltipLine2 }</div>
+      </div>
+    );
+  }
+
+  render() {
+    const {viewport, params, data} = this.props;
+
+    if (!data) {
+      return null;
+    }
+
+    return (
+      <div>
+        <LineOverlay viewport={viewport}
+          flightPaths={data[0]}
+          airports={data[1]}
+          onHover={this._onHover.bind(this)}
+          strokeWidth={params.strokeWidth.value} />
+
+        { this._renderTooltip() }
+
+      </div>
+    );
+  }
+}
diff --git a/demo/src/constants/pages.js b/demo/src/constants/pages.js
@@ -55,6 +55,20 @@ export const examplePages = generatePath([
       code: 'code-markdown/icon.md'
     }
   },
+  {
+    name: '3D Heatmap',
+    content: {
+      demo: 'HeatmapDemo',
+      code: 'code-markdown/heatmap.md'
+    }
+  },
+  {
+    name: 'LineLayer',
+    content: {
+      demo: 'LineDemo',
+      code: 'code-markdown/line.md'
+    }
+  },
   {
     name: 'Trip Routes',
     content: {
@@ -68,13 +82,6 @@ export const examplePages = generatePath([
       demo: 'PlotDemo',
       code: 'code-markdown/plot.md'
     }
-  },
-  {
-    name: '3D Heatmap',
-    content: {
-      demo: 'HeatmapDemo',
-      code: 'code-markdown/heatmap.md'
-    }
   }
 ]);
 

diff --git a/demo/src/static/code-markdown/examples.md b/demo/src/static/code-markdown/examples.md
@@ -41,6 +41,13 @@
       </a>
       </div>
   </div>
+  <div class="thumb">
+    <div class="bg-black" data-title="Flights at Heathrow" data-name="LineLayer">
+      <a href="#/examples/line-layer">
+        <img src="images/demo-thumb-line.jpg" />
+      </a>
+      </div>
+  </div>
   <div class="thumb">
     <div class="bg-black" data-title="Taxi Trips in NYC" data-name="TripsLayer">
       <a href="#/examples/trip-routes">

diff --git a/demo/src/static/data/airports.json b/demo/src/static/data/airports.json
diff --git a/demo/src/static/data/flight-path-data.txt b/demo/src/static/data/flight-path-data.txt
diff --git a/demo/src/static/images/demo-thumb-line.jpg b/demo/src/static/images/demo-thumb-line.jpg
diff --git a/demo/src/static/workers/flight-path-data-decoder.js b/demo/src/static/workers/flight-path-data-decoder.js
@@ -0,0 +1,55 @@
+importScripts('./util.js');
+const FLUSH_LIMIT = 20000;
+let result = [];
+let index = 0;
+let count = 0;
+
+onmessage = function(e) {
+  const lines = e.data.text.split('\n');
+
+  lines.forEach(function(line) {
+
+    if (!line) {
+      return;
+    }
+
+    var parts = line.split('\t');
+    var coords0 = parts[2].split('\x01').map(function(str) { return decodePolyline(str, 5) });
+    var coords1 = parts[3].split('\x01').map(function(str) { return decodePolyline(str, 1) });
+
+    coords0.forEach(function(lineStr, i) {
+      for (var j = 1; j < lineStr.length; j++) {
+        var prevPt0 = coords0[i][j - 1],
+            prevPt1 = coords1[i][j - 1],
+            currPt0 = coords0[i][j],
+            currPt1 = coords1[i][j];
+
+        result.push({
+          name: parts[0],
+          country: parts[1],
+          start: [prevPt0[0], prevPt0[1], prevPt1[0]],
+          end: [currPt0[0], currPt0[1], currPt1[0]]
+        });
+        count++;
+      }
+    });
+
+    if (result.length >= FLUSH_LIMIT) {
+      flush();
+    }
+  });
+
+  if (e.data.event === 'load') {
+    flush();
+    postMessage({action: 'end'});
+  }
+};
+
+function flush() {
+  postMessage({
+    action: 'add',
+    data: result,
+    meta: {count}
+  });
+  result = [];
+}
diff --git a/examples/line/README.md b/examples/line/README.md
@@ -0,0 +1,13 @@
+This is a minimal standalone version of the LineLayer example
+on [deck.gl](http://deck.gl) website.
+
+### Usage
+Copy the content of this folder to your project. Run
+```
+npm install
+npm start
+```
+
+### Data format
+Sample data is stored in the `data` folder. To use your own data, checkout
+the [documentation of LineLayer](../../docs/layers/line-layer.md).
diff --git a/examples/line/app.js b/examples/line/app.js
@@ -0,0 +1,75 @@
+/* global window,document */
+import React, {Component} from 'react';
+import {render} from 'react-dom';
+import MapGL from 'react-map-gl';
+import DeckGLOverlay from './deckgl-overlay.js';
+
+import {json as requestJson} from 'd3-request';
+
+// Set your mapbox token here
+const MAPBOX_TOKEN = process.env.MAPBOX_ACCESS_TOKEN; // eslint-disable-line
+
+class Root extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewport: {
+        ...DeckGLOverlay.defaultViewport,
+        width: 500,
+        height: 500
+      },
+      flightPaths: null,
+      airports: null
+    };
+
+    requestJson('./data/heathrow-flights.json', (error, response) => {
+      if (!error) {
+        this.setState({flightPaths: response});
+      }
+    });
+    requestJson('./data/airports.json', (error, response) => {
+      if (!error) {
+        this.setState({airports: response});
+      }
+    });
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this._resize.bind(this));
+    this._resize();
+  }
+
+  _resize() {
+    this._onChangeViewport({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  }
+
+  _onChangeViewport(viewport) {
+    this.setState({
+      viewport: {...this.state.viewport, ...viewport}
+    });
+  }
+
+  render() {
+    const {viewport, flightPaths, airports} = this.state;
+
+    return (
+      <MapGL
+        {...viewport}
+        mapStyle="mapbox://styles/mapbox/dark-v9"
+        perspectiveEnabled={true}
+        onChangeViewport={this._onChangeViewport.bind(this)}
+        mapboxApiAccessToken={MAPBOX_TOKEN}>
+        <DeckGLOverlay viewport={viewport}
+          strokeWidth={3}
+          flightPaths={flightPaths}
+          airports={airports} />
+      </MapGL>
+    );
+  }
+}
+
+render(<Root />, document.body.appendChild(document.createElement('div')));
diff --git a/examples/line/data/airports.json b/examples/line/data/airports.json
@@ -0,0 +1,59 @@
+[
+{"type":"mid","name":"Rotterdam The Hague","abbrev":"RTM","coordinates":[4.433844349628764,51.94913018993814]},
+{"type":"major","name":"Liverpool John Lennon","abbrev":"LPL","coordinates":[-2.858620657849378,53.3363751054422]},
+{"type":"major","name":"Newcastle Int'l","abbrev":"NCL","coordinates":[-1.71034578407216,55.03708486080194]},
+{"type":"major","name":"Bremen","abbrev":"BRE","coordinates":[8.785861770313199,53.052287104156]},
+{"type":"major","name":"Bristol Int'l","abbrev":"BRS","coordinates":[-2.710864691343084,51.386293418914825]},
+{"type":"major","name":"Cardiff","abbrev":"CWL","coordinates":[-3.339568764291176,51.398622091101736]},
+{"type":"major","name":"Edinburgh Int'l","abbrev":"EDI","coordinates":[-3.364284685135544,55.94855401136389]},
+{"type":"mid","name":"Inverness","abbrev":"INV","coordinates":[-4.063591755871404,57.53950029234237]},
+{"type":"mid","name":"Kirkwall","abbrev":"KOI","coordinates":[-2.901378495245076,58.954428878830335]},
+{"type":"mid","name":"Sumburgh","abbrev":"LSI","coordinates":[-1.288060688387535,59.87668995989991]},
+{"type":"major","name":"London Luton","abbrev":"LTN","coordinates":[-0.376227267397439,51.88029525709689]},
+{"type":"major","name":"Malpensa","abbrev":"MXP","coordinates":[8.712959535024366,45.627440514038085]},
+{"type":"major","name":"Nurnberg","abbrev":"NUE","coordinates":[11.077417973909554,49.49450521703444]},
+{"type":"major","name":"Shannon","abbrev":"SNN","coordinates":[-8.922428855576856,52.69345371025315]},
+{"type":"major","name":"Turin Int'l","abbrev":"TRN","coordinates":[7.644162303621326,45.19166007346416]},
+{"type":"major","name":"Bordeaux","abbrev":"BOD","coordinates":[-0.701793449075243,44.83211086626738]},
+{"type":"mid","name":"St Gatien","abbrev":"DOL","coordinates":[0.158653528230218,49.3616609986609]},
+{"type":"mid","name":"Lille-Lesquin","abbrev":"LIL","coordinates":[3.105964997998134,50.57164239295805]},
+{"type":"major","name":"Toulouse-Blagnac","abbrev":"TLS","coordinates":[1.373509185511526,43.63046256616008]},
+{"type":"major","name":"Leeds Bradford","abbrev":"LBA","coordinates":[-1.659831067347459,53.869081947443426]},
+{"type":"major","name":"Cork","abbrev":"ORK","coordinates":[-8.49014199983817,51.84854054199234]},
+{"type":"mid","name":"Glasgow Prestwick","abbrev":"PIK","coordinates":[-4.610971639010681,55.50889181051419]},
+{"type":"military mid","name":"Chalons Vatry","abbrev":"XCR","coordinates":[4.191119825742889,48.780394613856636]},
+{"type":"major","name":"Luxembourg-Findel","abbrev":"LUX","coordinates":[6.216421217287303,49.634304092510156]},
+{"type":"mid","name":"Deurne","abbrev":"ANR","coordinates":[4.450922773999087,51.18912850638063]},
+{"type":"major","name":"London Gatwick","abbrev":"LGW","coordinates":[-0.162961639139456,51.15575675192744]},
+{"type":"major","name":"Manchester Int'l","abbrev":"MAN","coordinates":[-2.273371590694273,53.3624896066518]},
+{"type":"major","name":"Marseille Provence Airport","abbrev":"MRS","coordinates":[5.221379177203371,43.44106000164678]},
+{"type":"major","name":"Birmingham Int'l","abbrev":"BHX","coordinates":[-1.733731704344524,52.4529085542838]},
+{"type":"major","name":"Dresden","abbrev":"DRS","coordinates":[13.764967144004657,51.1250912428871]},
+{"type":"mid","name":"Annemasse","abbrev":"QNJ","coordinates":[6.264910853641589,46.195728328626046]},
+{"type":"mid","name":"Strasbourg","abbrev":"SXB","coordinates":[7.627841966889239,48.544696172175925]},
+{"type":"major","name":"Cologne/Bonn","abbrev":"CGN","coordinates":[7.122359755245384,50.87825966294708]},
+{"type":"major","name":"Stavanger Sola","abbrev":"SVG","coordinates":[5.629810329721797,58.882156484218456]},
+{"type":"mid","name":"Bilbao","abbrev":"BIO","coordinates":[-2.906090116798052,43.30508298111946]},
+{"type":"major","name":"Brussels","abbrev":"BRU","coordinates":[4.484640324082721,50.89729496415107]},
+{"type":"major","name":"Belfast Int'l","abbrev":"BFS","coordinates":[-6.216169437349579,54.661557547010304]},
+{"type":"major","name":"Orio Al Serio","abbrev":"BGY","coordinates":[9.6989176939974,45.66549805606944]},
+{"type":"major","name":"Dusseldorf Int'l","abbrev":"DUS","coordinates":[6.764944466121738,51.27818204207739]},
+{"type":"major","name":"Stuttgart","abbrev":"STR","coordinates":[9.193951089455355,48.69010513589127]},
+{"type":"major","name":"Geneva","abbrev":"GVA","coordinates":[6.107945774236033,46.231009510157946]},
+{"type":"mid","name":"Lyon-Saint Exupery","abbrev":"LYS","coordinates":[5.075944318134585,45.721018683466895]},
+{"type":"major","name":"Glasgow Int'l","abbrev":"GLA","coordinates":[-4.431677969951068,55.864182857035445]},
+{"type":"major","name":"Paris Orly","abbrev":"ORY","coordinates":[2.367379127837731,48.731303045805156]},
+{"type":"major","name":"Copenhagen","abbrev":"CPH","coordinates":[12.649350868450766,55.62850172215277]},
+{"type":"major","name":"Dublin","abbrev":"DUB","coordinates":[-6.243884910371393,53.42700828497003]},
+{"type":"major","name":"Hamburg","abbrev":"HAM","coordinates":[10.005647830925,53.63200116408657]},
+{"type":"major","name":"Franz-Josef-Strauss","abbrev":"MUC","coordinates":[11.788062719243683,48.353837396160834]},
+{"type":"major","name":"Zurich Int'l","abbrev":"ZRH","coordinates":[8.562212795347643,47.45238950649154]},
+{"type":"mid","name":"Gosselies","abbrev":"CRL","coordinates":[4.454373629816501,50.457129654956674]},
+{"type":"major","name":"Munich Freight Terminal","abbrev":"MUCf","coordinates":[11.769482859365423,48.34979640783765]},
+{"type":"major","name":"Schiphol","abbrev":"AMS","coordinates":[4.764376932328116,52.30893238898216]},
+{"type":"major","name":"London Heathrow","abbrev":"LHR","coordinates":[-0.453156652063309,51.47099587999383]},
+{"type":"major","name":"Linate","abbrev":"LIN","coordinates":[9.27996629691061,45.46039384562521]},
+{"type":"major","name":"Charles de Gaulle Int'l","abbrev":"CDG","coordinates":[2.541867767394572,49.01442009693854]},
+{"type":"major","name":"Berlin-Tegel Int'l","abbrev":"TXL","coordinates":[13.290309092507398,52.55442870441008]},
+{"type":"major","name":"Frankfurt Int'l","abbrev":"FRA","coordinates":[8.571822869076074,50.050677089520725]}
+]