Merge branch 'master' into h3-layer-prop-forwarding

docs/layers/s2-layer.md

@@ -5,14 +5,13 @@
 
 # S2Layer (Experimental)
 
-The S2Layer renders filled and/or stroked polygons, with geometry automatically calculated based on an S2 token (geospatial index).
+The S2Layer renders filled and/or stroked cells of the [S2 geospatial indexing system](http://s2geometry.io/).
 
-Remarks:
-
-* Uses the [`s2-geometry`](http://s2geometry.io/) library for S2 polygon calculations.
+The JavaScript implementation of S2 [`s2-geometry`](https://git.coolaj86.com/coolaj86/s2-geometry.js) is used for cell boundary calculations.
 
 ```js
-import DeckGL, {PolygonLayer} from '@deck.gl/s2-layers';
+import DeckGL from 'deck.gl';
+import {S2Layer} from '@deck.gl/geo-layers';
 
 const App = ({data, viewport}) => {
 
@@ -43,7 +42,7 @@ const App = ({data, viewport}) => {
     filled: true,
     wireframe: true,
     lineWidthMinPixels: 1,
-    getToken: d => d.token,
+    getS2Token: d => d.token,
     getElevation: d => d.population / d.area / 10,
     getFillColor: d => [d.population / d.area / 60, 140, 0],
     getLineColor: [80, 80, 80],
@@ -62,23 +61,23 @@ const App = ({data, viewport}) => {
 
 ## Properties
 
-Inherits from all [Base Layer](/docs/api-reference/layer.md) properties.
+Inherits from all [Base Layer](/docs/api-reference/layer.md), [CompositeLayer](/docs/api-reference/composite-layer.md), and [PolygonLayer](/docs/api-reference/polygon-layer.md) properties, plus the following:
 
-Accepts all properties from `PolygonLayer`, except `getPolygon` has been replaced with `getToken`:
+### Data Accessors
 
-### Render Options
+##### `getS2Token` (Function, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
 
-Accepts all render options from `PolygonLayer`.
+Check [S2 Cell](http://s2geometry.io/devguide/s2cell_hierarchy) for more details.
 
-### Data Accessors
+* default: `object => object.token`
 
-Accepts all accessors from `PolygonLayer`, except `getPolygon` has been replaced with `getToken`:
 
-##### `getToken` (Function, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
+## Sub Layers
 
-Check [S2 Cell](http://s2geometry.io/devguide/s2cell_hierarchy) for more details.
+The `S2Layer` renders the following sublayers:
+
+* `cell` - a [PolygonLayer](/docs/layers/polygon-layer.md) rendering all S2 cells.
 
-* default: `object => object.token`
 
 ## Source
 

docs/layers/trips-layer.md

@@ -4,37 +4,39 @@ This layer renders animated paths that represent vehicle trips.
 
     import TripsLayer from './trips-layer';
 
-Inherits from all [Base Layer](/docs/api-reference/layer.md) properties.
+## Properties
 
-##### `getPath` (Function, optional)
+Inherits from all [Base Layer](/docs/api-reference/layer.md) and [PathLayer](/docs/layers/path-layer.md) properties, plus the following:
 
-- Default: `d => d.path`
-
-Called for each data object to retreive paths.
-Returns an array of navigation points on a single path.
-Each navigation point is defined as an array of three numbers: `[longitude, latitude, timestamp]`.
-Points should be sorted by timestamp.
-
-##### `getColor` (Function|Array, optional)
-
-- Default: `d => d.color`
-
-Called for each data object to retreive stroke colors.
-Returns an array in the form of `[r, g, b]`.
+### Render Options
 
 ##### `currentTime` (Number, optional)
 
 - Default: `0`
 
-The timestamp that represents the current time of the frame.
-This value is used with the timestamps from `getPath` to determine where the vehicle positions are.
+The current time of the frame, i.e. the playhead of the animation.
+
+This value should be in the same units as the timestamps from `getPath`.
 
 ##### `trailLength` (Number, optional)
 
 - Default: `120`
 
 How long it takes for a path to completely fade out.
 
+This value should be in the same units as the timestamps from `getPath`.
+
+### Data Accessors
+
+##### `getPath` (Function, optional)
+
+- Default: `d => d.path`
+
+Called for each data object to retreive paths.
+Returns an array of navigation points on a single path.
+Each navigation point is defined as an array of three numbers: `[longitude, latitude, timestamp]`.
+Points should be sorted by timestamp.
+
 
 # Source
 

examples/layer-browser/src/examples/additional-layers.js

@@ -123,6 +123,7 @@ const S2LayerExample = {
   layer: S2Layer,
   props: {
     data: dataSamples.s2cells,
+    // data: ['14','1c','24','2c','34','3c'],
     opacity: 0.6,
     getS2Token: f => f.token,
     getFillColor: f => [f.value * 255, (1 - f.value) * 255, (1 - f.value) * 128, 128],

examples/webpack.config.local.js

@@ -30,6 +30,10 @@ function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR) {
 
     devtool: 'source-map',
 
+    node: {
+      fs: 'empty'
+    },
+
     resolve: {
       // mainFields: ['esnext', 'module', 'main'],
 

examples/website/trips/app.js

@@ -19,7 +19,6 @@ export const INITIAL_VIEW_STATE = {
   longitude: -74,
   latitude: 40.72,
   zoom: 13,
-  maxZoom: 16,
   pitch: 45,
   bearing: 0
 };
@@ -66,7 +65,8 @@ export class App extends Component {
         getPath: d => d.segments,
         getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
         opacity: 0.3,
-        strokeWidth: 2,
+        widthMinPixels: 2,
+        rounded: true,
         trailLength,
         currentTime: this.state.time
       }),

modules/geo-layers/src/s2-layer/s2-layer.js

@@ -23,19 +23,12 @@ import {PolygonLayer} from '@deck.gl/layers';
 
 import {getS2Polygon} from './s2-utils';
 
-function getDefaultProps() {
-  const defaultProps = {};
-  for (const prop in PolygonLayer.defaultProps) {
-    if (prop !== 'getPolygon') {
-      defaultProps[prop] = PolygonLayer.defaultProps[prop];
-    }
-  }
-
-  defaultProps.getS2Token = {type: 'accessor', value: f => f.token};
-  return defaultProps;
-}
-
-const defaultProps = getDefaultProps();
+const defaultProps = Object.assign(
+  {
+    getS2Token: {type: 'accessor', value: d => d.token}
+  },
+  PolygonLayer.defaultProps
+);
 
 export default class S2Layer extends CompositeLayer {
   renderLayers() {

modules/geo-layers/src/s2-layer/s2-utils.js

@@ -2,11 +2,6 @@
 // which is perfect since it works in the browser.
 import {S2} from 's2-geometry';
 
-// import {hexToDec} from 'hex2dec';
-function hexToDec(hexString) {
-  return String(parseInt(hexString, 16));
-}
-
 /**
  * Given a S2 hex token this function returns cell level
  * cells level is a number between 1 and 30
@@ -29,9 +24,52 @@ function getLevelFromToken(token) {
  * */
 function getIdFromToken(token) {
   // pad token with zeros to make the length 16
-  const padding = 16 - token.length;
-  const paddedToken = token + new Array(padding + 1).join('0');
-  return hexToDec(paddedToken);
+  const paddedToken = token.padEnd(16, '0');
+  return String(parseInt(paddedToken, 16));
+}
+
+const RADIAN_TO_DEGREE = 180 / Math.PI;
+const MAX_RESOLUTION = 100;
+
+/* Adapted from s2-geometry's S2.XYZToLatLng */
+function XYZToLngLat([x, y, z]) {
+  const lat = Math.atan2(z, Math.sqrt(x * x + y * y));
+  const lng = Math.atan2(y, x);
+
+  return [lng * RADIAN_TO_DEGREE, lat * RADIAN_TO_DEGREE];
+}
+
+/* Adapted from s2-geometry's S2Cell.getCornerLatLngs */
+function getGeoBounds({face, ij, level}) {
+  const result = [];
+  const offsets = [[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]];
+
+  // The S2 cell edge is curved: http://s2geometry.io/
+  // This is more prominent at lower levels
+  // resolution is the number of segments to generate per edge.
+  // We exponentially reduce resolution as level increases so it doesn't affect perf
+  // when there are a large number of cells
+  const resolution = Math.max(1, MAX_RESOLUTION * Math.pow(2, -level));
+
+  for (let i = 0; i < 4; i++) {
+    const offset = offsets[i].slice(0);
+    const nextOffset = offsets[i + 1];
+    const stepI = (nextOffset[0] - offset[0]) / resolution;
+    const stepJ = (nextOffset[1] - offset[1]) / resolution;
+
+    for (let j = 0; j < resolution; j++) {
+      offset[0] += stepI;
+      offset[1] += stepJ;
+      // Cell can be represented by coordinates IJ, ST, UV, XYZ
+      // http://s2geometry.io/devguide/s2cell_hierarchy#coordinate-systems
+      const st = S2.IJToST(ij, level, offset);
+      const uv = S2.STToUV(st);
+      const xyz = S2.FaceUVToXYZ(face, uv);
+
+      result.push(XYZToLngLat(xyz));
+    }
+  }
+  return result;
 }
 
 /**
@@ -46,9 +84,6 @@ export function getS2Polygon(token) {
   const level = getLevelFromToken(token);
 
   const s2cell = S2.S2Cell.FromLatLng(S2.idToLatLng(id), level);
-  const corners = s2cell.getCornerLatLngs();
-  const polygon = corners.map(corner => [corner.lng, corner.lat]);
-  // close the polygon: first and last position of the ring should be the same
-  polygon.push(polygon[0]);
-  return polygon;
+
+  return getGeoBounds(s2cell);
 }