Maps: [QUESTION] How to use the GeoLocateControl in react native?

[ShaharyarMaroof]

I would like to display a button to locate the current user location and center the map on those coordinates. On the web API there is an example for this, but I can't find a component for this in the lib.

Expected behavior
There should be a button to load the user's location

Versions (please complete the following information):

• Platform: Android, iOS
• SDK Version 7.0.9
• React Native Version 0.60.6

[ferdicus]

Hey there,
you gotta do this on you own - this repo just provides js bindings to the iOS and Android SDKs.

What you can do is save the incoming gps positions, render a button over the MapView and call setCamera with the last saved coordinates.

See components:
https://github.com/react-native-mapbox-gl/maps/blob/master/docs/Camera.md
https://github.com/react-native-mapbox-gl/maps/blob/master/docs/UserLocation.md

For more info

[mfazekas]

Also see https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/SetUserTrackingModes.js

[ShaharyarMaroof]

Thanks! I'll take a look at this, but shouldn't the lib provide this functionality like the web API does?

[mfazekas]

@ShaharyarMaroof unlike the web API neither the native ios nor android provides such a component directly. We try to cover what the native SDK's implements.

[ShaharyarMaroof]

Ah I see. thanks for clearing it up.

[ShaharyarMaroof]

@mfazekas I have a little confusion in using the component methods, so for the Camera component, how can I call setCamera? I tried using ref, as done in the examples for the MapView component, but get an error setCamera is not a function.

[ferdicus]

In the Camera component set the ref

<MapboxGL.Camera ref={setCamRef} zoomLevel={16} />

  const setCamRef = (ref) => {
    camRef = ref;
  };

and then you can use setCamera on that ref

  const setCamera = (cameraConfig) => {
    if (!camRef) return;
    camRef.setCamera(cameraConfig);
  };

[ShaharyarMaroof]

const MapView = (props) => {
  let cameraRef;

  const moveCamera = (cameraConfig) => {
    if (!cameraRef) return
    // ---> this log is printed but the camera does not move
    console.log('moving camera')
    cameraRef.setCamera(cameraConfig)
  }

  // invoke the geo location service to get the current locaiton of the user
  const getCurrentUserPosition = () => {
    const onPositionUpdate = (locationInfo) => {
      const currentLongitude = pathOr(0, ['coords', 'longitude'], locationInfo)
      const currentLatitude = pathOr(0, ['coords', 'latitude'], locationInfo)
      // moveCamera({ centerCoordinate: [currentLongitude, currentLatitude] })
      // --> call the moveCamera function with the updated coordinates
      moveCamera({ centerCoordinate: [0, 0] })
    }

    GeoLocationService.getCurrentPosition({
      successHandler: onPositionUpdate
    })
  }

  React.useEffect(() => {
    setTelemetryEnabled(false);
    askAndroidPermission();

    // getCurrentUserPosition();
  }, [])

  return (
    <View style={{ flex: 1 }}>
      <MapBoxMapView
        style={{ flex: 1 }}
        logoEnabled={false}
        // attributionEnabled={false}
        compassEnabled
      >
        <Camera
          ref={(ref) => cameraRef = ref}
          zoomLevel={16}
          followZoomLevel={8}
          followUserLocation
          followUserMode='normal'
        />
        <UserLocation />
        <View style={{ zIndex: 100 }}>
          {props.children}
          <MyLocationButton onPressHandler={() => getCurrentUserPosition()} />
        </View>
      </MapBoxMapView>
    </View>
  )
}

@mfazekas I have followed your example to pass the current location to the setCamera method. the function gets called but the camera doesn't reset to the new location passed in. I've tried moveTo([0,0]) and flyTo([0,0]) as well.
Any ideas?

[mfazekas]

@ShaharyarMaroof You have followUserLocation set, so we'll not allow you to change the camera. Try to set it to false.

[ShaharyarMaroof]

@mfazekas thanks, now its working fine.

[zaidmunir11s]

<MapboxGL.Camera

         zoomLevel={16}
         animationMode={'flyTo'}
         animationDuration={6000}
         followUserMode={'normal'}
         followUserLocation={this.state.follow}
        defaultSettings={{
        centerCoordinate: [0, 0],
        zoomLevel: 14
         }}
       centerCoordinate={this.state.markerCoords}
       />
       onPress={()=>{
       this.setState({follow:true})
       this.setState({follow:false})
       }}

this will Fly you to current location , when ever you press button