Docs
API

API

The library exports a default function createGlobe, which accepts two required parameters and returns a globe instance. Here’re the definitions:

import createGlobe from 'cobe'

const globe = createGlobe(canvas, options)

canvas

A HTML canvas element with width and height defined.

options

An object with the following properties:

PropertyDescriptionRequired
devicePixelRatioThe “DPR”, defaults to 1
widthThe width of the canvasRequired
heightThe height of the canvasRequired
phiThe φ angle, 0 ≤ phi ≤ 2πRequired
thetaThe θ angle, -π ≤ theta ≤ πRequired
darkDisplay the globe in dark or light mode, 0 ≤ dark ≤ 1Required
diffuseControl the diffuse lighting, 0 ≤ diffuseRequired
mapSamplesNumber of dots displayed, 0 ≤ mapSamples ≤ 100000Required
mapBrightnessBrightness of the dots, 0 ≤ mapBrightnessRequired
baseColor[r, g, b] of the base color, 0 ≤ r, g, b ≤ 1
markerColor[r, g, b] of the markers’ color, 0 ≤ r, g, b ≤ 1
glowColor[r, g, b] of the glow color, 0 ≤ r, g, b ≤ 1
scaleScales the globe, 0 ≤ scale
offset[offsetX, offsetY], offset of the globe in pixel
markersAn array of markers displayed
onRenderA callback function called when a new frame is renderedRequired

You can check how some of them actually look like in the Playground.

markers

A marker is an object of location and size properties. location is a pair of latitude and longitude:

markers: [
  { location: [37.7595, -122.4367], size: 0.03 },
  { location: [40.7128, -74.006], size: 0.1 },
  ...
]

For example San Francisco is at 37.7595, -122.4367.

onRender

A callback function that will be called on every re-render, you can re-assign some options to the state object to update them:

let currentPhi = 0

const globe = createGlobe(canvas, {
  ...
  onRender: (state) => {
    // Called on every animation frame.
    // `state` will be an empty object, return updated options.
    state.phi = currentPhi

    // Rotate the globe by 0.01 on every frame.
    currentPhi += 0.01
  },
})

globe

A Phenomenon instance. It has methods like globe.toggle() to pause/resume rendering, and globe.destroy() to destroy itself. Please read its docs for more details.