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!

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.

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 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!

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.