onymos-logo
location icon

Quickstart Guide: Location Component

Location Component

Select a framework to get started.

Get started

Using Ionic or Cordova? Get the Location component working in your app in four easy steps.

  1. Download the component
  2. Add it to your environment
  3. Using Location
  4. 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.

$ ionic cordova plugin add onymos_components/onymos-component-initialize

Then we can add the Onymos Location component.

$ ionic 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. To generate your Onymos license credentials, create an Onymos Cloud Account.

NOTE: Your Onymos Auth Token credentials will work with any number of apps and components. Onymos has a developer—and project—friendly pricing model. You can use any or all of our components in an app at no cost until they’re installed on 100 or more devices. This is ideal for iterating your MVP (see detailed pricing here).

Next, let’s go inside your Ionic app’s app.component.ts file and initialize Location.

 import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
    
 declare var OnymosInitialize: any;
 declare var OnymosGeo: any;
    
 @Component({
   selector: 'app-root',
     templateUrl: 'app.component.html',
     styleUrls: ['app.component.scss'],
  })
  
  export class AppComponent {
    constructor(
      private platform: Platform
    ) 
    {
      this.initializeApp();
    }
    
     initializeApp(){
        this.platform.ready().then(() => {
    
          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 app.component.ts file.

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 can create a deviceLocation object with two properties called latitude and longitude and set them inside the getLocationSuccess() callback.

  export class AppComponent {
    
    deviceLocation: any={
      latitude: '',
      longitude: '',
    }

    constructor(

    [...]

    getLocation(){
      OnymosGeo.getLocation(

        function getLocationSuccess(locationObj) {
          this.deviceLocation.latitude=locationObj.latitude
          this.deviceLocation.longitude=locationObj.longitude
        },

        function getLocationFailure(error){
          console.log(error)
        })
     }
    

Finally, we can write the front-end code in app.component.html to call getLocation() and display a device’s location.

<div (click)="getLocation()">
  <p> Where are you? </p>
</div>
  
<div>
  <p> {{deviceLocation.latitude}} </p>
</div>

<div>
  <p> {{deviceLocation.longitude}} </p>
</div>

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 schedule.

Get your free white paper