distanceRadiusScale focusOption not changing with focus change

[aboe026]

I have a continent select menu that controls which continent is in focus of the globe. The selected continent is used to calculated the coordinates for the focus, as well as the distanceRadiusScale for the focusOption. I'm seeing the focus move to the new coordinate correctly, however it doesn't seem like the changed distanceRadiusScale is getting properly picked up, as the scale does not seem to change.

Here is my file for context:

import PropTypes from 'prop-types'
import React from 'react'
import ReactGlobe from 'react-globe'

import { CONTINENT } from '../../constants'

export class Globe extends React.Component {
  constructor(props) {
    super(props)
  }

  getFocus() {
    const { continent } = this.props

    switch (continent) {
      case CONTINENT.NorthAmerica:
        return [42, -95]
      case CONTINENT.SouthAmerica:
        return [-20, -58]
      case CONTINENT.Europe:
        return [50, 10]
      case CONTINENT.Asia:
        return [15, 85]
      case CONTINENT.Africa:
        return [0, 19]
      case CONTINENT.Oceania:
        return [-30, 146]
      case CONTINENT.Antarctica:
        return [-90, 0]
      default:
        return null
    }
  }

  getZoom() {
    const { continent, width } = this.props

    switch (width) {
      case 'xs':
        switch (continent) {
          case CONTINENT.Europe:
            return 2
          case CONTINENT.Africa:
            return 3
          default:
            return 2.5
        }
      case 'sm':
        return 1
      case 'md':
        return 1
      case 'lg':
        return 1
      case 'xl':
        return 1
      default:
        return 5
    }
  }

  render() {
    const { visits, width } = this.props

    let focus = this.getFocus()
    console.log('TEST focus: ' + JSON.stringify(focus))
    const zoom = this.getZoom()
    console.log('TEST zoom: ' + zoom)

    return (
      <ReactGlobe
        globeOptions={{
          enableBackground: true,
          cloudsSpeed: 0.125,
          enableClouds: true
        }}
        cameraOptions={{
          maxDistanceRadiusScale: 10,
          distanceRadiusScale: width === 'xs' ? 5 : 3
        }}
        focus={focus}
        focusOptions={{
          distanceRadiusScale: zoom
        }}
        markers={visits.map((visit) => {
          return {
            id: visit.id,
            value: 1,
            color: 'red',
            city: visit.city,
            coordinates: [ visit.lat, visit.lon ]
          }
        })}
        markerOptions={{
          activeScale: 1.3,
          animationDuration: 1000,
          enableGlow: true,
          enableTooltip: true,
          glowCoefficient: 0,
          glowPower: 3,
          glowRadiusScale: 2,
          radiusScaleRange: [0.005, 0.02],
          type: 'bar',
          getTooltipContent: marker => `${marker.city}`,
        }}
      />
    )
  }
}

Globe.propTypes = {
  visits: PropTypes.arrayOf(PropTypes.object),
  continent: PropTypes.string,
  width: PropTypes.string
}

export default Globe

I can see in the console printouts that the distanceRadiusScale is correctly changing. It just doesn't seem to affect the actual zoom of the globe.

[chrisrzhou]

Hi @aboe026, I believe this is a bug, and I can look into it. useCamera hook might not be listening to changes in focusOptions. Will look into it along with other bugs in next 1-2 weeks, but if you want to take a jab at fixing the bug, that's appreciated too :)

Quick question, is the component easy/intuitive to use? I have mixed thoughts about using *Options for props API. But I didn't want to spread all the configurations out as flat props, which would make the component overwhelming to understand.

[aboe026]

I love the component! Very straight-forward. I have no problem with the *Options for props API, was intuitive enough for me at least. Thanks for making this project, its awesome!

[chrisrzhou]

Hi @aboe026, this bug is now fixed in 3.1.1. I tested it locally while fixing the bug, but please feel free to give it a spin. You can fork this codesandbox example to test.

Closing the issue for now!