Globe Pins

A rotating 3-D globe rendered on canvas from real world-atlas geo data, with location pins showing name, address, and phone labels, animated arc connections, and a bloom/glow mode.

3D Components3dglobemap3dcanvaspinsconnectionsarcslocationnetworkorthographicgeobloom

Globe Pins — Variant 1

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

autoRotate

Auto-rotate the globe continuously.

rotationSpeed

Seconds for one full 360° rotation.

initialRotation

Starting longitude (degrees) at center of the globe.

dotColor

Country outline dot color (any CSS color).

dotSize

Country dot radius in px.

dotOpacity

Max opacity of country dots (0–1).

dotDensity

Fraction of geo points rendered — 1 = full, 0.5 = half.

bloom

Enable cyan glow / bloom mode with lat-lon grid overlay.

Generated JSX

Copy this into your page.

<GlobePins
  autoRotate={true}
  rotationSpeed={60}
  initialRotation={300}
  dotColor="rgba(255,255,255,0.88)"
  dotSize={0.85}
  dotOpacity={0.72}
  dotDensity={1}
  bloom={false}
/>

Globe Pins — Variant 2

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

autoRotate

Auto-rotate the globe continuously.

rotationSpeed

Seconds for one full 360° rotation.

initialRotation

Starting longitude (degrees) at center of the globe.

dotColor

Country outline dot color (any CSS color).

dotSize

Country dot radius in px.

dotOpacity

Max opacity of country dots (0–1).

dotDensity

Fraction of geo points rendered — 1 = full, 0.5 = half.

bloom

Enable cyan glow / bloom mode with lat-lon grid overlay.

Generated JSX

Copy this into your page.

<GlobePins
  autoRotate={true}
  rotationSpeed={60}
  initialRotation={300}
  dotColor="rgba(255,255,255,0.88)"
  dotSize={0.85}
  dotOpacity={0.72}
  dotDensity={1}
  bloom={false}
/>

Globe Pins — Variant 3

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

autoRotate

Auto-rotate the globe continuously.

rotationSpeed

Seconds for one full 360° rotation.

initialRotation

Starting longitude (degrees) at center of the globe.

dotColor

Country outline dot color (any CSS color).

dotSize

Country dot radius in px.

dotOpacity

Max opacity of country dots (0–1).

dotDensity

Fraction of geo points rendered — 1 = full, 0.5 = half.

bloom

Enable cyan glow / bloom mode with lat-lon grid overlay.

Generated JSX

Copy this into your page.

<GlobePins
  autoRotate={true}
  rotationSpeed={60}
  initialRotation={300}
  dotColor="rgba(255,255,255,0.88)"
  dotSize={0.85}
  dotOpacity={0.72}
  dotDensity={1}
  bloom={false}
/>

Animation effects

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

Globe Pins — Variant 1

Shape the component before you copy it.

Globe Pins — Variant 2

Shape the component before you copy it.

Globe Pins — Variant 3

Shape the component before you copy it.

Animation effects