Inte­gra­te GPS

How to inte­gra­te a GPS navi­ga­ti­on into an Ionic app using the Map­Trip GPS Navi­ga­ti­on Inter­face (MTI) with Ionic

A cus­to­mer cont­ac­ted us and asked if he could inte­gra­te our GPS navi­ga­ti­on app Map­Trip in his Ionic app. His app mana­ges a list of addres­ses which a truck needs to visit in a given order. We did a litt­le bit of rese­arch and then gave our trai­nee Hen­drik the task of buil­ding a demo app. 

You are curr­ent­ly vie­w­ing a pla­ce­hol­der con­tent from You­tube. To access the actu­al con­tent, click the but­ton below. Plea­se note that doing so will share data with third-par­ty providers.

More Infor­ma­ti­on

A few days after he star­ted, he had a basic Ionic app up and run­ning. He inte­gra­ted the Map­Trip API into the app and was able to pass a coor­di­na­te to Map­Trip, trig­ger the rou­te cal­cu­la­ti­on and start the gui­dance. His ionic app com­mu­ni­ca­tes with the navi­ga­ti­on and recei­ves infor­ma­ti­on back from it. He has estab­lished a two way communication. 

Hendrik’s app can ser­ve as a blue print for any other ionic app that needs to com­mu­ni­ca­te with our GPS app. He has uploa­ded his pro­ject to our Git­Hub account along with a descrip­ti­on of what he has done. We hope this will help you to build your own navi­ga­ti­on inte­gra­ti­on into your Ionic app. Plea­se do not hesi­ta­te to cont­act us if you need assi­stance. We are hap­py to help!

Using the Map­Trip GPS Navi­ga­ti­on Inter­face (MTI) with Ionic

This pro­ject is meant to show how to inte­gra­te MTI with your Ionic cordo­va application.

This inclu­des an exam­p­le mti-plug­in, which is neces­sa­ry to call nati­ve java-code from your appli­ca­ti­on, the ionic-wrap­per to wrap the nati­ve-calls as Pro­mi­ses or Obser­v­a­bles, and the Ionic-Pro­ject itself.

The available func­tion­a­li­ty is limi­t­ed to sen­ding a WGS84-Coor­di­na­te to Map­Trip, cal­cu­la­ting the rou­te, start­ing the gui­dance and swit­ching to Map­Trip when the gui­dance has been star­ted. With the­se examp­les you will learn how to send the MTI-requests to the nati­ve side of the app, and how to recei­ve the neces­sa­ry call­backs from MTI and hand­le them in your ionic-app.


First of all you need the Map­Trip appli­ca­ti­on instal­led and run­ning on your Phone.

To build this app, you’ll need to have npm instal­led.
With npm, install ionic and cordo­va globally:

npm install -g ionic   
npm install -g cordova 

If you want to crea­te your own plug­in, you’ll also need to have plug­man installed:

npm install -g plugman

To crea­te your own wrap­per for your plug­in, make sure gulp is also installed:

npm install -g gulp

and clo­ne the ionic nati­ve repo­si­to­ry. From the­re on, fol­low the ins­truc­tions to crea­te your wrapper.

Instal­ling the Ionic App

After down­loa­ding the pro­ject, run

npm install

to crea­te the node_modules direc­to­ry and down­load all dependencies.

Next you’ll need to install @ionic-native/core.

npm install @ionic-native/core@latest

Now you have to down­load the ionic wrap­per mti-demo-plug­in from this repo­si­to­ry, and copy it into the node_modules/@ionic-native direc­to­ry, as seen here:

Integrate GPS

Plea­se note that ’npm install’ or adding / remo­ving the plug­in may dele­te the wrap­per. If it does, sim­ply copy it back into the direc­to­ry befo­re you build your apk.

To install the plug­in you need to add android as plat­form in your ionic project:

ionic cordova platform add android

After run­ning this com­mand the fol­lo­wing direc­to­ry should have been created:

Integrate GPS

Now your rea­dy to install the plug­in its­elf. First down­load it from this repo­si­to­ry. After­wards, use either

ionic cordova plugin add <PathToPlugin>


plugman install --platform android --project ./platforms/android --plugin <PathToPlugin>

to add it to the project.

To con­firm the instal­la­ti­on, check

ionic cordova plugins list

to see all instal­led plugins.

You can also see if the plug­in is instal­led in the platforms/android/app/src/main/java directory

Integrate GPS

and in the plug­ins directory.

Integrate GPS

Now that you have ever­ything the app needs, you can run

ionic cordova build android 

to crea­te an apk. Copy this apk on your pho­ne, and install it.

Using the App

Plea­se note that the demo app expects an alre­a­dy run­ning Map­Trip, as it will not start Map­Trip by its­elf.
By start­ing the demo app, the con­nec­tion to Map­Trip via MTI should alre­a­dy be estab­lished, and you will see this screen:

Integrate GPS

Now enter a valid WGS84-Coor­di­na­te and press “Start navi­ga­ti­on”. The app will send tho­se coor­di­na­tes to Map­Trip, and will show Map­Trip auto­ma­ti­cal­ly when the rou­te has finis­hed cal­cu­la­ting and the navi­ga­ti­on has been started.

If you switch back to the Ionic app, you will see a label, whe­re cur­rent navi­ga­ti­on-infor­ma­ti­on (the next street on your rou­te, and the distance to the crossing in meters) is being displayed.

Use MTI with your own plugin

To use the MTI-func­tion­a­li­ty for your own plug­in, you need to add the depen­den­cy. In this exam­p­le we use a cus­tom grad­le-file, which gets com­pi­led into the base grad­le-file of your ionic/android pro­ject. It is loca­ted in MTIDemoPlugin/src/android/plugin.gradle.

To include plugin.gradle, you need to modi­fy the plugin.xml loca­ted in the root direc­to­ry of your plugin.

Sim­ply add

<framework src="src/android/plugin.gradle" custom="true" type="gradleReference" />

to your plugin.xml, as seen here:

Integrate GPS

With this you will have full con­trol of Map­Trip from insi­de your ionic application!

Skip to toolbar