Interactive Globe Explorer

Scrollable office/location explorer with a live React Globe, synchronized city list, clickable map pins, responsive details popover, and one-click address/email copy actions.

3D Components3dscrollhoverglobemap3dlocationscrollinteractivecopytooltipwebgl

Interactive Globe Explorer

Playground

Shape the component before you copy it.

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

initialLocationId

Optional id of the city focused when the globe initializes.

globeTextureUrl

Path to the globe texture image used by react-globe.gl.

Generated JSX

Copy this into your page.

<InteractiveGlobeExplorer
  initialLocationId="\"4\" (London)"
  globeTextureUrl="/images/earth-blue-marble.jpg"
/>

Animation effects

3dscrollhover

Copy-paste ready

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

Installation