Comment on page
Share location
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.
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.
The variables in a web view component tag
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.
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.
Last modified 2yr ago