rowix-georgia-globe

A 3D Earth globe component with a Stripe-style dotted visualization, TopoJSON-based continent shapes, and animated arcs. Built with React and Three.js.

Install

npm install rowix-georgia-globe

Peer dependencies: your project needs react, react-dom, and three.

npm install react react-dom three

Usage

import Globe from 'rowix-georgia-globe';
// or: import { Globe } from 'rowix-georgia-globe';

function App() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <Globe />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | dotColor | string | '#ffffff' | Color of land dots | | dotSize | number | 6 | Point size in px | | dotDensity | number | 1.0 | Grid step in degrees (smaller = denser) | | highlight | GlobeHighlight | Georgia | Country highlight config | | connections | GlobeConnection[] | 10 Tbilisi routes | Arc connections to render | | focusPoint | { lat, lng } | Tbilisi | Where the globe centers and snaps back to | | magnetToFocus | boolean | true | Auto-snap back after interaction | | className | string | — | CSS class for the wrapper div | | style | CSSProperties | — | Inline styles for the wrapper div |

Highlight a country

<Globe
  highlight={{ countryISO: '840', color: '#60A5FA', scale: 3 }}
  focusPoint={{ lat: 39.8, lng: -98.6 }}
/>

Custom connections

import Globe from 'rowix-georgia-globe';
import type { GlobeConnection } from 'rowix-georgia-globe';

const routes: GlobeConnection[] = [
  { start: { lat: 51.5, lng: -0.12 }, end: { lat: 40.71, lng: -74.0 }, color: '#80E9FF' },
  { start: { lat: 51.5, lng: -0.12 }, end: { lat: 35.67, lng: 139.65 }, color: '#FECA57' },
];

<Globe connections={routes} focusPoint={{ lat: 51.5, lng: -0.12 }} />

Run as a full app

pnpm install
pnpm dev

License

MIT