Quickstart Guide: Location Component
Location Component
Get started
Using Ionic or Cordova? Get the Location component working in your app in four easy steps.
- Download the component
- Add it to your environment
- Using Location
- Troubleshooting
1. Download the Onymos Location component
Sign up! We’ll send you a link to your component, set up your Onymos Cloud Account, and generate your Onymos license credentials. In the meantime, you can get familiar with our API Documentation and developer resources, or join a whole community of developers building apps with Onymos on Reddit!
2. Add it to your environment
Add your components to a folder in your app’s root (e.g., onymos_components).
Add the Onymos Initialize component to your environment.
$ cordova plugin add onymos_components/onymos-component-initialize
Then we can add the Onymos Location component.
$ cordova plugin add onymos_components/onymos-component-geo
Then update the widget inside your config.xml with the Onymos Widget ID you receive after you create an Onymos Cloud Account.
3. Using Location
Using the Location component in your app
The Onymos Location component is a powerful tool for delivering functionality based on a device’s location. Build battery-optimized geofences, find addresses, and retrieve detailed information about where you, and your users, are.
Before we use Location, let’s make sure we have everything we need to configure your onymosConnectObject. The onymosConnectObject requires the appropriate Onymos license credentials: your Customer ID (also called an Onymos ID) and your Onymos Auth Token. You’ll need these credentials to use this (or any) component in your app.
Next, let’s go inside your Cordova app’s index.js file and initialize Location.
var OnymosInitalize
var OnymosLocation
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
const OnymosConnectObject={
customerId : 'Your customerId goes here',
onymosAuthToken : 'Your onymosAuthToken goes here',
envType: 'PRD'
}
OnymosInitialize.initialize(
OnymosConnectObject,
function onymosInitializeSuccess(status){
console.log("Onymos initialized Successfully.", status)
},
function onymosInitializeFailure(error){
console.log("Onymos failed to initialize.", error)
})
}
Great! If we configured your onymosConnectObject correctly, onymosInitializeSuccess() should print its message to the console. Now we’re ready to use Location. Let’s create a function called getLocation() in the index.js file.
function getLocation(){
OnymosGeo.getLocation(
function getLocationSuccess(locationObj) {
locationObj = {
latitude: 'The latitude coordinate of a location. Between -90.0 to 90.0 degrees.',
longitude: 'The longitude coordinate of a location. Between -180.0 to 180.0 degrees.',
altitude: 'The altitude of a location, if available, in meters.',
course: 'The direction the device is moving, if available, in degrees relative to north.',
speed: 'The speed, if available, in meters per second.',
horizontalAccuracy: 'The estimated horizontal accuracy of the location, if available, in meters.',
verticalAccuracy: 'The estimated vertical accuracy of the location, if available, in meters.',
timestamp: 'The time location was retrieved, in Unix epoch time.'
},
function getLocationFailure(error){
console.log(error)
})
}
It’s that easy! The getLocation() method will return a locationObj containing a device’s latitude, longitude, and more. Let’s try displaying a device’s location so a user can actually see it. We’ll need to write some front-end code in your index.html file.
<div (click)="getLocation()">
<h1> Where are you? </h1>
</div>
<div>
<h3> Latitude </h3>
<p class="latitude"> </p>
</div>
<div>
<h3> Longitude </h3>
<p class="longitude"> </p>
</div>
Finally, back in our getLocation() method, we can query the document to set Latitude and Longitude inside the getLocationSuccess() callback.
var lat = document.getElementsByClassName("latitude")
var lon = document.getElementsByClassName("longitude")
function getLocation(){
OnymosGeo.getLocation(
function getLocationSuccess(locationObj) {
lat.innerHTML=locationObj.latitude
lon.innerHTML=locationObj.longitude
},
function getLocationFailure(error){
console.log(error)
})
}
Now, your Location-powered app can geolocate a device and display its latitude and longitude. Try adding Location’s startLocationUpdates() method to update a device’s latitude and longitude in real-time!
4. Troubleshooting
How do I squash this bug? Is Ionic supposed to do that? Why is this iOS build failing?
Let’s figure it out—join the Onymos community on Reddit! More of a loner? You can email us directly at customersuccess@onymos.com.
Dig into our API documentation
Developer support
Got questions? Our support team is here to help.
Think differently about app development
Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your development timeline.