Focus

Behavior

To focus on a specific latitude/longitude coordinate (e.g. Singapore [1.3521, 103.8198]), pass an array of coordinates to the component. Clicking on the globe or resetting the focus prop to null defocuses the globe.

xxxxxxxxxx
 
() => {
  const [focus, setFocus] = useState(null)
  return (
    <div>
      <button onClick={() => setFocus([1.3521, 103.8198])}>Singapore</button>
      <button onClick={() => setFocus([40.73061, -73.935242])}>
        New York
      </button>
      <button onClick={() => setFocus([37.773972, -122.431297])}>
        San Fransisco
      </button>
      <button onClick={() => setFocus(null)}>None</button>
      <ReactGlobe focus={focus} />
    </div>
  )
}

Use the focus options to control how focused coordinates behave. Use the playground code editor to explore customizing the focus animations or disabling the defocus feature.

xxxxxxxxxx
 
() => {
  const [focus, setFocus] = useState(null)
  return (
    <div>
      <button onClick={() => setFocus([1.3521, 103.8198])}>Singapore</button>
      <button onClick={() => setFocus([40.73061, -73.935242])}>
        New York
      </button>
      <button onClick={() => setFocus([37.773972, -122.431297])}>
        San Fransisco
      </button>
      <button onClick={() => setFocus(null)}>None</button>
      <ReactGlobe
        focus={focus}
        options={{
          focusAnimationDuration: 3000,
          focusDistanceRadiusScale: 2,
          focusEasingFunction: ['Elastic', 'In'],
          enableDefocus: false,
        }}
      />
    </div>
  )
}

🌎 react-globe (v5.0.2)

Focus

Behavior