Share location
👉 The tag
With the share location functionality, the mobile apps can access the device's location, and send the coordinates to an API endpoint!
[require:location]📍 Where to add the tag: Page level layer
Once the app has permission to access the device location, two Bravo variables will contain the user's location: ${device.latitude} and ${device.longitude}. You can use them to target an API that processes this information and add location-related features in your apps.
💡Tip: Place the [action:enable-location]tag to any clickable or tappable element like button or container to prompt the location permission users to update their location preferences. Put it strategically such before accessing location-based features or when user context suggests a need for location data.
🛠️ How to set it up
Using location data in a web view
Some services allow inserting position coordinates as query string parameters in an URL to return some location-related information. In this example, we're using Google Maps to insert a web view in one of our app screens, showing a map with the user's location.
In your design file, add the [require:location] tag on the page level layer where the app will use location data. This tag will trigger a pop-up for the app user to allow location access. Allowing it is necessary to populate the ${device.latitude} and ${device.longitude} with user location data.
Set up the ${device.latitude} and ${device.longitude} variables in the web view URL. In this case, we're setting them statically in Figma, as the Google Maps URL will always be the same (only the values of the variables will change).
[component:web-view:https://maps.google.com/?q=${device.latitude},${device.longitude}]It's also possible to bind the web view element to API data, so the URL is fetched via an API request.
Using location data on API requests
Look for an API that supports location functionality. Some examples are LocationIQ and Google Places API. In this example, we're going to use a service called HTTPbin to get the user location coordinates and display them on a pop-up screen.
Add the location variables in the request URL or request body, depending on the API method you're using. In our sample app, we'll be using HTTPbin, a service that will return back the data we send via GET request, so we can bind this data to our screen and show the user coordinates.
https://httpbin.org/get?lat=${device.latitude}&long=${device.longitude}
Then, you'll need to create an app project with your design file and bind the UI elements as usual.
Preview on Bravo Vision
Once you're done with the data binding, you can test the app in Bravo Vision. When you enter the screen with [require:location], remember to accept location access.
If the app user denies the location access, the remote API will return an error, since no location data will be sent from the app. The error code will depend on the API you're using. You can use state pages to handle these errors.
Example design file
Last updated
Was this helpful?