Restore IconLayer Example (visgl#664)

aravindiiitb · May 26, 2017 · 0eb3dc1 · 0eb3dc1
1 parent 896a3f5
commit 0eb3dc1
Show file tree

Hide file tree

Showing 10 changed files with 65,652 additions and 35,962 deletions.
diff --git a/demo/src/components/demos/icon-demo.js b/demo/src/components/demos/icon-demo.js
@@ -0,0 +1,150 @@
+import React, {Component} from 'react';
+import {MAPBOX_STYLES} from '../../constants/defaults';
+import {readableInteger} from '../../utils/format-utils';
+import IconOverlay from '../../../../examples/icon/deckgl-overlay';
+
+function stopPropagation(evt) {
+  evt.stopPropagation();
+}
+
+export default class IconDemo extends Component {
+
+  static get data() {
+    return [
+      {
+        url: 'data/meteorites.txt',
+        worker: 'workers/meteorites-decoder.js'
+      },
+      {
+        url: 'images/location-icon-mapping.json'
+      }
+    ];
+  }
+
+  static get parameters() {
+    return {
+      cluster: {displayName: 'Cluster', type: 'checkbox', value: true}
+    };
+  }
+
+  static get viewport() {
+    return {
+      ...IconOverlay.defaultViewport,
+      perspectiveEnabled: false,
+      mapStyle: MAPBOX_STYLES.DARK
+    };
+  }
+
+  static renderInfo(meta) {
+    return (
+      <div>
+        <h3>Meteorites Landings</h3>
+        <p>Data set from The Meteoritical Society showing information on all of
+          the known meteorite landings.</p>
+        <p>Hover on a pin to see the list of names</p>
+        <p>Click on a pin to see the details</p>
+        <p>Data source:
+          <a href="https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh">NASA</a>
+        </p>
+        <div className="layout">
+          <div className="stat col-1-2">No. of Meteorites
+            <b>{ readableInteger(meta.count || 0) }</b>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      x: 0,
+      y: 0,
+      hoveredItems: null,
+      expanded: false
+    };
+  }
+
+  _onHover({x, y, object}) {
+    const {viewport, params} = this.props;
+    const z = Math.floor(viewport.zoom);
+    const showCluster = params.cluster.value;
+
+    let hoveredItems = null;
+
+    if (object) {
+      if (showCluster) {
+        hoveredItems = object.zoomLevels[z].points.sort((m1, m2) => m1.year - m2.year);
+      } else {
+        hoveredItems = [object];
+      }
+    }
+
+    this.setState({x, y, hoveredItems, expanded: false});
+  }
+
+  _onClick() {
+    this.setState({expanded: true});
+  }
+
+  _renderhoveredItems() {
+    const {x, y, hoveredItems, expanded} = this.state;
+
+    if (!hoveredItems) {
+      return null;
+    }
+
+    if (expanded) {
+      return (
+        <div className="tooltip interactive"
+             style={{left: x, top: y}}
+             onWheel={stopPropagation}
+             onMouseDown={stopPropagation}>
+          {
+            hoveredItems.map(({name, year, mass, class: meteorClass}) => {
+              return (
+                <div key={name}>
+                  <h5>{name}</h5>
+                  <div>Year: {year || 'unknown'}</div>
+                  <div>Class: {meteorClass}</div>
+                  <div>Mass: {mass}g</div>
+                </div>
+              );
+            })
+          }
+        </div>
+      );
+    }
+
+    return (
+      <div className="tooltip" style={{left: x, top: y}} >
+        { hoveredItems.slice(0, 20).map(({name, year}) =>
+          <div key={name}><h5>{name} {year ? `(${year})` : ''}</h5></div>) }
+      </div>
+    );
+  }
+
+  render() {
+    const {viewport, params, data} = this.props;
+    const {hoveredItems} = this.state;
+
+    if (!data) {
+      return null;
+    }
+
+    return (
+      <div className={`icon-demo ${hoveredItems ? 'clickable' : ''}`}>
+        <IconOverlay viewport={viewport}
+          data={data[0]}
+          iconAtlas="images/location-icon-atlas.png"
+          iconMapping={data[1]}
+          showCluster={params.cluster.value}
+          onHover={this._onHover.bind(this)}
+          onClick={this._onClick.bind(this)} />
+
+        { this._renderhoveredItems() }
+      </div>
+    );
+  }
+}
diff --git a/demo/src/components/demos/index.js b/demo/src/components/demos/index.js
@@ -8,4 +8,5 @@ export {default as HomeDemo} from './home-demo';
 export {default as PlotDemo} from './plot-demo';
 export {default as HeatmapDemo} from './heatmap-demo';
 export {default as LineDemo} from './line-demo';
+export {default as IconDemo} from './icon-demo';
 export * from './layer-demos';
diff --git a/demo/src/constants/pages.js b/demo/src/constants/pages.js
@@ -48,13 +48,13 @@ export const examplePages = generatePath([
           code: getCodeUrl('examples/3d-heatmap')
         }
       },
-      // {
-      //   name: 'IconLayer',
-      //   content: {
-      //     demo: 'IconDemo',
-      //     code: getCodeUrl('examples/icon')
-      //   }
-      // },
+      {
+        name: 'IconLayer',
+        content: {
+          demo: 'IconDemo',
+          code: getCodeUrl('examples/icon')
+        }
+      },
       {
         name: 'GeoJsonLayer',
         content: {

diff --git a/demo/src/static/data/meteorites.txt b/demo/src/static/data/meteorites.txt
diff --git a/demo/src/static/images/demo-thumb-icon.jpg b/demo/src/static/images/demo-thumb-icon.jpg
diff --git a/demo/src/static/markdown/examples.md b/demo/src/static/markdown/examples.md
@@ -1,6 +1,13 @@
 ### Core Layers
 
 <div>
+  <div class="thumb">
+    <div class="bg-black" data-title="Meteorites Landings" data-name="IconLayer">
+      <a href="#/examples/core-layers/icon-layer">
+        <img src="images/demo-thumb-icon.jpg" />
+      </a>
+    </div>
+  </div>
   <div class="thumb">
     <div class="bg-black" data-title="Flights at Heathrow" data-name="LineLayer">
       <a href="#/examples/core-layers/line-layer">

diff --git a/demo/src/static/workers/meteorites-decoder.js b/demo/src/static/workers/meteorites-decoder.js
@@ -0,0 +1,45 @@
+importScripts('./util.js');
+let coordinates;
+let result = [];
+
+onmessage = function(e) {
+  const lines = e.data.text.split('\n');
+
+  lines.forEach(function(line) {
+    if (!line) {
+      return;
+    }
+    if (!coordinates) {
+      coordinates = decodePolyline(line, 5);
+      return;
+    }
+
+    const parts = line.split('\t');
+    if (parts.length < 5) {
+      return;
+    }
+
+    result.push({
+      name: parts[0],
+      class: parts[1],
+      coordinates: coordinates[decodeNumber(parts[2], 90, 32)],
+      mass: decodeNumber(parts[3], 90, 32),
+      year: decodeNumber(parts[4], 90, 32)
+    })
+
+  });
+
+  if (e.data.event === 'load') {
+    flush();
+    postMessage({action: 'end'});
+  }
+};
+
+function flush() {
+  postMessage({
+    action: 'add',
+    data: result,
+    meta: {count: result.length}
+  });
+  result = [];
+}
diff --git a/examples/icon/app.js b/examples/icon/app.js
@@ -23,7 +23,7 @@ class Root extends Component {
       iconMapping: null
     };
 
-    requestJson('./data/film-locations-2016.json', (error, response) => {
+    requestJson('./data/meteorites.json', (error, response) => {
       if (!error) {
         this.setState({data: response});
       }