react-globe.gl 2.32.0 → 2.33.1

package/README.md

@@ -15,8 +15,10 @@ See also the [react-three-fiber component](https://github.com/vasturiano/r3f-glo
    <a href="//vasturiano.github.io/react-globe.gl/example/countries-population/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/countries-population/preview.png"></a>
    <a href="//vasturiano.github.io/react-globe.gl/example/submarine-cables/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/submarine-cables/preview.png"></a>
    <a href="//vasturiano.github.io/react-globe.gl/example/hexed-polygons/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/hexed-polygons/preview.png"></a>
-   <a href="//vasturiano.github.io/react-globe.gl/example/world-cities/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/world-cities/preview.png"></a>
    <a href="//vasturiano.github.io/react-globe.gl/example/population-heatmap/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/population-heatmap/preview.png"></a>
+   <a href="//vasturiano.github.io/react-globe.gl/example/world-cities/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/world-cities/preview.png"></a> 
+   <a href="//vasturiano.github.io/react-globe.gl/example/day-night-cycle/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/day-night-cycle/preview.png"></a>
+   <a href="//vasturiano.github.io/react-globe.gl/example/heatmap/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/heatmap/preview.png"></a>
    <a href="//vasturiano.github.io/react-globe.gl/example/clouds/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/clouds/preview.png"></a>
    <a href="//vasturiano.github.io/react-globe.gl/example/satellites/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/satellites/preview.png"></a>
    <a href="//vasturiano.github.io/react-globe.gl/example/moon-landing-sites/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/moon-landing-sites/preview.png"></a>
@@ -31,6 +33,7 @@ A React component to represent data visualization layers on a 3-dimensional glob
 * [Choropleth](https://vasturiano.github.io/react-globe.gl/example/choropleth-countries/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/choropleth-countries/index.html))
 * [Elevated Polygons](https://vasturiano.github.io/react-globe.gl/example/countries-population/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/countries-population/index.html))
 * [Hollow Globe](https://vasturiano.github.io/react-globe.gl/example/hollow-globe/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/hollow-globe/index.html))
+* [Day Night Cycle](https://vasturiano.github.io/react-globe.gl/example/day-night-cycle/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/day-night-cycle/index.html))
 * [Path Lines](https://vasturiano.github.io/react-globe.gl/example/random-paths/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/random-paths/index.html))
 * [Heatmap](https://vasturiano.github.io/react-globe.gl/example/heatmap/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/heatmap/index.html))
 * [Map Labels](https://vasturiano.github.io/react-globe.gl/example/world-cities/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/world-cities/index.html))
@@ -402,6 +405,7 @@ ReactDOM.render(
 | <b>htmlLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lng` | HTML element accessor function, attribute or a numeric constant for the longitude coordinate of the element's central position. |
 | <b>htmlAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0 | HTML element accessor function, attribute or a numeric constant for the altitude coordinate of the element's position, in terms of globe radius units. |
 | <b>htmlElement</b> | <i>string</i> or <i>func</i> | `null` | Accessor function or attribute to retrieve the DOM element to use. Should return an instance of [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). |
+| <b>htmlElementVisibilityModifier</b> | <i>func(elem, isVisible)</i> | - | Custom function that defines how elements are shown/hidden according to whether they are in front or behind the globe. The function receives two arguments `(elem, isVisible)`, the HTML element and a boolean indicating if the element should be visible. By default the Three object itself is automatically hidden when behind the globe. |
 | <b>htmlTransitionDuration</b> | <i>number</i> | 1000 | Duration (ms) of the transition to animate HTML elements position changes. A value of `0` will move the elements immediately to their final position. |
 
 ### 3D Objects Layer

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

@@ -254,6 +254,7 @@ interface GlobeProps extends ConfigOptions {
   htmlLng?: ObjAccessor<number>;
   htmlAltitude?: ObjAccessor<number>;
   htmlElement?: string | ((d: object) => HTMLElement);
+  htmlElementVisibilityModifier?: (el: HTMLElement, isVisible: boolean) => void;
   htmlTransitionDuration?: number;
 
   // 3D Objects layer