Initial position issue

Hi,

I see animation on first pass. fitBounds don’t change. Why?

const markerLocation = [ displayLocation[1], displayLocation[0] ]; // <lng>, <lat>

<ReactMapboxGl style="mapbox://styles/mapbox/dark-v9"
    accessToken={ accessToken }
    containerStyle={{ height: '100%' }} 
    interactive={ false }
    fitBounds={ this.getBounds(displayLocation) }
    fitBoundsOptions={ {offset: [0, -100]} }>
  <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
    <Feature coordinates={ markerLocation } />
  </Layer>
</ReactMapboxGl>

Looking through the code but can’t really figure out what’s going on: https://github.com/alex3165/react-mapbox-gl/blob/master/src/map.tsx#L140

PS: setting center breaks fitBounds.

[pronebird]

While this issue has been resolved. fitBounds still animates on first pass. I solved that by disabling animation during first render:

  constructor() {
    super();
    this.state = { isFirstPass: true };
  }

  componentDidMount() {
    this.setState({ isFirstPass: false });
  }

  componentWillUnmount() {
    this.setState({ isFirstPass: true });
  }

render() {
  const ruler = cheapRuler(center[0], 'meters');

  // calculate bounds with cheap-ruler
  const bounds = ruler.bufferPoint([40.741895, -73.989308], 300);
  
  // convert lat/lng to lng/lat
  let mapBounds = [];
  for(let i = 0; i < bounds.length; i += 2) {
    mapBounds.push(bounds.slice(i, i + 2).reverse());
  }

  const mapBoundsOptions = { offset: [0, -100], animate: !this.state.isFirstPass };
  // ...
}

[alex3165]

Yep seems reasonable, I will publish a patch with the update