React .globe

Highly customizable Dot Globe component for React. Inspired by GitHub's globe, uses Babylon.js under the hood.

Live preview here.

Install

1. Install the library

npm install react-dot-globe

2. Install dependency

npm install @babylonjs/[email protected]

Usage

Refer to the example folder for detailed usage example.

import React from 'react'
import ReactDotGlobe from 'react-dot-globe'

function App() {
  const markers = [
    {
      name: 'Istanbul',
      coordinates: [41.106942, 29.008056],
      color: '#FF0000',
      height: 1,
      diameter: 0.05
    }
  ]

  const curves = [
    {
      point1: [41.106942, 29.008056],
      point2: [40.751925, -73.981963],
      name: `From Istanbul to New York`,
      color: '#FF0000',
      segments: 30,
      animationSpeed: 1000,
      clearAnimation: 'forward' // backward
    }
  ]

  return (
    <ReactDotGlobe
      className='dotGlobe' // CSS class of the canvas
      backgroundColor='#f39c12' // Background color of the canvas
      cameraPosition={[-6, 10, -10]} // Refer to the docs: https://doc.babylonjs.com/typedoc/classes/babylon.camera#position
      cameraMinZoom={10}
      cameraMaxZoom={500}
      cameraZoomSpeed={100}
      globeRotationAxis={[0, 1, 0]}
      globeRotationSpeed={0} // Rotation speed. 0 for no rotation
      dotDiameter={0.05} // Diameter of the dots
      dotHeight={0.01} // Height of the dots
      dotSegments={8} // Segments of the dots
      dotColor='#34495e' // Color of the dots
      markers={markers}
      curves={curves}
      onClick={(e, hit) => console.log(hit)} // Refer to the docs: https://doc.babylonjs.com/typedoc/classes/babylon.scene#onpointerup
    />
  )
}

License

MIT © ahuseyn