react-globe.gl 2.33.1 → 2.34.0

package/README.md

@@ -58,6 +58,11 @@ A React component to represent data visualization layers on a 3-dimensional glob
 * [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))
 
+## ❤️ Support This Project
+
+If you find this module useful and would like to support its development, you can [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url). Your contributions help keep open-source sustainable!
+[![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)
+
 ## Quick start
 
 ```js
@@ -67,7 +72,7 @@ import Globe from 'react-globe.gl';
 or using a *script* tag
 
 ```html
-<script src="//unpkg.com/react-globe.gl"></script>
+<script src="//cdn.jsdelivr.net/npm/react-globe.gl"></script>
 ```
 
 then
@@ -112,7 +117,7 @@ ReactDOM.render(
 | <b>backgroundColor</b> | <i>string</i> | `#000011` | Background color. |
 | <b>backgroundImageUrl</b> | <i>string</i> | *-* | URL of the image to be used as background to the globe. If no image is provided, the background color is shown instead. |
 | <b>waitForGlobeReady</b> | <i>bool</i> | `true` | Whether to wait until the globe wrapping or background image has been fully loaded before rendering the globe or any of the data layers. |
-| <b>animateIn</b> | <i>bool</i> | `true` | Whether to animate the globe initialization, by scaling and rotating the globe into its inital position. This prop only has an effect on component mount. |
+| <b>animateIn</b> | <i>bool</i> | `true` | Whether to animate the globe initialization, by scaling and rotating the globe into its initial position. This prop only has an effect on component mount. |
 
 ### Globe Layer
 
@@ -126,6 +131,7 @@ ReactDOM.render(
 | <b>showAtmosphere</b> | <i>bool</i> | `true` | Whether to show a bright halo surrounding the globe, representing the atmosphere. |
 | <b>atmosphereColor</b> | <i>string</i> | `lightskyblue` | The color of the atmosphere. |
 | <b>atmosphereAltitude</b> | <i>string</i> | 0.15 | The max altitude of the atmosphere, in terms of globe radius units. |
+| <b>globeCurvatureResolution</b> | <i>number</i> | 4 | Resolution in angular degrees of the sphere curvature. The finer the resolution, the more the globe is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. |
 | <b>globeMaterial</b> | <i>Material</i> | [MeshPhongMaterial](https://threejs.org/docs/#api/en/materials/MeshPhongMaterial) | ThreeJS material used to wrap the globe. Can be used for more advanced styling of the globe, like in [this example](https://github.com/vasturiano/react-globe.gl/blob/master/example/custom-globe-styling/index.html). |
 | <b>onGlobeReady</b> | <i>func</i> | *-* | Callback function to invoke immediately after the globe has been initialized and visible on the scene. |
 | <b>onGlobeClick</b> | <i>func</i> | *-* | Callback function for (left-button) clicks on the globe. The clicked globe coordinates and the event object are included as arguments: `onGlobeClick({ lat, lng }, event)`. |
@@ -379,7 +385,7 @@ ReactDOM.render(
 | <b>labelLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lng` | Label object accessor function, attribute or a numeric constant for the longitude coordinate. |
 | <b>labelText</b> | <i>string</i> or <i>func</i> | `text` | Label object accessor function or attribute for the label text. |
 | <b>labelColor</b> | <i>string</i> or <i>func</i> | `() => 'lightgrey'` | Label object accessor function or attribute for the label color. |
-| <b>labelAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Label object accessor function, attribute or a numeric constant for the label altitude in terms of globe radius units. |
+| <b>labelAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.002 | Label object accessor function, attribute or a numeric constant for the label altitude in terms of globe radius units. |
 | <b>labelSize</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.5 | Label object accessor function, attribute or a numeric constant for the label text height, in angular degrees. |
 | <b>labelTypeFace</b> | <i>typeface object </i> | [helvetiker regular](https://github.com/mrdoob/three.js/blob/dev/examples/fonts/helvetiker_regular.typeface.json) | Text font typeface JSON object. Supports any typeface font generated by [Facetype.js](http://gero3.github.io/facetype.js/). |
 | <b>labelRotation</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Label object accessor function, attribute or a numeric constant for the label rotation in degrees. The rotation is performed clockwise along the axis of its latitude parallel plane. |
@@ -472,9 +478,6 @@ ReactDOM.render(
 | <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. |
 | <b>toGlobeCoords</b> | <i>x</i>, <i>y</i> | Utility method to translate viewport coordinates to the globe surface coordinates directly under the specified viewport pixel. Returns the globe coordinates in the format `{ lat, lng }`, or `null` if the globe does not currently intersect with that viewport location. |
 
-## Giving Back
-
-[![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
 [npm-url]: https://npmjs.org/package/react-globe.gl

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

@@ -59,6 +59,7 @@ interface GlobeProps extends ConfigOptions {
   showAtmosphere?: boolean;
   atmosphereColor?: string;
   atmosphereAltitude?: number;
+  globeCurvatureResolution?: number;
   globeMaterial?: Material;
   onGlobeReady?: () => void;
   onGlobeClick?: (coords: { lat: number, lng: number }, event: MouseEvent) => void;
@@ -312,4 +313,5 @@ type FCwithRef<P = {}, R = {}> = React.FunctionComponent<P & { ref?: React.Mutab
 
 declare const Globe: FCwithRef<GlobeProps, GlobeMethods>;
 
-export { type GlobeMethods, type GlobeProps, Globe as default };
+export { Globe as default };
+export type { GlobeMethods, GlobeProps };