Globe

Simple

Render a simple interactive globe with a single line of code!

Error: Error creating WebGL context.

xxxxxxxxxx

<ReactGlobe />

Size

By default, react-globe is responsively sized to the parent container. You can provide explicit height and width prop to control the globe size. Note that the globe's aspect ratio is always computed with respect to its height. Try resizing the window's height or play with other values in the Playground.

Error: Error creating WebGL context.

xxxxxxxxxx

<ReactGlobe height="30vh" width={400} />

Background

By default, react-globe renders with a default background. You can disable texture backgrounds by setting the globeBackgroundTexture prop to null. This will allow you to use the parent container's background instead:

Error: Error creating WebGL context.

xxxxxxxxxx

<div

  style={{

    backgroundImage: 'linear-gradient(to right, red , yellow)',

  }}

>

  <ReactGlobe globeBackgroundTexture={null} />

</div>

Clouds

You can disable clouds by setting the globeCloudsTexture to null, and control various cloud properties in the options prop. Use the Playground to play around with the respective cloud options.

Error: Error creating WebGL context.

xxxxxxxxxx

<ReactGlobe

  globeCloudsTexture={null}

  options={{

    globeCloudsOpacity: 0.8,

  }}

/>

Glow

You can disable and control various glow properties in the options prop. Use the Playground to play around with the respective glow options.

Error: Error creating WebGL context.

xxxxxxxxxx

<ReactGlobe

  options={{

    enableGlobeGlow: true,

    globeGlowCoefficient: 0.1,

    globeGlowColor: 'gold',

    globeGlowPower: 4,

    globeGlowRadiusScale: 0.5,

  }}

/>

Initial Settings

You can set the initialCameraDistanceRadiusScale prop to control how far the camera is placed from the globe, and the initialCoordinates prop as initial settings for the globe.

Error: Error creating WebGL context.

xxxxxxxxxx

<ReactGlobe

  initialCameraDistanceRadiusScale={15}

  initialCoordinates={[29.7604, -95.3698]}

/>