globe.gl

Globe.GL

A web component to represent data visualization layers on a 3-dimensional globe in spherical projection. This library is a convenience wrapper around the three-globe plugin, and uses ThreeJS/WebGL for 3D rendering. Largely inspired by the WebGL Globe.

Check out the examples:

• Basic (source)
• World Population (source)

Quick start

import Globe from 'globe.gl';

or

const Globe = require('globe.gl');

or even

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

then

const myGlobe = Globe();
myGlobe(<myDOMElement>)
  .globeImageUrl(<imageUrl>)
  .pointsData(<myData>);

API reference

Initialisation

Globe({ configOptions })(<domElement>)

Config options	Description	Default
rendererConfig: object	Configuration parameters to pass to the ThreeJS WebGLRenderer constructor.	{ alpha: true }

Container layout

Method	Description	Default
width([px])	Getter/setter for the canvas width.	<window width>
height([px])	Getter/setter for the canvas height.	<window height>
backgroundColor([str])	Getter/setter for the background color.	#000011
globeImageUrl([string])	Getter/setter for the 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.	null

Points Layer

Method	Description	Default
pointsData([array])	Getter/setter for the list of points to represent in the points map layer. Each point is displayed as a cylindrical 3D object rising perpendicular from the surface of the globe.	[]
pointLabel([str or fn])	Point object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
pointLat([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's center latitude coordinate.	lat
pointLng([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's center longitude coordinate.	lat
pointColor([str or fn])	Point object accessor function or attribute for the cylinder color.	() => '#ffffaa'
pointHeight([num, str or fn])	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).	0.1
pointRadius([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's radius, in angular degrees.	0.25
pointResolution([num])	Getter/setter for the radial geometric resolution of each cylinder, expressed in how many slice segments to divide the circumference. Higher values yield smoother cylinders.	12
pointsMerge([boolean])	Getter/setter for 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. Note that enabling this option will disable all point specific interactions, such as click, rightClick and hover.	false
onPointClick(fn)	Callback function for point (left-button) clicks. The point object is included as single argument onPointClick(point). Only works if pointsMerge is disabled.	-
onPointRightClick(fn)	Callback function for point right-clicks. The point object is included as single argument onPointRightClick(point). Only works if pointsMerge is disabled.	-
onPointHover(fn)	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.	-

Custom Layer

Method	Description	Default
customLayerData([array])	Getter/setter for the list of items to represent in the custom map layer. Each item is rendered according to the customThreeObject method.	[]
customThreeObject([Object3d, str or fn])	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. The callback method's signature includes the object item as well as the globe radius: customThreeObject((item, globeRadius) => { ... }).	null

Render control

Method	Description	Default
pauseAnimation()	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.
resumeAnimation()	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.
cameraPosition([{x,y,z}], [lookAt], [ms])	Getter/setter for the camera position, in terms of x, y, z coordinates. Each of the coordinates is optional, allowing for motion in just some dimensions. The optional second argument can be used to define the direction that the camera should aim at, in terms of an {x,y,z} point in the 3D space. The 3rd 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.	By default the camera will face the center of the globe at a sensible z distance.
scene()	Access the internal ThreeJS Scene. Can be used to extend the current scene with additional objects not related to globe.gl.
camera()	Access the internal ThreeJS Camera.
renderer()	Access the internal ThreeJS WebGL renderer.
controls()	Access the internal ThreeJS orbit controls object.

Utility

Method	Description
getCoords(lat, lng [,altitude])	Utility method to translate spherical coordinates. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the equivalent {x, y, z} euclidean spatial coordinates.