Working with the Users Current Location Working with the Users Current Location

Working with the Users Current Location

Ismaen Aboubakare Ismaen Aboubakare

A user's location is useful data to have on hand throughout a journey. In order to retrieve the users current location, this requires using the Maps control. The maps control provides the ability to get both the latitude and longitude of the user, as well as an address of the closest location that Google has to those coordinates. These outputs can then be stored as a variable and then sent to other systems or included as a part of your journey. For example, you can get the current location and use it to auto populate form fields or use the user's current location to get nearby POIs.

Getting the users current location/address as a variable

This section will show how to get a current users location as a variable, both a user's geocoded location and a user's coordinates. 

To pass a users location as a variable, first create a 'Place Object' in AirData, and name it Place. This will create a Place type for the variable used to store the user's location. 

appobjectPlace__2_.gif

Then add a variable of the type 'Place' on the web page. Click on the '+' icon next to variables in the inspector, go to objects, and select Place. Name the variable location. Add another variable with the type 'Place' and call it geo_location

2021-04-07_10-56-15.png

Next, add the maps control to the webpage. With the maps control selected, add the 'location' variable to the center property and the geo_location variable to the geocodedCenter property.  The maps control will automatically center at the user's current location which will then write those coordinates/addresses to those variables.

2021-04-07_11-04-02.png

Once the properties on the map control are configured, save the application and Preview the application. In the App Preview, the location will automatically default to 161 California Ave, but within a published application, the user will be prompted to allow access to their location for that application. This is required in order to get a user's location. The below are the outputs of both the location and geo_location variables, that can then be used across the application or journey. 

2021-04-07_11-14-33.png

Note: To split the formattedAddress into different address components (i.e. Address line, City, State, Zipcode), use the SPLIT() function to break the address apart. See Working With Different Address Formats for more information. 

Display the current location of a user's device on a map

The maps control can be used to display the current location of a user on the map. This is can be used in applications where a user needs to see and pin their specific location or an application needs to get a user's location without any user input. By using the Maps control and the place object, Airkit will be able to pinpoint the user's device location. This section will walk through how to display the location of a user on the map. 

First add a Place object in AirData, and name it Place

appobjectPlace.gif

Then, add two variables with the type Place on the web page - location and geo_location. This example will give the option to surface to location data objects.

maps-user-location1.png

The location variable will be used for the center property, which will return just the latitude and longitude. The geo_location will be used for the geocodedCenter property, which will return the following object:

Sample geo_location

{ 
"latitude": 37.428706,
"longitude": -122.141921,
"formattedAddress": "161 California Ave, Palo Alto, CA 94306, USA",
"identifier": "<id>"
}

The geocodedCenter will return the nearest address/place that Google has to the coordinates and provides a formatted address, latitude, longitude, and identifier.

Next, select the map control and configure the following properties:

  • geocodedCenter: geo_location
  • center: location
  • locationMarker: location

Once the properties are configured, save the application and go to the App Preview. The map should be displayed on the screen with a marker on the user's current location. 

apppreview1.png

The location can also be displayed as a location indicator. To configure a location indicator on a map, check the showIndicator property on the map control. The indicatorColor is also configurable as well.

mceclip0.png

This will add a location indicator that reflects the user's location.  

mceclip1.png

Note: When viewing the application in the App Preview, it will default to 161 California Ave, Palo Alto CA. In order to see the application work as intended, publish the application and view it through a mobile or desktop browser. The browser/user must allow the application to have access to the location in order to retrieve the user's location. 

Further Reading

With a users location, an application has far more possibilities to create a tailored and personalized experience leveraging a location. These guides can be further configured using the place search input control as well, to add a search component to the application. To dive further with maps and addresses, see:

Add comment

Article is closed for comments.