react-globe.gl 2.31.3 → 2.33.0

package/README.md

@@ -105,6 +105,7 @@ ReactDOM.render(
 | --- | :--: | :--: | --- |
 | <b>width</b> | <i>number</i> | *&lt;window width&gt;* | Canvas width. |
 | <b>height</b> | <i>number</i> | *&lt;window height&gt;* | Canvas height. |
+| <b>globeOffset</b> | <i>[number, number]</i> | `[0, 0]` | Position offset of the globe relative to the canvas center. |
 | <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. |
@@ -401,6 +402,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

@@ -46,6 +46,7 @@ interface GlobeProps extends ConfigOptions {
   // Container layout
   width?: number;
   height?: number;
+  globeOffset?: [number, number];
   backgroundColor?: string;
   backgroundImageUrl?: string | null;
 
@@ -253,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