Add h3 layer embedded demos (#3150)

visgl · May 28, 2019 · 55abc32 · 55abc32
1 parent f7816a8
commit 55abc32
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 37 deletions.
diff --git a/docs/layers/h3-cluster-layer.md b/docs/layers/h3-cluster-layer.md
@@ -1,3 +1,5 @@
+<!-- INJECT:"H3ClusterLayerDemo" -->
+
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />
   <img src="https://img.shields.io/badge/fp64-yes-blue.svg?style=flat-square" alt="64-bit" />
@@ -20,34 +22,33 @@ const App = ({data, viewport}) => {
    * Data format:
    * [
    *   {
-   *     name: 'Downtown',
-   *     hexagonIds: [
-   *       '882830829bfffff',
-   *       '8828308299fffff',
-   *       '8828308291fffff',
-   *       '8828308293fffff',
-   *       '882830874dfffff',
-   *       '88283095a7fffff',
-   *       '88283095a5fffff'
-         ],
-   *     population: 4780
+   *     mean: 73.333,
+   *     count: 440,
+   *     hexIds: [
+   *       '88283082b9fffff',
+   *       '88283082b1fffff',
+   *       '88283082b5fffff',
+   *       '88283082b7fffff',
+   *       '88283082bbfffff',
+   *       '882830876dfffff'
+   *     ]
    *   },
    *   ...
    * ]
    */
   const layer = new H3ClusterLayer({
     id: 'h3-cluster-layer',
     data,
+    pickable: true,
     stroked: true,
     filled: true,
     extruded: false,
-    pickable: true,
-    getHexagons: d => d.hexagonIds,
-    getLineWidth: 30,
-    getLineColor: [0, 0, 0],
-    getFillColor: d => [d.population / 10000 * 255, 255, 0],
+    getHexagons: d => d.hexIds,
+    getFillColor: d => [255, (1 - d.mean / 500) * 255, 0],
+    getLineColor: [255, 255, 255],
+    lineWidthMinPixels: 2,
     onHover: ({object, x, y}) => {
-      const tooltip = `${object.name}\nPopulation: ${object.population}`;
+      const tooltip = `density: ${object.mean}`;
       /* Update tooltip
          http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
       */

diff --git a/docs/layers/h3-hexagon-layer.md b/docs/layers/h3-hexagon-layer.md
@@ -1,3 +1,5 @@
+<!-- INJECT:"H3HexagonLayerDemo" -->
+
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />
   <img src="https://img.shields.io/badge/fp64-yes-blue.svg?style=flat-square" alt="64-bit" />
@@ -20,22 +22,25 @@ const App = ({data, viewport}) => {
    * Data format:
    * [
    *   {
-   *     hexagonId: '882830829bfffff',
-   *     eventCount: 14030
+   *     hex: '88283082b9fffff',
+   *     count: 96
    *   },
    *   ...
    * ]
    */
   const layer = new H3HexagonLayer({
     id: 'h3-hexagon-layer',
     data,
-    extruded: true,
     pickable: true,
-    getHexagon: d => d.hexagonId,
-    getElevation: d => d.eventCount / 3,
-    getColor: d => [255, (1 - d.eventCount / 20000) * 255, 0],
+    wireframe: false,
+    filled: true,
+    extruded: true,
+    elevationScale: 20,
+    getHexagon: d => d.hex,
+    getFillColor: d => [255, (1 - d.count / 500) * 255, 0],
+    getElevation: d => d.count,
     onHover: ({object, x, y}) => {
-      const tooltip = `${object.hexagonId}\nEvents: ${object.eventCount}`;
+      const tooltip = `${object.hex} count: ${object.count}`;
       /* Update tooltip
          http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
       */

diff --git a/docs/layers/s2-layer.md b/docs/layers/s2-layer.md
@@ -36,17 +36,16 @@ const App = ({data, viewport}) => {
   const layer = new S2Layer({
     id: 's2-layer',
     data,
-    opacity: 0.6,
     pickable: true,
-    stroked: true,
+    wireframe: false,
     filled: true,
     extruded: true,
     elevationScale: 1000,
     getS2Token: d => d.token,
-    getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128, 128],
+    getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128],
     getElevation: d => d.value,
     onHover: ({object, x, y}) => {
-      const tooltip = `${object.token}`;
+      const tooltip = `${object.token} value: ${object.value}`;
       /* Update tooltip
          http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
       */

diff --git a/modules/geo-layers/src/h3-layers/h3-cluster-layer.js b/modules/geo-layers/src/h3-layers/h3-cluster-layer.js
@@ -26,7 +26,7 @@ export default class H3ClusterLayer extends CompositeLayer {
         const multiPolygon = h3SetToMultiPolygon(hexagons, true);
 
         for (const polygon of multiPolygon) {
-          polygons.push({polygon, object, index: objectInfo.index});
+          polygons.push({polygon, _obj: object, _idx: objectInfo.index});
         }
       }
 
@@ -36,16 +36,16 @@ export default class H3ClusterLayer extends CompositeLayer {
 
   getPickingInfo({info}) {
     return Object.assign(info, {
-      object: info.object && info.object.object,
-      index: info.object && info.object.index
+      object: info.object && info.object._obj,
+      index: info.object && info.object._idx
     });
   }
 
   getSubLayerAccessor(accessor) {
     if (typeof accessor !== 'function') return accessor;
 
     return (object, objectInfo) => {
-      return accessor(object.object, objectInfo);
+      return accessor(object._obj, objectInfo);
     };
   }
 

diff --git a/website/src/components/demos/geo-layer-demos.js b/website/src/components/demos/geo-layer-demos.js
@@ -4,7 +4,7 @@ import Protobuf from 'pbf';
 import createLayerDemoClass from './layer-demo-base';
 import {DATA_URI} from '../../constants/defaults';
 
-import {GreatCircleLayer, S2Layer, TileLayer} from 'deck.gl';
+import {GreatCircleLayer, S2Layer, TileLayer, H3HexagonLayer, H3ClusterLayer} from 'deck.gl';
 
 export const GreatCircleLayerDemo = createLayerDemoClass({
   Layer: GreatCircleLayer,
@@ -23,20 +23,51 @@ export const GreatCircleLayerDemo = createLayerDemoClass({
 export const S2LayerDemo = createLayerDemoClass({
   Layer: S2Layer,
   dataUrl: `${DATA_URI}/sf.s2cells.json`,
-  formatTooltip: d => d.token,
+  formatTooltip: d => `${d.token} value: ${d.value}`,
   props: {
-    opacity: 0.6,
     pickable: true,
-    stroked: true,
+    wireframe: false,
     filled: true,
     extruded: true,
     elevationScale: 1000,
     getS2Token: d => d.token,
-    getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128, 128],
+    getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128],
     getElevation: d => d.value
   }
 });
 
+export const H3HexagonLayerDemo = createLayerDemoClass({
+  Layer: H3HexagonLayer,
+  dataUrl: `${DATA_URI}/sf.h3cells.json`,
+  formatTooltip: d => `${d.hex} count: ${d.count}`,
+  props: {
+    pickable: true,
+    wireframe: false,
+    filled: true,
+    extruded: true,
+    elevationScale: 20,
+    getHexagon: d => d.hex,
+    getFillColor: d => [255, (1 - d.count / 500) * 255, 0],
+    getElevation: d => d.count
+  }
+});
+
+export const H3ClusterLayerDemo = createLayerDemoClass({
+  Layer: H3ClusterLayer,
+  dataUrl: `${DATA_URI}/sf.h3clusters.json`,
+  formatTooltip: d => `density: ${d.mean}`,
+  props: {
+    pickable: true,
+    stroked: true,
+    filled: true,
+    extruded: false,
+    getHexagons: d => d.hexIds,
+    getFillColor: d => [255, (1 - d.mean / 500) * 255, 0],
+    getLineColor: [255, 255, 255],
+    lineWidthMinPixels: 2
+  }
+});
+
 export const TileLayerDemo = createLayerDemoClass({
   Layer: TileLayer,
   formatTooltip: f => JSON.stringify(f.properties),