ahuseyn / react-dot-globe

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

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/core@5.0.0-alpha.65

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