Maps: Start at the user current position

[emmx]

It's not clear from the docs how to set the initial coordinate to be the current location of the user.

The only way I could was by doing something like follows, but it looks too complicated for something that could/should be just a flag such as defaultCenterUserLocation={true}.

// Looks like centerCoordinate has to be undefined if not set, null won't work
this.state = { initialCoords: undefined }

<MapboxGL.UserLocation
  onUpdate={location => {
    const currentCoords = [location.coords.longitude, location.coords.latitude]
    const initialCoords = this.state.initialCoords

    // The idea here is initialCoords should be set only once, otherwise we'll be updating
    // the camera's centerCoordinate over and over on every onUpdate(), which causes
    // issues when doing camera.flyTo(somewhere_else) or when dragging the map manually
    // (the camera will tend to reset its center position to the current position)
    this.setState({ initialCoords: initialCoords ? initialCoords : currentCoords })
  }}
/>

<MapboxGL.Camera
  defaultSettings={{
    centerCoordinate: [0, 0],
    zoomLevel: 14
  }}
  centerCoordinate={this.state.initialCoords}
/>

I'm pretty sure it's not the way to go so please let me know how to do this.

[anastely]

Are you solve it?

[emmx]

No. Someone on Gitter mentioned we can use flyTo on onDidFinishRenderingMap. May work, I haven't tried yet, however I'm guessing it's best to use flyTo without an animations.

I still think it's cumbersome and should be done more easily with a flag or probably something else...

[anastely]

Hmm, yeah i tried to do it, take a look to my code here
https://github.com/react-native-mapbox-gl/maps/issues/565

[emmx]

When you do centerCoordinate={this.state.initialCoords}, I think it causes the center of the map to be constantly set on every onUpdate. Ie, the center of the map will follow the user position. If you don't want that only set this.setState({ initialCoords: currentCoords }) once.

[anastely]

I don't understand you well 😅,
Where should I setState once?
I add it in onUpdate

[mfazekas]

You can use Camera/followUserLocation to track user location. User location might not be avaiable when the component initially rendered, in such cases you can prodive default value via Camer/defaultSettings/centerCoordinate etc.

[markmoomoo]

then you can get corrent location and use the ref of camera method this.camera.moveTo([lng, lat])

[mrpmohiburrahman]

then you can get corrent location and use the ref of camera method this.camera.moveTo([lng, lat])

This solved my issue, thanks to @markmoomoo

[therealrooster]

then you can get corrent location and use the ref of camera method this.camera.moveTo([lng, lat])

This solved my issue, thanks to @markmoomoo

Hi @mrpmohiburrahman can you provide an example of how you got this to work? I'm having trouble...

[briannezhad]

You guys can just use
<MapboxGL.Camera followUserLocation={true} />