react-globe.gl-fork

v2.22.8

Published

2 years ago

React component for Globe Data Visualization using ThreeJS/WebGL

Downloads

0High
0Medium
0Low

b3hr4d

react webgl three globe geo spherical projection orthographic

react-globe.gl-fork-fork

[![NPM package][npm-img]][npm-url] [![Build Size][build-size-img]][build-size-url] [![NPM Downloads][npm-downloads-img]][npm-downloads-url]

React bindings for the globe.gl-fork UI component.

A React component to represent data visualization layers on a 3-dimensional globe in a spherical projection, using ThreeJS/WebGL for 3D rendering.

Check out the examples:

Basic (source)
Arc Links (source)
Highlight links (source)
Choropleth (source)
Elevated Polygons (source)
Hollow Globe (source)
Path Lines (source)
Map Labels (source)
HTML Markers (source)
Hexed Country Polygons (source)
Tiles (source)
Ripple Rings (source)
Emit Arcs on Click (source)
Clouds (source)
Solar Terminator (source)
Custom Globe Styling (source)
Custom Layer (source)
World Population (source)
Recent Earthquakes (source)
World Volcanoes (source)
US outbound international airline routes (source)
Earth Shield (source)
Satellites (source)
Submarine Cables (source)
Moon Landing Sites (source)

Quick start

import Globe from "react-globe.gl-fork-fork"

or using a script tag

<script src="//unpkg.com/react-globe.gl-fork-fork"></script>

then

ReactDOM.render(<Globe pointsData={myData} />, myDOMElement)

API reference

Container Layout

| Prop | Type | Default | Description | | ------------------------- | :-----------: | :---------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | number | <window width> | Canvas width. | | height | number | <window height> | Canvas height. | | backgroundColor | string | #000011 | Background color. | | backgroundImageUrl | string | - | URL of the image to be used as background to the globe. If no image is provided, the background color is shown instead. | | waitForGlobeReady | bool | 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. | | animateIn | bool | 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. |

Globe Layer

| Prop | Type | Default | Description | | ------------------------- | :-------------: | :-------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | globeImageUrl | string | - | 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. | | bumpImageUrl | string | - | URL of the image used to create a bump map in the material, to represent the globe's terrain. | | showGlobe | bool | true | Whether to show the globe surface itself. | | showGraticules | bool | false | Whether to show a graticule grid demarking latitude and longitude lines at every 10 degrees. | | showAtmosphere | bool | true | Whether to show a bright halo surrounding the globe, representing the atmosphere. | | atmosphereColor | string | lightskyblue | The color of the atmosphere. | | atmosphereAltitude | string | 0.15 | The max altitude of the atmosphere, in terms of globe radius units. | | globeMaterial | Material | MeshPhongMaterial | ThreeJS material used to wrap the globe. Can be used for more advanced styling of the globe, like in this example. | | onGlobeReady | func | - | Callback function to invoke immediately after the globe has been initialized and visible on the scene. | | onGlobeClick | func | - | 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). | | onGlobeRightClick | func | - | Callback function for right-clicks on the globe. The clicked globe coordinates and the event object are included as arguments: onGlobeRightClick({ lat, lng }, event). |

Points Layer

| Prop | Type | Default | Description | | ------------------------------- | :-----------------------------------------: | :---------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | pointsData | array | [] | 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. | | pointLabel | string or func | name | Point object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | | pointLat | number, string or func | lat | Point object accessor function, attribute or a numeric constant for the cylinder's center latitude coordinate. | | pointLng | number, string or func | lng | Point object accessor function, attribute or a numeric constant for the cylinder's center longitude coordinate. | | pointColor | string or func | () => '#ffffaa' | Point object accessor function or attribute for the cylinder color. | | pointAltitude | number, string or func | 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). | | pointRadius | number, string or func | 0.25 | Point object accessor function, attribute or a numeric constant for the cylinder's radius, in angular degrees. | | pointResolution | number | 12 | Radial geometric resolution of each cylinder, expressed in how many slice segments to divide the circumference. Higher values yield smoother cylinders. | | pointsMerge | bool | 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. | | pointsTransitionDuration | number | 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. | | onPointClick | func | - | Callback function for point (left-button) clicks. The point object, the event object and the clicked coordinates are included as arguments: onPointClick(point, event, { lat, lng, altitude }). Only works if pointsMerge is disabled. | | onPointRightClick | func | - | Callback function for point right-clicks. The point object, the event object and the clicked coordinates are included as arguments: onPointRightClick(point, event, { lat, lng, altitude }). Only works if pointsMerge is disabled. | | onPointHover | func | - | 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. |

Arcs Layer

| Prop | ----------------------------- | arcsData | arcLabel | arcStartLat | arcStartLng | arcEndLat | arcEndLng | arcColor | arcAltitude | arcAltitudeAutoScale | arcStroke | arcCurveResolution | arcCircularResolution | arcDashLength | arcDashGap | arcDashInitialGap | arcDashAnimateTime | arcsTransitionDurationonArcClick | onArcRightClick | onArcHover | Type | Default | Description | | :------------------------------------------------: | :---------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | array | [] | 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. | | string or func | name | Arc object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | | number, string or func | startLat | Arc object accessor function, attribute or a numeric constant for the line's start latitude coordinate. | | number, string or func | startLng | Arc object accessor function, attribute or a numeric constant for the line's start longitude coordinate. | | number, string or func | endLat | Arc object accessor function, attribute or a numeric constant for the line's end latitude coordinate. | | number, string or func | endLng | Arc object accessor function, attribute or a numeric constant for the line's end longitude coordinate. | | string, [string, ...] or func | () => '#ffffaa' | Arc object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors, or a color interpolator function. | | number, string or func | 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. | | number, string or func | 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. | | number, string or func | 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 whose width is constant (1px) regardless of the camera distance. Otherwise, a TubeGeometry is used. | | number | 64 | Arc's curve resolution, expressed in how many straight line segments to divide the curve by. Higher values yield smoother curves. | | number | 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). | | number, string or func | 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). | | number, string or func | 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. | | number, string or func | 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. | | number, string or func | 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. | --> | number | 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. | | func | - | Callback function for arc (left-button) clicks. The arc object, the event object and the clicked coordinates are included as arguments: onArcClick(arc, event, { lat, lng, altitude }). | | func | - | Callback function for arc right-clicks. The arc object, the event object and the clicked coordinates are included as arguments: onArcRightClick(arc, event, { lat, lng, altitude }). | | func | - | 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). |

Polygons Layer

| Prop | Type | Default | Description | | ------------------------------------ | :-------------------------------------------: | :---------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | polygonsData | array | [] | 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. | | polygonLabel | string or func | name | Polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | | polygonGeoJsonGeometry | string or func | 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. | | polygonCapColor | string or func | () => '#ffffaa' | Polygon object accessor function or attribute for the color of the top surface. | | polygonCapMaterial | Material, string or func | - | Polygon object accessor function, attribute or material object for the ThreeJS material to use in the top surface. This prop takes precedence over polygonCapColor, which will be ignored if both are defined. | | polygonSideColor | string or func | () => '#ffffaa' | Polygon object accessor function or attribute for the color of the cone sides. | | polygonSideMaterial | Material, string or func | - | Polygon object accessor function, attribute or material object for the ThreeJS material to use in the cone sides. This prop takes precedence over polygonSideColor, which will be ignored if both are defined. | | polygonStrokeColor | string or func | - | Polygon object accessor function or attribute for the color to stroke the polygon perimeter. A falsy value will disable the stroking. | | polygonAltitude | number, string or func | 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). | | polygonCapCurvatureResolution | number, string or func | 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. | | polygonsTransitionDuration | number | 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. | | onPolygonClick | func | - | Callback function for polygon (left-button) clicks. The polygon object, the event object and the clicked coordinates are included as arguments: onPolygonClick(polygon, event, { lat, lng, altitude }). | | onPolygonRightClick | func | - | Callback function for polygon right-clicks. The polygon object, the event object and the clicked coordinates are included as arguments: onPolygonRightClick(polygon, event, { lat, lng, altitude }). | | onPolygonHover | func | - | 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). |

Paths Layer

| Prop | Type | Default | Description | | ------------------------- | :------------------------------------------------: | :---------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | pathsData | array | [] | 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. | | pathLabel | string or func | name | Path object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | | pathPoints | array, string or func | 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. | | pathPointLat | number, string or func | arr => arr[0] | Path point object accessor function, attribute or a numeric constant for the latitude coordinate. | | pathPointLng | number, string or func | arr => arr[1] | Path point object accessor function, attribute or a numeric constant for the longitude coordinate. | | pathPointAlt | number, string or func | 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). | | pathResolution | number | 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. | | pathColor | string, [string, ...] or func | () => '#ffffaa' | Path object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors, or a color interpolator function. Transparent colors are not supported in Fat Lines with set width. | | pathStroke | number, string or func | 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 whose width is constant (1px) regardless of the camera distance. Otherwise, a FatLine is used. | | pathDashLength | number, string or func | 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). | | pathDashGap | number, string or func | 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. | | pathDashInitialGap | number, string or func | 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. | | pathDashAnimateTime | number, string or func | 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. | | pathTransitionDuration | number | 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. | | onPathClick | func | - | Callback function for path (left-button) clicks. The path object, the event object and the clicked coordinates are included as arguments: onPathClick(arc, event, { lat, lng, altitude }). | | onPathRightClick | func | - | Callback function for path right-clicks. The path object, the event object and the clicked coordinates are included as arguments: onPathRightClick(arc, event, { lat, lng, altitude }). | | onPathHover | func | - | 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). |

Hex Bin Layer

| Prop | Type | Default | Description | | -------------------------------- | :-----------------------------------------: | :-----------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | hexBinPointsData | array | [] | 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. | | hexLabel | string or func | - | 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. | | hexBinPointLat | number, string or func | lat | Point object accessor function, attribute or a numeric constant for the latitude coordinate. | | hexBinPointLng | number, string or func | lng | Point object accessor function, attribute or a numeric constant for the longitude coordinate. | | hexBinPointWeight | number, string or func | 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. | | hexBinResolution | number | 4 | The geographic binning resolution as defined by H3. 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. | | hexMargin | number or func | 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. | | hexAltitude | number or func | ({ 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. | | hexTopCurvatureResolution | number | 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. | | hexTopColor | func | () => '#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. | | hexSideColor | func | () => '#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. | | hexBinMerge | bool | 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. | | hexTransitionDuration | number | 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. | | onHexClick | func | - | Callback function for hexagon (left-button) clicks. The hex object including all points binned, the event object and the clicked coordinates are included as arguments: onHexClick({ points, sumWeight, center: { lat, lng } }, event, { lat, lng, altitude }). Only works if hexBinMerge is disabled. | | onHexRightClick | func | - | Callback function for hexagon right-clicks. The hex object including all points binned, the event object and the clicked coordinates are included as arguments: onHexRightClick({ points, sumWeight, center: { lat, lng } }, event, { lat, lng, altitude }). Only works if hexBinMerge is disabled. | | onHexHover | func | - | 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. |

Hexed Polygons Layer

| Prop | Type | Default | Description | | ------------------------------------ | :-----------------------------------------: | :---------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | hexPolygonsData | array | [] | 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. | | hexPolygonLabel | string or func | name | Hexed polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | | hexPolygonGeoJsonGeometry | string or func | 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. | | hexPolygonColor | string or func | () => '#ffffaa' | Hexed polygon object accessor function or attribute for the color of each hexagon in the polygon. | | hexPolygonAltitude | number, string or func | 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).