@planet/react-globe

React-globe

This component displays a globe, with an optional location marker and a center.

Props

The globe can be customized with the following props:

• center: The center position of the globe. The format is [lat, lon]
• diameter: Diameter of the image, in pixels
• landColor: color of the land areas. Defaults to '#fff'
• markerColor: color of the position marker. Defaults to '#18aae6'
• oceanColor: color of the oceans. Defaults to '#666'.
• rotationTime: Duration of animation for rotation.
• shaded: Whether the globe is shaded, for a 3d look, or flat.
• shadingOpacity: Opacity of the shading, if enabled. Defaults to 1.

Animation

Changing the center position on the component will cause it to rotate into the new position.

Example

<Globe center={[37, -122]}
  diameter={80}
  landColor="#191919"
  markerColor="#009da5"
  oceanColor="#f2f2f2"
  rotationTime=1000
  shaded
  shadingOpacity={0.1}/>