Please follow the plan in the design doc. I have pasted the plan below for external viewers so some of the links might not work. Also, please note that contrary to the original plan below, we have already implemented the "Use current location" button, so please try to reuse as much of that code as possible.
Automatic user location access
The first time a user opens this page we will prompt them to enable location services and then show a map centered on their current location. We’re not going to get the location using the mapping libraries because rnmapbox/maps doesn’t provide a way to access the location permissions. For web, react-map-gl and the underlying Mapbox gl js library don’t provide a way to request the user’s location without forcing them to press a button.
To handle geolocation we will need to platform specific files because react-native-geolocation doesn’t support web. We will create a location folder with platform specific implementations for all the functions handling the user location. At the moment we only need getCurrentPosition.
On native at the top of the file we will set up the configuration via Geolocation.setRNConfiguration. In the config we’ll set skipPermissionRequests: false since we’ll be using this function to request permission, authorizationLevel: ‘whenInUse’ because we only need the location when the app is open, and locationProvider: ‘auto’.
getCurrentPosition(success, error, config) will call Geolocation.getCurrentPosition passing the callbacks config through. From the App side we’ll set up a default config with the timeout and the maximumAge set to one minute because it seems like a reasonable maximum time to wait for your location and it’s unlikely that a cached location will be out of date within one minute.
On web getCurrentPosition(success, error, config) will first check if navigator.geolocation exists. If not then we will call the error call back with a GeolocationPositionError object with code 2, POSITION_UNAVAILABLE. Otherwise, we’ll call navigator.geolocation.getCurrentPosition passing through the params.
After calling getCurrentPosition in the ExpensifyMap, in the success callback we will center the map on the user’s location. The error callback will do nothing for this location request, because if we fail to get the user’s location we’ll continue displaying the default map area of San Francisco. We can prompt the user to enable location permission when they ask for it more explicitly on the waypoint editor page.
On native to center the map we’ll use camera.flyTo([lon, lat]); on the Camera ref. The Camera component will be a child of the MapView as shown in this example.
On web we will call map.flyTo({center: [lon, lat]}); where the map comes from the useMap hook.
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~01b6a985f453bad073
- Upwork Job ID: 1711808933186453504
- Last Price Increase: 2023-10-24
Please follow the plan in the design doc. I have pasted the plan below for external viewers so some of the links might not work. Also, please note that contrary to the original plan below, we have already implemented the "Use current location" button, so please try to reuse as much of that code as possible.
Automatic user location access
The first time a user opens this page we will prompt them to enable location services and then show a map centered on their current location. We’re not going to get the location using the mapping libraries because rnmapbox/maps doesn’t provide a way to access the location permissions. For web, react-map-gl and the underlying Mapbox gl js library don’t provide a way to request the user’s location without forcing them to press a button.
To handle geolocation we will need to platform specific files because react-native-geolocation doesn’t support web. We will create a location folder with platform specific implementations for all the functions handling the user location. At the moment we only need getCurrentPosition.
On native at the top of the file we will set up the configuration via Geolocation.setRNConfiguration. In the config we’ll set skipPermissionRequests: false since we’ll be using this function to request permission, authorizationLevel: ‘whenInUse’ because we only need the location when the app is open, and locationProvider: ‘auto’.
getCurrentPosition(success, error, config) will call Geolocation.getCurrentPosition passing the callbacks config through. From the App side we’ll set up a default config with the timeout and the maximumAge set to one minute because it seems like a reasonable maximum time to wait for your location and it’s unlikely that a cached location will be out of date within one minute.
On web getCurrentPosition(success, error, config) will first check if navigator.geolocation exists. If not then we will call the error call back with a GeolocationPositionError object with code 2, POSITION_UNAVAILABLE. Otherwise, we’ll call navigator.geolocation.getCurrentPosition passing through the params.
After calling getCurrentPosition in the ExpensifyMap, in the success callback we will center the map on the user’s location. The error callback will do nothing for this location request, because if we fail to get the user’s location we’ll continue displaying the default map area of San Francisco. We can prompt the user to enable location permission when they ask for it more explicitly on the waypoint editor page.
On native to center the map we’ll use camera.flyTo([lon, lat]); on the Camera ref. The Camera component will be a child of the MapView as shown in this example.
On web we will call map.flyTo({center: [lon, lat]}); where the map comes from the useMap hook.
Upwork Automation - Do Not Edit