Add H3 layer

examples/demo-app/src/app.js

@@ -38,6 +38,7 @@ const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 /* eslint-disable no-unused-vars */
 import sampleTripData from './data/sample-trip-data';
 import sampleGeojson from './data/sample-geojson.json';
+import sampleH3Data from './data/sample-hex-id-csv';
 import sampleIconCsv, {config as savedMapConfig} from './data/sample-icon-csv';
 import {updateVisData, addDataToMap} from 'kepler.gl/actions';
 import Processors from 'kepler.gl/processors';
@@ -166,6 +167,21 @@ class App extends Component {
         data: Processors.processGeojson(sampleGeojson)
       })
     );
+
+    // load h3 hexagon
+    this.props.dispatch(
+      addDataToMap({
+        datasets: [
+          {
+            info: {
+              label: 'H3 Hexagons V2',
+              id: 'h3-hex-id'
+            },
+            data: Processors.processCsvData(sampleH3Data)
+          }
+        ]
+      })
+    );
   }
 
   render() {

examples/demo-app/src/data/sample-hex-id-csv.js

@@ -0,0 +1,109 @@
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+export default `hex_id,value
+89283082c2fffff,64
+8928308288fffff,73
+89283082c07ffff,65
+89283082817ffff,74
+89283082c3bffff,66
+89283082883ffff,76
+89283082c03ffff,60
+89283082807ffff,68
+8928308289bffff,49
+89283082c0fffff,41
+89283082c87ffff,50
+89283082d4fffff,45
+89283082c77ffff,41
+89283082c2bffff,53
+89283082803ffff,41
+89283082813ffff,43
+89283082d5bffff,45
+89283082897ffff,40
+89283082c67ffff,42
+89283082d47ffff,51
+89283082dc3ffff,52
+89283082c33ffff,43
+89283082c23ffff,40
+89283082887ffff,36
+89283082d4bffff,36
+892830828bbffff,48
+892830828b7ffff,28
+89283082c17ffff,34
+89283082c6fffff,21
+8928308288bffff,25
+892830828abffff,26
+89283082c27ffff,27
+89283082c8fffff,33
+89283082cafffff,29
+89283082c13ffff,27
+89283082cabffff,22
+89283082c63ffff,26
+89283082d43ffff,30
+89283082d53ffff,19
+892830828a3ffff,28
+89283082d1bffff,20
+89283095367ffff,17
+8928309536bffff,26
+89283082c37ffff,16
+89283082c73ffff,17
+89283082c8bffff,15
+89283082ca7ffff,27
+89283082cb3ffff,32
+89283082c0bffff,26
+89283082ca3ffff,19
+89283082dcfffff,18
+89283082c1bffff,20
+89283082ddbffff,18
+8928309534fffff,16
+89283082d03ffff,15
+89283082cbbffff,21
+89283082cd7ffff,9
+8928309534bffff,9
+892830828c7ffff,13
+89283082cc7ffff,12
+89283082d0bffff,19
+89283082dcbffff,19
+89283082dd3ffff,15
+89283082dd7ffff,15
+892830828d7ffff,13
+89283082d17ffff,5
+8928309536fffff,8
+89283095373ffff,6
+89283082cb7ffff,15
+89283082d83ffff,9
+89283082d07ffff,4
+89283082d0fffff,3
+89283082d13ffff,6
+89283082d9bffff,5
+89283082c83ffff,11
+89283082d8bffff,4
+89283082dc7ffff,5
+89283095377ffff,5
+89283082c97ffff,4
+89283082d7bffff,2
+89283082d8fffff,1
+89283095347ffff,3
+89283095363ffff,2
+8928309537bffff,4
+89283082d93ffff,6
+89283082d73ffff,1
+8928309530bffff,1
+8928309532bffff,1`;

package.json

@@ -74,6 +74,7 @@
     "deck.gl": "4.1.6",
     "fuzzy": "^0.1.3",
     "global": "^4.3.0",
+    "h3-js": "^3.1.0",
     "keymirror": "^0.1.1",
     "lodash.clonedeep": "^4.0.1",
     "lodash.debounce": "^4.0.8",

src/components/side-panel/layer-panel/layer-configurator.js

@@ -370,6 +370,15 @@ export default class LayerConfigurator extends Component {
             {...visConfiguratorProps}
           />
         </LayerConfigGroup>
+
+        {/* Cell size */}
+        <LayerConfigGroup label={'radius'}>
+          <VisConfigSlider
+            {...layer.visConfigSettings.coverage}
+            {...visConfiguratorProps}
+          />
+        </LayerConfigGroup>
+
         {/* height */}
         <LayerConfigGroup
           {...LAYER_VIS_CONFIGS.enable3d}

src/layers/h3-hexagon-layer/h3-hexagon-cell-layer.js

@@ -0,0 +1,104 @@
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {HexagonCellLayer} from 'deck.gl';
+import {CylinderGeometry} from 'luma.gl';
+import {getAngle, getRadius, getH3VerticeTransform, transformCylinderPositions} from './h3-utils';
+
+// TODO: export all dekc.gl layers from kepler.gl
+export default class H3HexagonCellLayer extends HexagonCellLayer {
+
+  getCylinderGeometry(radius) {
+    const transform = this.getTransform();
+
+    const cylinderGeometry = new CylinderGeometry({
+      radius,
+      topRadius: radius,
+      bottomRadius: radius,
+      topCap: true,
+      bottomCap: true,
+      height: 1,
+      verticalAxis: 'z',
+      nradial: 6,
+      nvertical: 1
+    });
+
+    const pos = cylinderGeometry.attributes.positions.value;
+
+    if (transform) {
+      const adjusted = transformCylinderPositions(pos, transform);
+      cylinderGeometry.attributes.positions.value = adjusted;
+    }
+
+    return cylinderGeometry;
+  }
+
+  getTransform() {
+    const {hexagonVertices, hexagonCenter} = this.props;
+
+    if (Array.isArray(hexagonVertices) &&
+      hexagonVertices.length >= 6 &&
+      Array.isArray(hexagonCenter)) {
+        const screenVertices = hexagonVertices.map(d => this.projectFlat(d));
+        const screenCentroid = this.projectFlat(hexagonCenter);
+        return getH3VerticeTransform(screenVertices, screenCentroid);
+    }
+
+    return null;
+  }
+
+  updateRadiusAngle() {
+    let {angle, radius} = this.props;
+    const {hexagonVertices} = this.props;
+
+    if (Array.isArray(hexagonVertices) && hexagonVertices.length >= 6) {
+      const {viewport} = this.context;
+      // calculate angle and vertices from hexagonVertices if provided
+      const vertices = this.props.hexagonVertices;
+
+      const vertex0 = vertices[0];
+      const vertex3 = vertices[3];
+
+      // transform to space coordinates
+      const {pixelsPerMeter} = viewport.getDistanceScales();
+      const spaceCoord0 = this.projectFlat(vertex0);
+      const spaceCoord3 = this.projectFlat(vertex3);
+
+      angle = getAngle(spaceCoord0, spaceCoord3);
+      radius = getRadius(spaceCoord0, spaceCoord3) /pixelsPerMeter[0];
+    }
+
+    this.setState({angle, radius});
+  }
+
+  draw(opts) {
+    const {uniforms} = opts;
+
+    super.draw({
+      ...opts,
+      uniforms: {
+        ...uniforms,
+        picking_uHighlightScale: this.props.extruded ? 1.4 : 0.0
+      }
+    })
+  }
+}
+
+H3HexagonCellLayer.layerName = 'H3HexagonCellLayer';

src/layers/h3-hexagon-layer/h3-hexagon-layer-icon.js

@@ -0,0 +1,48 @@
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+class H3HexagonLayerIcon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'h3-hexagon-layer-icon',
+    totalColor: 4
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <path d="M44.59,54.5H19.41L6.81,32.68,19.41,10.87H44.59L57.19,32.68Zm-23-3.83H42.38l10.38-18-10.38-18H21.62l-10.38,18Z" />
+        <polygon points="24.65 32.86 24.65 37.79 22.53 37.79 22.53 26.3 24.65 26.3 24.65 30.91 29.32 30.91 29.32 26.3 31.43 26.3 31.43 37.79 29.32 37.79 29.32 32.86 24.65 32.86" />
+        <path d="M33.79,37.05l.6-1.67a5.86,5.86,0,0,0,1.39.61,5.59,5.59,0,0,0,1.5.19A2.57,2.57,0,0,0,39,35.66a1.81,1.81,0,0,0,.61-1.46A1.29,1.29,0,0,0,38.94,33a4.55,4.55,0,0,0-2.05-.32H35.74V31h1.1A5.4,5.4,0,0,0,38,30.85a2.1,2.1,0,0,0,.77-.29,1.53,1.53,0,0,0,.51-.54,1.58,1.58,0,0,0,.15-.73,1.14,1.14,0,0,0-.51-1,2.67,2.67,0,0,0-1.5-.34,4.56,4.56,0,0,0-1.51.24,5,5,0,0,0-1.34.73l-.7-1.61a4.92,4.92,0,0,1,1.66-.83,6.91,6.91,0,0,1,2-.31,4.41,4.41,0,0,1,2.81.79,2.71,2.71,0,0,1,1,2.24,2.33,2.33,0,0,1-.54,1.62,3.45,3.45,0,0,1-1.46.93v0a3,3,0,0,1,1.67.81,2.3,2.3,0,0,1,.64,1.7A3.27,3.27,0,0,1,40.48,37a5,5,0,0,1-3.16.91A6.77,6.77,0,0,1,33.79,37.05Z" />
+      </Base>
+    );
+  }
+};
+
+export default H3HexagonLayerIcon;