react-globe.gl 2.20.2 → 2.21.0

package/README.md

@@ -3,7 +3,7 @@ react-globe.gl
 
 [![NPM package][npm-img]][npm-url]
 [![Build Size][build-size-img]][build-size-url]
-[![Dependencies][dependencies-img]][dependencies-url]
+[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
 
 React bindings for the [globe.gl](https://github.com/vasturiano/globe.gl) UI component.
 
@@ -40,25 +40,26 @@ Check out the examples:
 * [World Volcanoes](https://vasturiano.github.io/react-globe.gl/example/volcanoes/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/volcanoes/index.html))
 * [US outbound international airline routes](https://vasturiano.github.io/react-globe.gl/example/airline-routes/us-international-outbound.html) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/airline-routes/us-international-outbound.html))
 * [Earth Shield](https://vasturiano.github.io/react-globe.gl/example/earth-shield/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/earth-shield/index.html))
+* [Satellites](https://vasturiano.github.io/react-globe.gl/example/satellites/index.html) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/satellites/index.html))
 * [Submarine Cables](https://vasturiano.github.io/react-globe.gl/example/submarine-cables/index.html) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/submarine-cables/index.html))
 * [Moon Landing Sites](https://vasturiano.github.io/react-globe.gl/example/moon-landing-sites/index.html) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/moon-landing-sites/index.html))
 
 
 ## Quick start
 
-```
+```js
 import Globe from 'react-globe.gl';
 ```
 
 or using a script tag
 
-```
+```html
 <script src="//unpkg.com/react-globe.gl"></script>
 ```
 
 then
 
-```
+```jsx
 ReactDOM.render(
   <Globe
     pointsData={myData}
@@ -310,6 +311,24 @@ ReactDOM.render(
 | <b>onLabelRightClick</b> | <i>func</i>| *-* | Callback function for label right-clicks. The label object, the event object and the clicked coordinates are included as arguments: `onLabelRightClick(label, event, { lat, lng, altitude })`. |
 | <b>onLabelHover</b> | <i>func</i>| *-* | Callback function for label mouse over events. The label object (or `null` if there's no label under the mouse line of sight) is included as the first argument, and the previous label object (or `null`) as second argument: `onLabelHover(label, prevlabel)`. |
 
+### Objects Layer
+
+<p align="center">
+   <a href="//vasturiano.github.io/react-globe.gl/example/satellites/"><img width="70%" src="https://vasturiano.github.io/react-globe.gl/example/satellites/preview.png"></a>
+</p>
+
+| Prop | Type | Default | Description |
+| --- | :--: | :--: | --- |
+| <b>objectsData</b> | <i>array</i> | `[]` | Getter/setter for the list of custom 3D objects to represent in the objects layer. Each object is rendered according to the `objectThreeObject` method. |
+| <b>objectLabel</b> | <i>string</i> or <i>func</i> | `name` | Object accessor function or attribute for its own tooltip label. Supports plain text or HTML content. |
+| <b>objectLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lat` | Object accessor function, attribute or a numeric constant for the latitude coordinate of the object's position. |
+| <b>objectLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lng` | Object accessor function, attribute or a numeric constant for the longitude coordinate of the object's position. |
+| <b>objectAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.01 | Object accessor function, attribute or a numeric constant for the altitude coordinate of the object's position, in terms of globe radius units. |
+| <b>objectThreeObject</b> | <i>Object3d</i>, <i>string</i> or <i>func</i> | *A yellow sphere* | Object accessor function or attribute for defining a custom 3d object to render as part of the objects map layer. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). |
+| <b>onObjectClick</b> | <i>func</i> | *-* | Callback function for object (left-button) clicks. The object itself, the event and the clicked coordinates are included as arguments: `onObjectClick(obj, event, { lat, lng, altitude })`. |
+| <b>onObjectRightClick</b> | <i>func</i> | *-* | Callback function for object right-clicks. The object itself, the event and the clicked coordinates are included as arguments: `onObjectRightClick(obj, event, { lat, lng, altitude })`. |
+| <b>onObjectHover</b> | <i>func</i> | *-* | Callback function for object mouse over events. The object itself (or `null` if there's no object under the mouse line of sight) is included as the first argument, and the previous object (or `null`) as second argument: `onObjectHover(obj, prevObj)`. |
+
 ### Custom Layer
 
 <p align="center">
@@ -320,8 +339,8 @@ ReactDOM.render(
 | --- | :--: | :--: | --- |
 | <b>customLayerData</b> | <i>array</i> | `[]` | List of items to represent in the custom map layer. Each item is rendered according to the `customThreeObject` method. |
 | <b>customLayerLabel</b> | <i>string</i> or <i>func</i> | `name` | Object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. |
-| <b>customThreeObject</b> | <i>Object3d</i>, <i>string</i> or <i>func</i>| *-* |Object accessor function or attribute for generating a custom 3d object to render as part of the custom map layer. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). The callback method's signature includes the object's data as well as the globe radius: `customThreeObject((objData, globeRadius) => { ... })`. |
-| <b>customThreeObjectUpdate</b> | <i>string</i> or <i>func</i>| *-* |Object accessor function or attribute for updating an existing custom 3d object with new data. This can be used for performance improvement on data updates as the objects don't need to be removed and recreated at each update. The callback method's signature includes the object to be update, its new data and the globe radius: `customThreeObjectUpdate((obj, objData, globeRadius) => { ... })`. |
+| <b>customThreeObject</b> | <i>Object3d</i>, <i>string</i> or <i>func</i>| *-* |Object accessor function or attribute for generating a custom 3d object to render as part of the custom map layer. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). |
+| <b>customThreeObjectUpdate</b> | <i>string</i> or <i>func</i>| *-* |Object accessor function or attribute for updating an existing custom 3d object with new data. This can be used for performance improvement on data updates as the objects don't need to be removed and recreated at each update. The callback method's signature includes the object to be update and its new data: `customThreeObjectUpdate((obj, objData) => { ... })`. |
 | <b>onCustomLayerClick</b> | <i>func</i>| *-* | Callback function for custom object (left-button) clicks. The custom object, the event object and the clicked coordinates are included as arguments: `onCustomLayerClick(obj, event, { lat, lng, altitude })`. |
 | <b>onCustomLayerRightClick</b> | <i>func</i>| *-* | Callback function for custom object right-clicks. The custom object, the event object and the clicked coordinates are included as arguments: `onCustomLayerRightClick(obj, event, { lat, lng, altitude })`. |
 | <b>onCustomLayerHover</b> | <i>func</i>| *-* | Callback function for custom object mouse over events. The custom object (or `null` if there's no object under the mouse line of sight) is included as the first argument, and the previous custom object (or `null`) as second argument: `onCustomLayerHover(obj, prevObj)`. |
@@ -351,6 +370,7 @@ ReactDOM.render(
 
 | Method | Arguments | Description |
 | --- | :--: | --- |
+| <b>getGlobeRadius</b> | *-* | Returns the cartesian distance of a globe radius in absolute spatial units. |
 | <b>getCoords</b> | <i>lat</i>, <i>lng</i> [,<i>altitude</i>=`0`] | Utility method to translate spherical coordinates to cartesian. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the equivalent `{x, y, z}` cartesian spatial coordinates. |
 | <b>getScreenCoords</b> | <i>lat</i>, <i>lng</i> [,<i>altitude</i>=`0`] | Utility method to translate spherical coordinates to the viewport domain. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the current equivalent `{x, y}` in viewport coordinates. |
 | <b>toGeoCoords</b> | { <i>x</i>, <i>y</i>, <i>z</i> } | Utility method to translate cartesian coordinates to the geographic domain. Given a set of 3D cartesian coordinates `{x, y, z}`, returns the equivalent `{lat, lng, altitude}` spherical coordinates. Altitude is defined in terms of globe radius units. |
@@ -360,9 +380,9 @@ ReactDOM.render(
 
 [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url)!
 
-[npm-img]: https://img.shields.io/npm/v/react-globe.gl.svg
+[npm-img]: https://img.shields.io/npm/v/react-globe.gl
 [npm-url]: https://npmjs.org/package/react-globe.gl
-[build-size-img]: https://img.shields.io/bundlephobia/minzip/react-globe.gl.svg
+[build-size-img]: https://img.shields.io/bundlephobia/minzip/react-globe.gl
 [build-size-url]: https://bundlephobia.com/result?p=react-globe.gl
-[dependencies-img]: https://img.shields.io/david/vasturiano/react-globe.gl.svg
-[dependencies-url]: https://david-dm.org/vasturiano/react-globe.gl
+[npm-downloads-img]: https://img.shields.io/npm/dt/react-globe.gl
+[npm-downloads-url]: https://www.npmtrends.com/react-globe.gl

package/dist/react-globe.gl.common.js

@@ -159,6 +159,15 @@ var GlobePropTypes = {
   onLabelClick: PropTypes__default["default"].func,
   onLabelRightClick: PropTypes__default["default"].func,
   onLabelHover: PropTypes__default["default"].func,
+  objectsData: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+  objectLat: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  objectLng: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  objectAltitude: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  objectThreeObject: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  objectLabel: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  onObjectClick: PropTypes__default["default"].func,
+  onObjectRightClick: PropTypes__default["default"].func,
+  onObjectHover: PropTypes__default["default"].func,
   customLayerData: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
   customThreeObject: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].func]),
   customThreeObjectUpdate: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
@@ -174,7 +183,7 @@ var GlobePropTypes = {
 
 var Globe = fromKapsule__default["default"](GlobeKapsule__default["default"], {
   methodNames: [// bind methods
-  'pauseAnimation', 'resumeAnimation', 'pointOfView', 'scene', 'camera', 'renderer', 'postProcessingComposer', 'controls', 'getCoords', 'getScreenCoords', 'toGeoCoords', 'toGlobeCoords'],
+  'pauseAnimation', 'resumeAnimation', 'pointOfView', 'scene', 'camera', 'renderer', 'postProcessingComposer', 'controls', 'getGlobeRadius', 'getCoords', 'getScreenCoords', 'toGeoCoords', 'toGlobeCoords'],
   initPropNames: ['animateIn', 'waitForGlobeReady', 'rendererConfig']
 });
 Globe.displayName = 'Globe';

package/dist/react-globe.gl.d.ts

@@ -56,8 +56,8 @@ interface GlobeProps extends ConfigOptions {
   atmosphereAltitude?: number;
   globeMaterial?: Material;
   onGlobeReady?: () => void;
-  onGlobeClick?: (coords: { lat, lng }, event: MouseEvent) => void;
-  onGlobeRightClick?: (coords: { lat, lng }, event: MouseEvent) => void;
+  onGlobeClick?: (coords: { lat: number, lng: number }, event: MouseEvent) => void;
+  onGlobeRightClick?: (coords: { lat: number, lng: number }, event: MouseEvent) => void;
 
   // Points layer
   pointsData?: object[];
@@ -70,8 +70,8 @@ interface GlobeProps extends ConfigOptions {
   pointsMerge?: boolean;
   pointsTransitionDuration?: number;
   pointLabel?: ObjAccessor<string>;
-  onPointClick?: (point: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onPointRightClick?: (point: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onPointClick?: (point: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onPointRightClick?: (point: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onPointHover?: (point: object | null, prevPoint: object | null) => void;
 
   // Arcs layer
@@ -92,8 +92,8 @@ interface GlobeProps extends ConfigOptions {
   arcDashAnimateTime?: ObjAccessor<number>;
   arcsTransitionDuration?: number;
   arcLabel?: ObjAccessor<string>;
-  onArcClick?: (arc: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onArcRightClick?: (arc: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onArcClick?: (arc: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onArcRightClick?: (arc: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onArcHover?: (arc: object | null, prevArc: object | null) => void;
 
   // Polygons layer
@@ -108,8 +108,8 @@ interface GlobeProps extends ConfigOptions {
   polygonCapCurvatureResolution?: ObjAccessor<number>;
   polygonsTransitionDuration?: number;
   polygonLabel?: ObjAccessor<string>;
-  onPolygonClick?: (polygon: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onPolygonRightClick?: (polygon: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onPolygonClick?: (polygon: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onPolygonRightClick?: (polygon: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onPolygonHover?: (polygon: object | null, prevPolygon: object | null) => void;
 
   // Paths layer
@@ -127,8 +127,8 @@ interface GlobeProps extends ConfigOptions {
   pathDashAnimateTime?: ObjAccessor<number>;
   pathTransitionDuration?: number;
   pathLabel?: ObjAccessor<string>;
-  onPathClick?: (path: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onPathRightClick?: (path: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onPathClick?: (path: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onPathRightClick?: (path: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onPathHover?: (path: object | null, prevPath: object | null) => void;
 
   // Hex Bin layer
@@ -145,8 +145,8 @@ interface GlobeProps extends ConfigOptions {
   hexBinMerge?: boolean;
   hexTransitionDuration?: number;
   hexLabel?: HexBinAccessor<string>;
-  onHexClick?: (hex: HexBin, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onHexRightClick?: (hex: HexBin, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onHexClick?: (hex: HexBin, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onHexRightClick?: (hex: HexBin, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onHexHover?: (hex: HexBin | null, prevHex: HexBin | null) => void;
 
   // Hexed Polygons layer
@@ -159,8 +159,8 @@ interface GlobeProps extends ConfigOptions {
   hexPolygonCurvatureResolution?: ObjAccessor<number>;
   hexPolygonsTransitionDuration?: number;
   hexPolygonLabel?: ObjAccessor<string>;
-  onHexPolygonClick?: (polygon: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onHexPolygonRightClick?: (polygon: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onHexPolygonClick?: (polygon: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onHexPolygonRightClick?: (polygon: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onHexPolygonHover?: (polygon: object | null, prevPolygon: object | null) => void;
 
   // Tiles layer
@@ -175,8 +175,8 @@ interface GlobeProps extends ConfigOptions {
   tileCurvatureResolution?: ObjAccessor<number>;
   tilesTransitionDuration?: number;
   tileLabel?: ObjAccessor<string>;
-  onTileClick?: (tile: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onTileRightClick?: (tile: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onTileClick?: (tile: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onTileRightClick?: (tile: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onTileHover?: (tile: object | null, prevTile: object | null) => void;
 
   // Rings Layer
@@ -206,17 +206,28 @@ interface GlobeProps extends ConfigOptions {
   labelDotOrientation?: ObjAccessor<LabelOrientation>;
   labelsTransitionDuration?: number;
   labelLabel?: ObjAccessor<string>;
-  onLabelClick?: (label: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onLabelRightClick?: (label: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onLabelClick?: (label: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onLabelRightClick?: (label: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onLabelHover?: (label: object | null, prevLabel: object | null) => void;
 
+  // Objects layer
+  objectsData?: object[];
+  objectLat?: ObjAccessor<number>;
+  objectLng?: ObjAccessor<number>;
+  objectAltitude?: ObjAccessor<number>;
+  objectThreeObject?: Object3D | string | ((d: object) => Object3D);
+  objectLabel?: ObjAccessor<string>;
+  onObjectClick?: (obj: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onObjectRightClick?: (obj: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onObjectHover?: (obj: object | null, prevObj: object | null) => void;
+
   // Custom layer
   customLayerData?: object[];
-  customThreeObject?: Object3D | string | ((d: object, globeRadius: number) => Object3D);
-  customThreeObjectUpdate?: string | ((obj: Object3D, objData: object, globeRadius: number) => void);
+  customThreeObject?: Object3D | string | ((d: object) => Object3D);
+  customThreeObjectUpdate?: string | ((obj: Object3D, objData: object) => void);
   customLayerLabel?: ObjAccessor<string>;
-  onCustomLayerClick?: (obj: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
-  onCustomLayerRightClick?: (obj: object, event: MouseEvent, coords: { lat, lng, altitude }) => void;
+  onCustomLayerClick?: (obj: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onCustomLayerRightClick?: (obj: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onCustomLayerHover?: (obj: object | null, prevObj: object | null) => void;
 
   // Render control
@@ -239,6 +250,7 @@ interface GlobeMethods {
   controls(): object;
 
   // Utilities
+  getGlobeRadius(): number;
   getCoords(lat: number, lng: number, altitude?: number): CartesianCoords;
   getScreenCoords(lat: number, lng: number, altitude?: number): ScreenCoords;
   toGeoCoords(coords: CartesianCoords): GeoCoords;