react-globe.gl 2.18.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2019 Vasco Asturiano
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,310 @@
1
+ react-globe.gl
2
+ ==============
3
+
4
+ [![NPM package][npm-img]][npm-url]
5
+ [![Build Size][build-size-img]][build-size-url]
6
+ [![Dependencies][dependencies-img]][dependencies-url]
7
+
8
+ React bindings for the [globe.gl](https://github.com/vasturiano/globe.gl) UI component.
9
+
10
+ <p align="center">
11
+ <a href="//vasturiano.github.io/react-globe.gl/example/world-population/"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/world-population/preview.png"></a>
12
+ <a href="//vasturiano.github.io/react-globe.gl/example/airline-routes/us-international-outbound.html"><img width="48%" src="https://vasturiano.github.io/react-globe.gl/example/airline-routes/preview.png"></a>
13
+ <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>
14
+ <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>
15
+ <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>
16
+ <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>
17
+ </p>
18
+
19
+ A React component to represent data visualization layers on a 3-dimensional globe in a spherical projection, using [ThreeJS](https://github.com/mrdoob/three.js/)/WebGL for 3D rendering.
20
+
21
+ Check out the examples:
22
+ * [Basic](https://vasturiano.github.io/react-globe.gl/example/basic/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/basic/index.html))
23
+ * [Arc Links](https://vasturiano.github.io/react-globe.gl/example/random-arcs/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/random-arcs/index.html))
24
+ * [Highlight links](https://vasturiano.github.io/react-globe.gl/example/airline-routes/highlight-links.html) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/airline-routes/highlight-links.html))
25
+ * [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))
26
+ * [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))
27
+ * [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))
28
+ * [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))
29
+ * [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))
30
+ * [Hexed Country Polygons](https://vasturiano.github.io/react-globe.gl/example/hexed-polygons/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/hexed-polygons/index.html))
31
+ * [Tiles](https://vasturiano.github.io/react-globe.gl/example/tiles/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/tiles/index.html))
32
+ * [Solar Terminator](https://vasturiano.github.io/react-globe.gl/example/solar-terminator/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/solar-terminator/index.html))
33
+ * [Custom Globe Styling](https://vasturiano.github.io/react-globe.gl/example/custom-globe-styling/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/custom-globe-styling/index.html))
34
+ * [Custom Layer](https://vasturiano.github.io/react-globe.gl/example/custom-layer/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/custom-layer/index.html))
35
+ * [World Population](https://vasturiano.github.io/react-globe.gl/example/world-population/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/world-population/index.html))
36
+ * [Recent Earthquakes](https://vasturiano.github.io/react-globe.gl/example/earthquakes/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/earthquakes/index.html))
37
+ * [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))
38
+ * [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))
39
+ * [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))
40
+ * [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))
41
+
42
+
43
+ ## Quick start
44
+
45
+ ```
46
+ import Globe from 'react-globe.gl';
47
+ ```
48
+
49
+ or using a script tag
50
+
51
+ ```
52
+ <script src="//unpkg.com/react-globe.gl"></script>
53
+ ```
54
+
55
+ then
56
+
57
+ ```
58
+ ReactDOM.render(
59
+ <Globe
60
+ pointsData={myData}
61
+ />,
62
+ myDOMElement
63
+ );
64
+ ```
65
+
66
+ ## API reference
67
+
68
+ ### Container layout
69
+
70
+ | Prop | Type | Default | Description |
71
+ | --- | :--: | :--: | --- |
72
+ | <b>width</b> | <i>number</i> | *&lt;window width&gt;* | Canvas width. |
73
+ | <b>height</b> | <i>number</i> | *&lt;window height&gt;* | Canvas height. |
74
+ | <b>backgroundColor</b> | <i>string</i> | `#000011` | Background color. |
75
+ | <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. |
76
+ | <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. |
77
+ | <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. |
78
+
79
+ ### Globe Layer
80
+
81
+ | Prop | Type | Default | Description |
82
+ | --- | :--: | :--: | --- |
83
+ | <b>globeImageUrl</b> | <i>string</i>| *-* | URL of the image used in the material that wraps the globe. If no image is provided, the globe is represented as a black sphere. |
84
+ | <b>bumpImageUrl</b> | <i>string</i>| *-* | URL of the image used to create a [bump map](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.bumpMap) in the material, to represent the globe's terrain. |
85
+ | <b>showGlobe</b> | <i>bool</i> | `true` | Whether to show the globe surface itself. |
86
+ | <b>showGraticules</b> | <i>bool</i> | `false` | Whether to show a graticule grid demarking latitude and longitude lines at every 10 degrees. |
87
+ | <b>showAtmosphere</b> | <i>bool</i> | `true` | Whether to show a bright halo surrounding the globe, representing the atmosphere. |
88
+ | <b>atmosphereColor</b> | <i>string</i> | `lightskyblue` | The color of the atmosphere. |
89
+ | <b>atmosphereAltitude</b> | <i>string</i> | 0.15 | The max altitude of the atmosphere, in terms of globe radius units. |
90
+ | <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). |
91
+ | <b>onGlobeReady</b> | <i>func</i> | *-* | Callback function to invoke immediately after the globe has been initialized and visible on the scene. |
92
+ | <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)`. |
93
+ | <b>onGlobeRightClick</b> | <i>func</i> | *-* | Callback function for right-clicks on the globe. The clicked globe coordinates and the event object are included as arguments: `onGlobeRightClick({ lat, lng }, event)`. |
94
+
95
+ ### Points Layer
96
+
97
+ | Prop | Type | Default | Description |
98
+ | --- | :--: | :--: | --- |
99
+ | <b>pointsData</b> | <i>array</i> | `[]` | List of points to represent in the points map layer. Each point is displayed as a cylindrical 3D object rising perpendicularly from the surface of the globe. |
100
+ | <b>pointLabel</b> | <i>string</i> or <i>func</i> | `name` | Point object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. |
101
+ | <b>pointLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lat` | Point object accessor function, attribute or a numeric constant for the cylinder's center latitude coordinate. |
102
+ | <b>pointLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lng` | Point object accessor function, attribute or a numeric constant for the cylinder's center longitude coordinate. |
103
+ | <b>pointColor</b> | <i>string</i> or <i>func</i> | `() => '#ffffaa'` | Point object accessor function or attribute for the cylinder color. |
104
+ | <b>pointAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.1 | Point object accessor function, attribute or a numeric constant for the cylinder's altitude in terms of globe radius units (`0` = 0 altitude (flat circle), `1` = globe radius). |
105
+ | <b>pointRadius</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.25 | Point object accessor function, attribute or a numeric constant for the cylinder's radius, in angular degrees. |
106
+ | <b>pointResolution</b> | <i>number</i> | 12 | Radial geometric resolution of each cylinder, expressed in how many slice segments to divide the circumference. Higher values yield smoother cylinders. |
107
+ | <b>pointsMerge</b> | <i>bool</i> | `false` | Whether to merge all the point meshes into a single ThreeJS object, for improved rendering performance. Visually both options are equivalent, setting this option only affects the internal organization of the ThreeJS objects. |
108
+ | <b>pointsTransitionDuration</b> | <i>number</i> | 1000 | Duration (ms) of the transition to animate point changes involving geometry modifications. A value of `0` will move the objects immediately to their final position. New objects are animated by scaling them from the ground up. Only works if `pointsMerge` is disabled. |
109
+ | <b>onPointClick</b> | <i>func</i>| *-* | Callback function for point (left-button) clicks. The point object and the event object are included as arguments: `onPointClick(point, event)`. Only works if `pointsMerge` is disabled. |
110
+ | <b>onPointRightClick</b> | <i>func</i>| *-* | Callback function for point right-clicks. The point object and the event object are included as arguments: `onPointRightClick(point, event)`. Only works if `pointsMerge` is disabled. |
111
+ | <b>onPointHover</b> | <i>func</i>| *-* | Callback function for point mouse over events. The point object (or `null` if there's no point under the mouse line of sight) is included as the first argument, and the previous point object (or `null`) as second argument: `onPointHover(point, prevPoint)`. Only works if `pointsMerge` is disabled. |
112
+
113
+ ### Arcs Layer
114
+
115
+ | Prop | Type | Default | Description |
116
+ | --- | :--: | :--: | --- |
117
+ | <b>arcsData</b> | <i>array</i> | `[]` | List of links to represent in the arcs map layer. Each link is displayed as an arc line that rises from the surface of the globe, connecting the start and end coordinates. |
118
+ | <b>arcLabel</b> | <i>string</i> or <i>func</i> | `name` | Arc object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. |
119
+ | <b>arcStartLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `startLat` | Arc object accessor function, attribute or a numeric constant for the line's start latitude coordinate. |
120
+ | <b>arcStartLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `startLng` | Arc object accessor function, attribute or a numeric constant for the line's start longitude coordinate. |
121
+ | <b>arcEndLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `endLat` | Arc object accessor function, attribute or a numeric constant for the line's end latitude coordinate. |
122
+ | <b>arcEndLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `endLng` | Arc object accessor function, attribute or a numeric constant for the line's end longitude coordinate. |
123
+ | <b>arcColor</b> | <i>string</i>, <i>[string, ...]</i> or <i>func</i> | `() => '#ffffaa'` | Arc object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors. |
124
+ | <b>arcAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i>| `null` |Arc object accessor function, attribute or a numeric constant for the arc's maximum altitude (ocurring at the half-way distance between the two points) in terms of globe radius units (`0` = 0 altitude (ground line), `1` = globe radius). If a value of `null` or `undefined` is used, the altitude is automatically set proportionally to the distance between the two points, according to the scale set in `arcAltitudeAutoScale`. |
125
+ | <b>arcAltitudeAutoScale</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.5 | Arc object accessor function, attribute or a numeric constant for the scale of the arc's automatic altitude, in terms of units of the great-arc distance between the two points. A value of `1` indicates the arc should be as high as its length on the ground. Only applicable if `arcAltitude` is not set. |
126
+ | <b>arcStroke</b> | <i>number</i>, <i>string</i> or <i>func</i>| `null` | Arc object accessor function, attribute or a numeric constant for the line's diameter, in angular degrees. A value of `null` or `undefined` will render a [ThreeJS Line](https://threejs.org/docs/#api/objects/Line) whose width is constant (`1px`) regardless of the camera distance. Otherwise, a [TubeGeometry](https://threejs.org/docs/#api/en/geometries/TubeGeometry) is used. |
127
+ | <b>arcCurveResolution</b> | <i>number</i> | 64 | Arc's curve resolution, expressed in how many straight line segments to divide the curve by. Higher values yield smoother curves. |
128
+ | <b>arcCircularResolution</b> | <i>number</i> | 6 | Radial geometric resolution of each line, expressed in how many slice segments to divide the tube's circumference. Only applicable when using Tube geometries (defined `arcStroke`). |
129
+ | <b>arcDashLength</b> | <i>number</i>, <i>string</i> or <i>func</i> | 1 | Arc object accessor function, attribute or a numeric constant for the length of the dashed segments in the arc, in terms of relative length of the whole line (`1` = full line length). |
130
+ | <b>arcDashGap</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Arc object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length. |
131
+ | <b>arcDashInitialGap</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Arc object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length. |
132
+ | <b>arcDashAnimateTime</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Arc object accessor function, attribute or a numeric constant for the time duration (in `ms`) to animate the motion of dash positions from the start to the end point for a full line length. A value of `0` disables the animation. |
133
+ | <b>arcsTransitionDuration</b> | <i>number</i> | 1000 | Duration (ms) of the transition to animate arc changes involving geometry modifications. A value of `0` will move the arcs immediately to their final position. New arcs are animated by rising them from the ground up. |
134
+ | <b>onArcClick</b> | <i>func</i>| *-* | Callback function for arc (left-button) clicks. The arc object and the event object are included as arguments: `onArcClick(arc, event)`. |
135
+ | <b>onArcRightClick</b> | <i>func</i>| *-* | Callback function for arc right-clicks. The arc object and the event object are included as arguments: `onArcRightClick(arc, event)`. |
136
+ | <b>onArcHover</b> | <i>func</i>| *-* | Callback function for arc mouse over events. The arc object (or `null` if there's no arc under the mouse line of sight) is included as the first argument, and the previous arc object (or `null`) as second argument: `onArcHover(arc, prevArc)`. |
137
+
138
+ ### Polygons Layer
139
+
140
+ | Prop | Type | Default | Description |
141
+ | --- | :--: | :--: | --- |
142
+ | <b>polygonsData</b> | <i>array</i> | `[]` | List of polygon shapes to represent in the polygons map layer. Each polygon is displayed as a shaped cone that extrudes from the surface of the globe. |
143
+ | <b>polygonLabel</b> | <i>string</i> or <i>func</i> | `name` | Polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. |
144
+ | <b>polygonGeoJsonGeometry</b> | <i>string</i> or <i>func</i> | `geometry` | Polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: `type` and `coordinates`. Only GeoJson geometries of type `Polygon` or `MultiPolygon` are supported, other types will be skipped. |
145
+ | <b>polygonCapColor</b> | <i>string</i> or <i>func</i> | `() => '#ffffaa'` | Polygon object accessor function or attribute for the color of the top surface. |
146
+ | <b>polygonCapMaterial</b> | <i>Material</i>, <i>string</i> or <i>func</i> | *-* | Polygon object accessor function, attribute or material object for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) to use in the top surface. This prop takes precedence over `polygonCapColor`, which will be ignored if both are defined. |
147
+ | <b>polygonSideColor</b> | <i>string</i> or <i>func</i> | `() => '#ffffaa'` | Polygon object accessor function or attribute for the color of the cone sides. |
148
+ | <b>polygonSideMaterial</b> | <i>Material</i>, <i>string</i> or <i>func</i> | *-* | Polygon object accessor function, attribute or material object for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) to use in the cone sides. This prop takes precedence over `polygonSideColor`, which will be ignored if both are defined. |
149
+ | <b>polygonStrokeColor</b> | <i>string</i> or <i>func</i> | *-* | Polygon object accessor function or attribute for the color to stroke the polygon perimeter. A falsy value will disable the stroking. |
150
+ | <b>polygonAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.01 | Polygon object accessor function, attribute or a numeric constant for the polygon cone's altitude in terms of globe radius units (`0` = 0 altitude (flat polygon), `1` = globe radius). |
151
+ | <b>polygonCapCurvatureResolution</b> | <i>number</i>, <i>string</i> or <i>func</i> | 5 | Polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the cap surface curvature. The finer the resolution, the more the polygon is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. |
152
+ | <b>polygonsTransitionDuration</b> | <i>number</i> | 1000 | Duration (ms) of the transition to animate polygon altitude changes. A value of `0` will size the cone immediately to their final altitude. New polygons are animated by rising them from the ground up. |
153
+ | <b>onPolygonClick</b> | <i>func</i> | *-* | Callback function for polygon (left-button) clicks. The polygon object and the event object are included as arguments: `onPolygonClick(polygon, event)`. |
154
+ | <b>onPolygonRightClick</b> | <i>func</i> | *-* | Callback function for polygon right-clicks. The polygon object and the event object are included as arguments: `onPolygonRightClick(polygon, event)`. |
155
+ | <b>onPolygonHover</b> | <i>func</i> | *-* | Callback function for polygon mouse over events. The polygon object (or `null` if there's no polygon under the mouse line of sight) is included as the first argument, and the previous polygon object (or `null`) as second argument: `onPolygonHover(polygon, prevPolygon)`. |
156
+
157
+ ### Paths Layer
158
+
159
+ | Prop | Type | Default | Description |
160
+ | --- | :--: | :--: | --- |
161
+ | <b>pathsData</b> | <i>array</i> | `[]` | List of lines to represent in the paths map layer. Each path is displayed as a line that connects all the coordinate pairs in the path array. |
162
+ | <b>pathLabel</b> | <i>string</i> or <i>func</i> | `name` | Path object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. |
163
+ | <b>pathPoints | <i>array</i>, <i>string</i> or <i>func</i> | `pnts => pnts` | Path object accessor function, attribute or an array for the set of points that define the path line. By default, each path point is assumed to be a 2-position array (`[<lat>, <lon>]`). This default behavior can be modified using the `pathPointLat` and `pathPointLng` methods. |
164
+ | <b>pathPointLat | <i>number</i>, <i>string</i> or <i>func</i> | `arr => arr[0]` | Path point object accessor function, attribute or a numeric constant for the latitude coordinate. |
165
+ | <b>pathPointLng | <i>number</i>, <i>string</i> or <i>func</i> | `arr => arr[1]` | Path point object accessor function, attribute or a numeric constant for the longitude coordinate. |
166
+ | <b>pathPointAlt | <i>number</i>, <i>string</i> or <i>func</i> | 0.001 | Path point object accessor function, attribute or a numeric constant for the point altitude, in terms of globe radius units (`0` = 0 altitude (ground), `1` = globe radius). |
167
+ | <b>pathResolution | <i>number</i> | 2 | The path's angular resolution, in lat/lng degrees. If the ground distance (excluding altitude) between two adjacent path points is larger than this value, the line segment will be interpolated in order to approximate the curvature of the sphere surface. Lower values yield more perfectly curved lines, at the cost of performance. |
168
+ | <b>pathColor | <i>string</i>, <i>[string, ...]</i> or <i>func</i> | `() => '#ffffaa'` | Path object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors. Transparent colors are not supported in Fat Lines with set width. |
169
+ | <b>pathStroke | <i>number</i>, <i>string</i> or <i>func</i> | `null` | Path object accessor function, attribute or a numeric constant for the line's diameter, in angular degrees. A value of `null` or `undefined` will render a [ThreeJS Line](https://threejs.org/docs/#api/objects/Line) whose width is constant (`1px`) regardless of the camera distance. Otherwise, a [FatLine](https://github.com/vasturiano/three-fatline) is used. |
170
+ | <b>pathDashLength | <i>number</i>, <i>string</i> or <i>func</i> | 1 | Path object accessor function, attribute or a numeric constant for the length of the dashed segments in the path line, in terms of relative length of the whole line (`1` = full line length). |
171
+ | <b>pathDashGap | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Path object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length. |
172
+ | <b>pathDashInitialGap | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Path object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length. |
173
+ | <b>pathDashAnimateTime | <i>number</i>, <i>string</i> or <i>func</i> | 0 | Path object accessor function, attribute or a numeric constant for the time duration (in `ms`) to animate the motion of dash positions from the start to the end point for a full line length. A value of `0` disables the animation. |
174
+ | <b>pathTransitionDuration | <i>number</i> | 1000 | Duration (ms) of the transition to animate path changes. A value of `0` will move the paths immediately to their final position. New paths are animated from start to end. |
175
+ | <b>onPathClick</b> | <i>func</i> | *-* | Callback function for path (left-button) clicks. The path object and the event object are included as arguments: `onPathClick(arc, event)`. |
176
+ | <b>onPathRightClick</b> | <i>func</i> | *-* | Callback function for path right-clicks. The path object and the event object are included as arguments: `onPathRightClick(arc, event)`. |
177
+ | <b>onPathHover</b> | <i>func</i> | *-* | Callback function for path mouse over events. The path object (or `null` if there's no path under the mouse line of sight) is included as the first argument, and the previous path object (or `null`) as second argument: `onPathHover(path, prevPath)`. |
178
+
179
+ ### Hex Bin Layer
180
+
181
+ | Prop | Type | Default | Description |
182
+ | --- | :--: | :--: | --- |
183
+ | <b>hexBinPointsData</b> | <i>array</i> | `[]` | List of points to aggregate using the hex bin map layer. Each point is added to an hexagonal prism 3D object that represents all the points within a tesselated portion of the space. |
184
+ | <b>hexLabel</b> | <i>string</i> or <i>func</i>| *-* |Hex object accessor function or attribute for label (shown as tooltip). An hex object includes all points binned, and has the syntax: `{ points, sumWeight, center: { lat, lng } }`. Supports plain text or HTML content. |
185
+ | <b>hexBinPointLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lat` | Point object accessor function, attribute or a numeric constant for the latitude coordinate. |
186
+ | <b>hexBinPointLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lng` | Point object accessor function, attribute or a numeric constant for the longitude coordinate. |
187
+ | <b>hexBinPointWeight</b> | <i>number</i>, <i>string</i> or <i>func</i> | 1 | Point object accessor function, attribute or a numeric constant for the weight of the point. Weights for points in the same bin are summed and determine the hexagon default altitude. |
188
+ | <b>hexBinResolution</b> | <i>number</i> | 4 | The geographic binning resolution as defined by [H3](https://uber.github.io/h3/#/documentation/core-library/resolution-table). Determines the area of the hexagons that tesselate the globe's surface. Accepts values between `0` and `15`. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons. |
189
+ | <b>hexMargin</b> | <i>number</i> or <i>func</i> | 0.2 | The radial margin of each hexagon. Margins above `0` will create gaps between adjacent hexagons and serve only a visual purpose, as the data points within the margin still contribute to the hexagon's data. The margin is specified in terms of fraction of the hexagon's surface diameter. Values below `0` or above `1` are disadvised. This property also supports using an accessor method based on the hexagon's aggregated data, following the syntax: `hexMargin(({ points, sumWeight, center: { lat, lng }}) => ...)`. This method should return a numeric constant. |
190
+ | <b>hexAltitude</b> | <i>number</i> or <i>func</i> | `({ sumWeight }) => sumWeight * 0.01` | The altitude of each hexagon, in terms of globe radius units (`0` = 0 altitude (flat hexagon), `1` = globe radius). This property also supports using an accessor method based on the hexagon's aggregated data, following the syntax: `hexAltitude(({ points, sumWeight, center: { lat, lng }}) => ...)`. This method should return a numeric constant. |
191
+ | <b>hexTopCurvatureResolution</b> | <i>number</i> | 5 | The resolution (in angular degrees) of the top surface curvature. The finer the resolution, the more the top area is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. |
192
+ | <b>hexTopColor</b> | <i>func</i> | `() => '#ffffaa'` | Accessor method for each hexagon's top color. The method should follow the signature: `hexTopColor(({ points, sumWeight, center: { lat, lng }}) => ...)` and return a color string. |
193
+ | <b>hexSideColor</b> | <i>func</i> | `() => '#ffffaa'` | Accessor method for each hexagon's side color. The method should follow the signature: `hexSideColor(({ points, sumWeight, center: { lat, lng }}) => ...)` and return a color string. |
194
+ | <b>hexBinMerge</b> | <i>bool</i> | `false` | Whether to merge all the hexagon meshes into a single ThreeJS object, for improved rendering performance. Visually both options are equivalent, setting this option only affects the internal organization of the ThreeJS objects. |
195
+ | <b>hexTransitionDuration</b> | <i>number</i> | 1000 | Duration (ms) of the transition to animate hexagon changes related to geometry modifications (altitude, radius). A value of `0` will move the hexagons immediately to their final position. New hexagons are animated by scaling them from the ground up. Only works if `hexBinMerge` is disabled. |
196
+ | <b>onHexClick</b> | <i>func</i>| *-* | Callback function for hexagon (left-button) clicks. The hex object including all points binned and the event object are included as arguments: `onHexClick({ points, sumWeight, center: { lat, lng } }, event)`. Only works if `hexBinMerge` is disabled. |
197
+ | <b>onHexRightClick</b> | <i>func</i>| *-* | Callback function for hexagon right-clicks. The hex object including all points binned and the event object are included as arguments: `onHexRightClick({ points, sumWeight, center: { lat, lng } }, event)`. Only works if `hexBinMerge` is disabled. |
198
+ | <b>onHexHover</b> | <i>func</i>| *-* | Callback function for hexagon mouse over events. The hex object (or `null` if there's no hex under the mouse line of sight) is included as the first argument, and the previous hex object (or `null`) as second argument: `onHexHover(hex, prevHex)`. Each hex object includes all points binned, and has the syntax: `{ points, sumWeight, center: { lat, lng } }`. Only works if `hexBinMerge` is disabled. |
199
+
200
+ ### Hexed Polygons Layer
201
+
202
+ | Prop | Type | Default | Description |
203
+ | --- | :--: | :--: | --- |
204
+ | <b>hexPolygonsData</b> | <i>array</i> | `[]` | List of polygon shapes to represent in the hexed polygons map layer. Each polygon is displayed as a tesselated group of hexagons that approximate the polygons shape according to the resolution specified in `hexPolygonResolution`. |
205
+ | <b>hexPolygonLabel</b> | <i>string</i> or <i>func</i> | `name` | Hexed polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. |
206
+ | <b>hexPolygonGeoJsonGeometry</b> | <i>string</i> or <i>func</i> | `geometry` | Hexed polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: `type` and `coordinates`. Only GeoJson geometries of type `Polygon` or `MultiPolygon` are supported, other types will be skipped. |
207
+ | <b>hexPolygonColor</b> | <i>string</i> or <i>func</i> | `() => '#ffffaa'` | Hexed polygon object accessor function or attribute for the color of each hexagon in the polygon. |
208
+ | <b>hexPolygonAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.001 | Hexed polygon object accessor function, attribute or a numeric constant for the polygon's hexagons altitude in terms of globe radius units (`0` = 0 altitude, `1` = globe radius). |
209
+ | <b>hexPolygonResolution</b> | <i>number</i>, <i>string</i> or <i>func</i> | 3 | Hexed polygon object accessor function, attribute or a numeric constant for the geographic binning resolution as defined by [H3](https://uber.github.io/h3/#/documentation/core-library/resolution-table). Determines the area of the hexagons that tesselate the globe's surface. Accepts values between `0` and `15`. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons. |
210
+ | <b>hexPolygonMargin</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.2 | Hexed polygon object accessor function, attribute or a numeric constant for the radial margin of each hexagon. Margins above `0` will create gaps between adjacent hexagons within a polygon. The margin is specified in terms of fraction of the hexagon's surface diameter. Values below `0` or above `1` are disadvised. |
211
+ | <b>hexPolygonCurvatureResolution</b> | <i>number</i>, <i>string</i> or <i>func</i> | 5 | Hexed polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of each hexed polygon surface curvature. The finer the resolution, the more the polygon hexes are fragmented into smaller faces to approximate the spheric surface, at the cost of performance. |
212
+ | <b>hexPolygonsTransitionDuration</b> | <i>number</i> | 0 | Duration (ms) of the transition to animate hexed polygons altitude and margin changes. A value of `0` will move the hexagons immediately to their final state. New hexed polygons are animated by sizing each hexagon from `0` radius. |
213
+ | <b>onHexPolygonClick</b> | <i>func</i> | *-* | Callback function for hexed polygon (left-button) clicks. The polygon object and the event object are included as arguments: `onHexPolygonClick(polygon, event)`. |
214
+ | <b>onHexPolygonRightClick</b> | <i>func</i> | *-* | Callback function for hexed polygon right-clicks. The polygon object and the event object are included as arguments: `onHexPolygonRightClick(polygon, event)`. |
215
+ | <b>onHexPolygonHover</b> | <i>func</i> | *-* | Callback function for hexed polygon mouse over events. The polygon object (or `null` if there's no polygon under the mouse line of sight) is included as the first argument, and the previous polygon object (or `null`) as second argument: `onHexPolygonHover(polygon, prevPolygon)`. |
216
+
217
+ ### Tiles Layer
218
+
219
+ | Prop | Type | Default | Description |
220
+ | --- | :--: | :--: | --- |
221
+ | <b>tilesData</b> | <i>array</i> | `[]` | List of tiles to represent in the tiles map layer. Each tile is displayed as a spherical surface segment. The segments can be placed side-by-side for a tiled surface and each can be styled separately. |
222
+ | <b>tileLabel</b> | <i>string</i> or <i>func</i> | `name` | Tile object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. |
223
+ | <b>tileLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lat` | Tile object accessor function, attribute or a numeric constant for the segment's centroid latitude coordinate. |
224
+ | <b>tileLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lng` | Tile object accessor function, attribute or a numeric constant for the segment's centroid longitude coordinate. |
225
+ | <b>tileAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.01 | Tile object accessor function, attribute or a numeric constant for the segment's altitude in terms of globe radius units. |
226
+ | <b>tileWidth</b> | <i>number</i>, <i>string</i> or <i>func</i> | 1 | Tile object accessor function, attribute or a numeric constant for the segment's longitudinal width, in angular degrees. |
227
+ | <b>tileHeight</b> | <i>number</i>, <i>string</i> or <i>func</i> | 1 | Tile object accessor function, attribute or a numeric constant for the segment's latitudinal height, in angular degrees. |
228
+ | <b>tileUseGlobeProjection</b> | <i>bool</i>, <i>string</i> or <i>func</i> | `true` | Tile object accessor function, attribute or a boolean constant for whether to use the globe's projection to shape the segment to its relative tiled position (`true`), or break free from this projection and shape the segment as if it would be laying directly on the equatorial perimeter (`false`). |
229
+ | <b>tileMaterial</b> | <i>Material</i>, <i>string</i> or <i>func</i> | `() => new MeshLambertMaterial({ color: '#ffbb88' })` | Tile object accessor function, attribute or material object for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) used to style the segment's surface. |
230
+ | <b>tileCurvatureResolution</b> | <i>number</i>, <i>string</i> or <i>func</i> | 5 | Tile object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the surface curvature. The finer the resolution, the more the tile geometry is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. |
231
+ | <b>tilesTransitionDuration</b> | <i>number</i> | 1000 | Duration (ms) of the transition to animate tile changes involving geometry modifications. A value of `0` will move the tiles immediately to their final position. New tiles are animated by scaling them from the centroid outwards. |
232
+ | <b>onTileClick</b> | <i>func</i> | *-* | Callback function for tile (left-button) clicks. The tile object and the event object are included as arguments: `onTileClick(tile, event)`. |
233
+ | <b>onTileRightClick</b> | <i>func</i> | *-* | Callback function for tile right-clicks. The tile object and the event object are included as arguments: `onTileRightClick(tile, event)`. |
234
+ | <b>onTileHover</b> | <i>func</i> | *-* | Callback function for tile mouse over events. The tile object (or `null` if there's no tile under the mouse line of sight) is included as the first argument, and the previous tile object (or `null`) as second argument: `onTileHover(tile, prevTile)`. |
235
+
236
+ ### Labels Layer
237
+
238
+ | Prop | Type | Default | Description |
239
+ | --- | :--: | :--: | --- |
240
+ | <b>labelsData</b> | <i>array</i> | `[]` | List of label objects to represent in the labels map layer. |
241
+ | <b>labelLabel</b> | <i>string</i> or <i>func</i>| *-* |Label object accessor function or attribute for its own tooltip label. Supports plain text or HTML content. |
242
+ | <b>labelLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lat` | Label object accessor function, attribute or a numeric constant for the latitude coordinate. |
243
+ | <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. |
244
+ | <b>labelText</b> | <i>string</i> or <i>func</i> | `text` | Label object accessor function or attribute for the label text. |
245
+ | <b>labelColor</b> | <i>string</i> or <i>func</i> | `() => 'lightgrey'` | Label object accessor function or attribute for the label color. |
246
+ | <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. |
247
+ | <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. |
248
+ | <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/). |
249
+ | <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. |
250
+ | <b>labelResolution</b> | <i>number</i> | 3 | The text geometric resolution of each label, expressed in how many segments to use in the text curves. Higher values yield smoother labels. |
251
+ | <b>labelIncludeDot</b> | <i>bool</i>, <i>string</i> or <i>func</i> | `true` | Label object accessor function, attribute or a bool constant for whether to include a dot marker next to the text indicating the exact `lat`, `lng` coordinates of the label. If enabled the text will be rendered offset from the dot. |
252
+ | <b>labelDotRadius</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.1 | Label object accessor function, attribute or a numeric constant for the radius of the dot marker, in angular degrees. |
253
+ | <b>labelDotOrientation</b> | <i>string</i> or <i>func</i> | `() => 'bottom'` | Label object accessor function or attribute for the orientation of the label if the dot marker is present. Possible values are `right`, `top` and `bottom`. |
254
+ | <b>labelsTransitionDuration</b> | <i>number</i> | 1000 | Duration (ms) of the transition to animate label changes involving position modifications (`lat`, `lng`, `altitude`, `rotation`). A value of `0` will move the labels immediately to their final position. New labels are animated by scaling their size. |
255
+ | <b>onLabelClick</b> | <i>func</i>| *-* | Callback function for label (left-button) clicks. The label object and the event object are included as arguments: `onLabelClick(label, event)`. |
256
+ | <b>onLabelRightClick</b> | <i>func</i>| *-* | Callback function for label right-clicks. The label object and the event object are included as arguments: `onLabelRightClick(label, event)`. |
257
+ | <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)`. |
258
+
259
+ ### Custom Layer
260
+
261
+ | Prop | Type | Default | Description |
262
+ | --- | :--: | :--: | --- |
263
+ | <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. |
264
+ | <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. |
265
+ | <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) => { ... })`. |
266
+ | <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) => { ... })`. |
267
+ | <b>onCustomLayerClick</b> | <i>func</i>| *-* | Callback function for custom object (left-button) clicks. The custom object and the event object are included as arguments: `onCustomLayerClick(obj, event)`. |
268
+ | <b>onCustomLayerRightClick</b> | <i>func</i>| *-* | Callback function for custom object right-clicks. The custom object and the event object are included as arguments: `onCustomLayerRightClick(obj, event)`. |
269
+ | <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)`. |
270
+
271
+ ### Render control
272
+
273
+ | Prop | Type | Default | Description |
274
+ | --- | :--: | :--: | --- |
275
+ | <b>rendererConfig</b> | <i>object</i> | `{ antialias: true, alpha: true }` | Configuration parameters to pass to the [ThreeJS WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) constructor. This prop only has an effect on component mount. |
276
+ | <b>enablePointerInteraction</b> | <i>bool</i> | `true` | Whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you're looking for maximum gain in your globe performance it's recommended to switch off this property. |
277
+ | <b>pointerEventsFilter</b> | <i>func</i> | `() => true` | Filter function which defines whether a particular object can be the target of pointer interactions. In general, objects that are closer to the camera get precedence in capturing pointer events. This function allows having ignored object layers so that pointer events can be passed through to deeper objects in the various globe layers. The ThreeJS object and its associated data (if any) are passed as arguments: `pointerEventsFilter(obj, data)`. The function should return a boolean value. |
278
+ | <b>lineHoverPrecision</b> | <i>number</i> | 0.2 | Precision to use when detecting hover events over [Line](https://threejs.org/docs/#api/objects/Line) objects, such as arcs and paths. |
279
+
280
+ | Method | Arguments | Description |
281
+ | --- | :--: | --- |
282
+ | <b>pointOfView</b> | { <i>lat</i>, <i>lng</i>, <i>altitude</i> } [,<i>ms</i>=`0`] | By default the camera will aim at the cross between the equator and the prime meridian (`0,0` coordinates), at an altitude of `2.5` globe radii. | Camera position, in terms of geographical `lat`, `lng`, `altitude` coordinates. Each of the coordinates is optional, allowing for motion in just some direction. The 2nd optional argument defines the duration of the transition (in ms) to animate the camera motion. A value of 0 (default) moves the camera immediately to the final position. |
283
+ | <b>pauseAnimation</b>| *-* |Pauses the rendering cycle of the component, effectively freezing the current view and cancelling all user interaction. This method can be used to save performance in circumstances when a static image is sufficient. |
284
+ | <b>resumeAnimation</b>| *-* |Resumes the rendering cycle of the component, and re-enables the user interaction. This method can be used together with `pauseAnimation` for performance optimization purposes. |
285
+ | <b>onZoom</b> | <i>func</i> | *-* | Callback function for point-of-view changes by zooming or rotating the globe using the orbit controls. The current point of view (with the syntax `{ lat, lng, altitude }`) is included as sole argument. |
286
+ | <b>scene</b>| *-* |Access the internal ThreeJS [Scene](https://threejs.org/docs/#api/scenes/Scene). Can be used to extend the current scene with additional objects not related to globe.gl. |
287
+ | <b>camera</b>| *-* |Access the internal ThreeJS [Camera](https://threejs.org/docs/#api/cameras/PerspectiveCamera). |
288
+ | <b>renderer</b>| *-* |Access the internal ThreeJS [WebGL renderer](https://threejs.org/docs/#api/renderers/WebGLRenderer). |
289
+ | <b>postProcessingComposer</b> | *-* | Access the [post-processing composer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer). Use this to add post-processing [rendering effects](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing) to the scene. By default the composer has a single pass ([RenderPass](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/RenderPass.js)) that directly renders the scene without any effects. |
290
+ | <b>controls</b>| *-* |Access the internal ThreeJS [orbit controls object](https://threejs.org/docs/#examples/controls/OrbitControls). |
291
+
292
+ ### Utility
293
+
294
+ | Method | Arguments | Description |
295
+ | --- | :--: | --- |
296
+ | <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. |
297
+ | <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. |
298
+ | <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. |
299
+ | <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. |
300
+
301
+ ## Giving Back
302
+
303
+ [![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)!
304
+
305
+ [npm-img]: https://img.shields.io/npm/v/react-globe.gl.svg
306
+ [npm-url]: https://npmjs.org/package/react-globe.gl
307
+ [build-size-img]: https://img.shields.io/bundlephobia/minzip/react-globe.gl.svg
308
+ [build-size-url]: https://bundlephobia.com/result?p=react-globe.gl
309
+ [dependencies-img]: https://img.shields.io/david/vasturiano/react-globe.gl.svg
310
+ [dependencies-url]: https://david-dm.org/vasturiano/react-globe.gl
@@ -0,0 +1,174 @@
1
+ 'use strict';
2
+
3
+ var fromKapsule = require('react-kapsule');
4
+ var GlobeKapsule = require('globe.gl');
5
+ var PropTypes = require('prop-types');
6
+
7
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+
9
+ var fromKapsule__default = /*#__PURE__*/_interopDefaultLegacy(fromKapsule);
10
+ var GlobeKapsule__default = /*#__PURE__*/_interopDefaultLegacy(GlobeKapsule);
11
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
12
+
13
+ var GlobePropTypes = {
14
+ width: PropTypes__default['default'].number,
15
+ height: PropTypes__default['default'].number,
16
+ backgroundColor: PropTypes__default['default'].string,
17
+ backgroundImageUrl: PropTypes__default['default'].string,
18
+ globeImageUrl: PropTypes__default['default'].string,
19
+ bumpImageUrl: PropTypes__default['default'].string,
20
+ showGlobe: PropTypes__default['default'].bool,
21
+ showGraticules: PropTypes__default['default'].bool,
22
+ showAtmosphere: PropTypes__default['default'].bool,
23
+ atmosphereColor: PropTypes__default['default'].string,
24
+ atmosphereAltitude: PropTypes__default['default'].number,
25
+ globeMaterial: PropTypes__default['default'].object,
26
+ onGlobeReady: PropTypes__default['default'].func,
27
+ onGlobeClick: PropTypes__default['default'].func,
28
+ onGlobeRightClick: PropTypes__default['default'].func,
29
+ pointsData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
30
+ pointLat: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
31
+ pointLng: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
32
+ pointColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
33
+ pointAltitude: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
34
+ pointRadius: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
35
+ pointResolution: PropTypes__default['default'].number,
36
+ pointsMerge: PropTypes__default['default'].bool,
37
+ pointsTransitionDuration: PropTypes__default['default'].number,
38
+ pointLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
39
+ onPointClick: PropTypes__default['default'].func,
40
+ onPointRightClick: PropTypes__default['default'].func,
41
+ onPointHover: PropTypes__default['default'].func,
42
+ arcsData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
43
+ arcStartLat: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
44
+ arcStartLng: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
45
+ arcEndLat: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
46
+ arcEndLng: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
47
+ arcColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].arrayOf(PropTypes__default['default'].string), PropTypes__default['default'].func]),
48
+ arcAltitude: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
49
+ arcAltitudeAutoScale: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
50
+ arcStroke: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
51
+ arcCurveResolution: PropTypes__default['default'].number,
52
+ arcCircularResolution: PropTypes__default['default'].number,
53
+ arcDashLength: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
54
+ arcDashGap: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
55
+ arcDashInitialGap: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
56
+ arcDashAnimateTime: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
57
+ arcsTransitionDuration: PropTypes__default['default'].number,
58
+ arcLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
59
+ onArcClick: PropTypes__default['default'].func,
60
+ onArcRightClick: PropTypes__default['default'].func,
61
+ onArcHover: PropTypes__default['default'].func,
62
+ polygonsData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
63
+ polygonGeoJsonGeometry: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
64
+ polygonCapColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
65
+ polygonCapMaterial: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].string, PropTypes__default['default'].func]),
66
+ polygonSideColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
67
+ polygonSideMaterial: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].string, PropTypes__default['default'].func]),
68
+ polygonStrokeColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
69
+ polygonAltitude: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
70
+ polygonCapCurvatureResolution: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
71
+ polygonsTransitionDuration: PropTypes__default['default'].number,
72
+ polygonLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
73
+ onPolygonClick: PropTypes__default['default'].func,
74
+ onPolygonRightClick: PropTypes__default['default'].func,
75
+ onPolygonHover: PropTypes__default['default'].func,
76
+ pathsData: PropTypes__default['default'].array,
77
+ pathPoints: PropTypes__default['default'].oneOfType([PropTypes__default['default'].array, PropTypes__default['default'].string, PropTypes__default['default'].func]),
78
+ pathPointLat: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
79
+ pathPointLng: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
80
+ pathPointAlt: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
81
+ pathResolution: PropTypes__default['default'].number,
82
+ pathColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].arrayOf(PropTypes__default['default'].string), PropTypes__default['default'].func]),
83
+ pathStroke: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
84
+ pathDashLength: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
85
+ pathDashGap: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
86
+ pathDashInitialGap: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
87
+ pathDashAnimateTime: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
88
+ pathTransitionDuration: PropTypes__default['default'].number,
89
+ pathLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
90
+ onPathClick: PropTypes__default['default'].func,
91
+ onPathRightClick: PropTypes__default['default'].func,
92
+ onPathHover: PropTypes__default['default'].func,
93
+ hexBinPointsData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
94
+ hexBinPointLat: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
95
+ hexBinPointLng: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
96
+ hexBinPointWeight: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
97
+ hexBinResolution: PropTypes__default['default'].number,
98
+ hexMargin: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].func]),
99
+ hexTopColor: PropTypes__default['default'].func,
100
+ hexSideColor: PropTypes__default['default'].func,
101
+ hexAltitude: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].func]),
102
+ hexTopCurvatureResolution: PropTypes__default['default'].number,
103
+ hexBinMerge: PropTypes__default['default'].bool,
104
+ hexTransitionDuration: PropTypes__default['default'].number,
105
+ hexLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
106
+ onHexClick: PropTypes__default['default'].func,
107
+ onHexRightClick: PropTypes__default['default'].func,
108
+ onHexHover: PropTypes__default['default'].func,
109
+ hexPolygonsData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
110
+ hexPolygonGeoJsonGeometry: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
111
+ hexPolygonColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
112
+ hexPolygonAltitude: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
113
+ hexPolygonResolution: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
114
+ hexPolygonMargin: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
115
+ hexPolygonCurvatureResolution: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
116
+ hexPolygonsTransitionDuration: PropTypes__default['default'].number,
117
+ hexPolygonLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
118
+ onHexPolygonClick: PropTypes__default['default'].func,
119
+ onHexPolygonRightClick: PropTypes__default['default'].func,
120
+ onHexPolygonHover: PropTypes__default['default'].func,
121
+ tilesData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
122
+ tileLat: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
123
+ tileLng: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
124
+ tileAltitude: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
125
+ tileWidth: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
126
+ tileHeight: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
127
+ tileUseGlobeProjection: PropTypes__default['default'].oneOfType([PropTypes__default['default'].bool, PropTypes__default['default'].string, PropTypes__default['default'].func]),
128
+ tileMaterial: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].string, PropTypes__default['default'].func]),
129
+ tileCurvatureResolution: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
130
+ tilesTransitionDuration: PropTypes__default['default'].number,
131
+ tileLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
132
+ onTileClick: PropTypes__default['default'].func,
133
+ onTileRightClick: PropTypes__default['default'].func,
134
+ onTileHover: PropTypes__default['default'].func,
135
+ labelsData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
136
+ labelLat: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
137
+ labelLng: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
138
+ labelAltitude: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
139
+ labelRotation: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
140
+ labelText: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
141
+ labelSize: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
142
+ labelTypeFace: PropTypes__default['default'].object,
143
+ labelColor: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
144
+ labelResolution: PropTypes__default['default'].number,
145
+ labelIncludeDot: PropTypes__default['default'].oneOfType([PropTypes__default['default'].bool, PropTypes__default['default'].string, PropTypes__default['default'].func]),
146
+ labelDotRadius: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].func]),
147
+ labelDotOrientation: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
148
+ labelsTransitionDuration: PropTypes__default['default'].number,
149
+ labelLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
150
+ onLabelClick: PropTypes__default['default'].func,
151
+ onLabelRightClick: PropTypes__default['default'].func,
152
+ onLabelHover: PropTypes__default['default'].func,
153
+ customLayerData: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
154
+ customThreeObject: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].string, PropTypes__default['default'].func]),
155
+ customThreeObjectUpdate: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
156
+ customLayerLabel: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
157
+ onCustomLayerClick: PropTypes__default['default'].func,
158
+ onCustomLayerRightClick: PropTypes__default['default'].func,
159
+ onCustomLayerHover: PropTypes__default['default'].func,
160
+ enablePointerInteraction: PropTypes__default['default'].bool,
161
+ pointerEventsFilter: PropTypes__default['default'].func,
162
+ lineHoverPrecision: PropTypes__default['default'].number,
163
+ onZoom: PropTypes__default['default'].func
164
+ };
165
+
166
+ var Globe = fromKapsule__default['default'](GlobeKapsule__default['default'], {
167
+ methodNames: [// bind methods
168
+ 'pauseAnimation', 'resumeAnimation', 'pointOfView', 'scene', 'camera', 'renderer', 'postProcessingComposer', 'controls', 'getCoords', 'getScreenCoords', 'toGeoCoords', 'toGlobeCoords'],
169
+ initPropNames: ['animateIn', 'waitForGlobeReady', 'rendererConfig']
170
+ });
171
+ Globe.displayName = 'Globe';
172
+ Globe.propTypes = GlobePropTypes;
173
+
174
+ module.exports = Globe;