Looking for the new OutSystems Now? Click here!
 Features > Use the Device Location
Use the Device Location
OutSystems Now provides with the GetLocation plugin which enables you to get the current location using the mobile device.
In this example we will change an application by adding a link to Google Maps that gives all the route options from our current location to the customer’s location.
In our application we have the following screen:
It uses a Form widget to display the customer information.
As you can see in the screenshot, we already have the customer’s location, we only need the user’s current location. To retrieve it and use it in a link, follow these steps:
1. Ensure that the OutSystems Now component of the Forge is installed. Learn how to install a component from the Forge;
2. In your application, create a reference to the following elements of the OutSystemsNow module: GetLocation and IsUsingOutSystemsNowApp;
3. Add two local variables of Text type, call them CurrentLatitude, CurrentLongitude;
4. Add two Inputs to the screen, name them CurrentLatitudeInput and CurrentLongitudeInput, and bind the variables of step 3. to the corresponding input;
5. Add a link below the coordinates and name it ‘GetLocationLink’.
Verify if the Visible property has the value ‘True’, to ensure that the page renders the link.
Set the Enabled property with ‘False’, and the IsDefault property with ‘No’.
In the Method property, choose ‘Navigate’.
As Destination set an External Site with the dynamic URL value of “#”. This means, the button will navigate to the top of the screen.
If you typed text for the link, delete it. This link doesn’t need to appear on the screen, we use it only for retrieving the current location from the device;
6. Add a GetLocation web block next to the GetLocationLink, as arguments pass GetLocationLink.Id, CurrentLatitudeInput.Id and CurrentLongitudeInput.Id, respectively;
7. Add a link at the bottom of the screen with the text ‘Directions to here’. Link it to an External Site with a URL that displays a map with the route. Make sure that you use the TypedValue of the inputs when referring to the latitude and longitude inputs. Their values are set only on the device side, so the only value containing the valuable location is the inputs’ TypedValue.
In our example, the URL is the following: 
"https://www.google.pt/maps/dir/" + CurrentLatitudeInput.TypedValue + "," + CurrentLongitudeInput.TypedValue + "/" + GetCustomerById.List.Current.Customer.Latitude + "," + GetCustomerById.List.Current.Customer.Longitude
8. From the location inputs, select the one that gets rendered later on the screen. Create a new screen action as its OnChange Destination property. Name the new screen action AfterGetLocation.
To its action flow, add an Ajax Refresh element to refresh the DirectionLink widget. We need this action to refresh the DirectionLink with the value that the GetLocationLink retrieves.
After completing the above steps, the widget hierarchy of the application looks like this:
As a result, we have the ‘Directions to here’ link in our application:
Tapping the ‘Directions to here’ link opens Google Maps:
How does it work?
When the server renders the screen, the GetLocation web block adds some JavaScript to the link. When the device loads the link on the screen, the followings happen:
1. The JavaScript of the link retrieves the coordinates; 
2. It fills them into the CurrentLatitudeInput, CurrentLongitudeInput fields;
3. The application executes the navigation action defined in the link properties. In our case it jumps to the top of the page as the “#” value in the URL property indicates.
The link is there only to run the JavaScript that retrieves the location. Do not add any logic to the link, as it interferes with the execution of the JavaScript.
In our example we use another technique to trigger actions after the link retrieves the location. It’s the onchange action of the input fields.
As you can see in the above paragraphs, the ‘Directions to here’ link gets rendered before the JavaScript returns the current value. Hence the link doesn’t have the current location value. This is why we need to refresh it with an onload screen action when the inputs have their final value.
If users don't need to know their current coordinates, you can hide it from the screen. To do so, enclose the CurrentLatitudeInput, CurrentLongitudeInput fields in a container, and set its Display property with False.
Do not use the input fields’ Visible property for this purpose. If you set them with False, the screen doesn’t render the inputs at all, and the location values won’t be available.
 To learn more about the Cordova plugin, check the plugin documentation and source code.
Click here to see your activities