Building a realtime map using Kotlin and Pusher

Just as the name implies, the aim of this article is to show the realtime movement of a marker on a map using Kotlin and Pusher. This feature is common in location tracking applications. We see taxi apps and food ordering apps making use of features like this. Google provides an extremely easy map API, which we will take advantage of, while the realtime functionalities will be taken care of by Pusher.

What we will build

We will build an application that will receive coordinates from the server based on the initial coordinates we inject into it. When these coordinates are received, we update the map on our app.

Requirements

For this tutorial, we need the following:
– Android studio – version 3.0.1 or higher is recommended.
– Node JS and npm installed on your machine.
– A Pusher application.
– Google Maps API key.
– An Android device with Google Play Services installed.

Building our server

We will build our server using Node JS. The server will generate random coordinates for us. To start with, create a new folder. Inside it, create a new file named package.json and paste this:

javascript
1{
2        "main": "index.js",
3        "dependencies": {
4            "body-parser": "^1.16.0",
5            "express": "^4.14.1",
6            "pusher": "^1.5.1"
7        }
8    }
Copy

Next, create file called index.js in the root directory and paste this:

javascript
1// Load the required libraries
2    let Pusher = require('pusher');
3    let express = require('express');
4    let bodyParser = require('body-parser');
5
6    // initialize express and pusher
7    let app = express();
8    let pusher = new Pusher(require('./config.js'));
9
10    // Middlewares
11    app.use(bodyParser.json());
12    app.use(bodyParser.urlencoded({ extended: false }));
13
14    // Generates 20 simulated GPS coords and sends to Pusher
15    app.post('/simulate', (req, res, next) => {
16      let loopCount = 0
17      let operator  = 0.001000  
18      let longitude = parseFloat(req.body.longitude)
19      let latitude  = parseFloat(req.body.latitude)
20
21      let sendToPusher = setInterval(() => {
22        loopCount++;
23
24        // Calculate new coordinates and round to 6 decimal places...
25        longitude = parseFloat((longitude + operator).toFixed(7))
26        latitude  = parseFloat((latitude - operator).toFixed(7))
27
28        // Send to pusher
29        pusher.trigger('my-channel', 'new-values', {longitude, latitude})
30
31        if (loopCount === 20) {
32          clearInterval(sendToPusher)
33        }
34      }, 2000);
35
36      res.json({success: 200})
37    })
38
39    // Index
40    app.get('/', (req, res) => res.json("It works!"));
41
42    // Serve app
43    app.listen(4000, _ => console.log('App listening on port 4000!'));
Copy

The code above is an Express application. In the /simulate route, we are simulating longitude and latitude values and then sending them to Pusher. These will then be picked by our application.

? The longitude and latitude values will typically be obtained from the device being tracked in a real-life scenario.

Finally, we will create the configuration file, named config.js. Paste this snippet there:

javascript
1module.exports = {
2        appId: 'PUSHER_APP_ID',
3        key: 'PUSHER_APP_KEY',
4        secret: 'PUSHER_APP_SECRET',
5        cluster: 'PUSHER_APP_CLUSTER',
6    };
Copy

Replace the values there with the keys from your Pusher dashboard. Then install the modules needed by our server by running this command in the root directory:

bash
1$ npm install
Copy

Our server should be up and running on port 4000.

Building our realtime map in Android Studio

Create a new Android project
Open Android studio and create a new project. Enter your application details, include Kotlin support, choose a minimum SDK (this should not be less than API 14), choose an Empty Activity, and finish the process. Here is a quick GIF of the process:

Adding app dependencies
This demo has several dependencies. We need the Pusher dependency for realtime functionality, the Google Maps API for easy integration of maps into our app, and Retrofit to access our server with ease.

Open your app-module build.gradle file and paste the following dependencies:

kotlin
1// Pusher dependency
2    implementation 'com.pusher:pusher-java-client:1.5.0'
3
4    // Google maps API
5    implementation 'com.google.android.gms:play-services-maps:11.8.0'
6
7    // Retrofit dependencies
8    implementation 'com.squareup.retrofit2:retrofit:2.3.0'
9    implementation 'com.squareup.retrofit2:converter-scalars:2.3.0'
Copy

Sync your Gradle files so that the libraries can be downloaded and made available.

Building our layout

Open the activity_main.xml and paste this:

kotlin
1<?xml version="1.0" encoding="utf-8"?>
2    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3        xmlns:tools="http://schemas.android.com/tools"
4        android:layout_width="match_parent"
5        android:layout_height="match_parent"
6        android:orientation="vertical">
7        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
8            xmlns:tools="http://schemas.android.com/tools"
9            android:layout_marginTop="50dp"
10            android:id="@+id/map"
11            android:name="com.google.android.gms.maps.SupportMapFragment"
12            android:layout_width="match_parent"
13            android:layout_height="match_parent"
14            tools:context="com.example.mapwithmarker.MapsMarkerActivity" />
15        <Button
16            android:id="@+id/simulateButton"
17            android:layout_width="match_parent"
18            android:layout_height="wrap_content"
19            android:text="Simulate" />
20
21    </FrameLayout>
Copy

In the snippet above, we have a fragment which will hold our map and a button.

Setting up Google Maps API key

It is expected that at this point, you have obtained your API key. You can follow the steps here to get it. We now want to configure the application with our key. Open your strings.xml file and paste it in. This is located at name-of-project/app/src/main/res/values:

kotlin
1<resources>
2        <!-- ... -->
3        <string name="google_maps_key">GOOGLE_MAPS_KEY</string>
4    </resources>
Copy

⚠️ Replace the GOOGLE_MAPS_KEY placeholder with the actual key from Google.

This file contains all strings used during the development of the application. All raw strings within the app are kept here. It is required when there is a need to translate your app into multiple languages.

Next, open the AndroidManifest.xml file and paste these under the <application> tag:

bash
1<meta-data
2        android:name="com.google.android.gms.version"
3        android:value="@integer/google_play_services_version" />
4    <meta-data
5        android:name="com.google.android.geo.API_KEY"
6        android:value="@string/google_maps_key" />
Copy

With this, our app knows how and where to fetch our key.

Setting up Retrofit

We already have Retrofit available as a dependency, but we need two more things – an interface to show endpoints/routes to be accessed and our retrofit object. First create a new Kotlin file name ApiInterface.kt and paste this:

kotlin
1import okhttp3.RequestBody
2    import retrofit2.Call
3    import retrofit2.http.Body
4    import retrofit2.http.POST
5
6    interface ApiInterface {
7        @POST("/simulate")
8        fun sendCoordinates(@Body coordinates: RequestBody): Call<String>
9    }
Copy

Since we will make just one request in this demo, we will limit the scope of our Retrofit object to the MainActivity.kt class. This means we will create a function within a class for it. Paste this function into the class:

kotlin
1fun getRetrofitObject(): ApiInterface {
2        val httpClient = OkHttpClient.Builder()
3        val builder = Retrofit.Builder()
4                .baseUrl("http://10.0.3.2:4000/")
5                .addConverterFactory(ScalarsConverterFactory.create())
6
7        val retrofit = builder
8                .client(httpClient.build())
9                .build()
10        return retrofit.create(ApiInterface::class.java)
11    }
Copy

I used a Genymotion emulator and the recognized localhost address for it is 10.0.3.2.

Add the internet permission to the AndroidManifest.xml file:

bash
1<uses-permission android:name="android.permission.INTERNET"/>
Copy

Configuring our map and getting realtime updates

For us to initialize and use the map, our the MainActivity.kt class must implement the OnMapReadyCallback interface and override the onMapReady method. We also need to setup Pusher to listen to events and receive the simulated coordinates in realtime. Open your MainActivity.kt and paste this:

kotlin
1import android.support.v7.app.AppCompatActivity
2    import android.os.Bundle
3    import android.util.Log
4    import com.google.android.gms.maps.*
5    import com.google.android.gms.maps.model.MarkerOptions
6    import com.google.android.gms.maps.model.LatLng
7    import com.pusher.client.Pusher
8    import com.pusher.client.PusherOptions
9    import kotlinx.android.synthetic.main.activity_main.*
10    import okhttp3.MediaType
11    import okhttp3.OkHttpClient
12    import org.json.JSONObject
13    import retrofit2.Call
14    import retrofit2.Callback
15    import retrofit2.Response
16    import retrofit2.Retrofit
17    import retrofit2.converter.scalars.ScalarsConverterFactory
18    import okhttp3.RequestBody
19    import com.google.android.gms.maps.model.CameraPosition
20    import com.google.android.gms.maps.model.Marker
21
22    class MainActivity : AppCompatActivity(), OnMapReadyCallback {
23        private lateinit var markerOptions:MarkerOptions
24        private lateinit var marker:Marker
25        private lateinit var cameraPosition:CameraPosition
26        var defaultLongitude = -122.088426
27        var defaultLatitude  = 37.388064
28        lateinit var googleMap:GoogleMap
29        lateinit var pusher:Pusher
30
31        override fun onCreate(savedInstanceState: Bundle?) {
32            super.onCreate(savedInstanceState)
33            setContentView(R.layout.activity_main)
34            markerOptions = MarkerOptions()
35            val latLng = LatLng(defaultLatitude,defaultLongitude)
36            markerOptions.position(latLng)
37            cameraPosition = CameraPosition.Builder()
38                    .target(latLng)
39                    .zoom(17f).build()
40
41        }
42
43        override fun onMapReady(googleMap: GoogleMap?) {
44            this.googleMap = googleMap!!
45            marker = googleMap.addMarker(markerOptions)
46            googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition))
47        }
48    }
Copy

We first created some class variables to hold our initial coordinates and other map utilities like the camera position and the marker position. We initialized them in the onCreate function. Next, we added a click listener to the simulate button.

The next thing to do is still in the MainActivity.kt class. In the onCreate method, paste this:

kotlin
1simulateButton.setOnClickListener {
2        callServerToSimulate()
3    }
Copy

When the button is clicked, it calls the callServerToSimulate function. Create a function callServerToSimulate within the class like this:

kotlin
1private fun callServerToSimulate() {
2        val jsonObject = JSONObject()
3        jsonObject.put("latitude",defaultLatitude)
4        jsonObject.put("longitude",defaultLongitude)
5
6        val body = RequestBody.create(
7            MediaType.parse("application/json"), 
8            jsonObject.toString()
9        )
10
11        getRetrofitObject().sendCoordinates(body).enqueue(object:Callback<String>{
12            override fun onResponse(call: Call<String>?, response: Response<String>?) {
13                Log.d("TAG",response!!.body().toString())
14            }
15
16            override fun onFailure(call: Call<String>?, t: Throwable?) {
17                Log.d("TAG",t!!.message)
18            }
19        })
20    }
Copy

In this function, we sent our initial coordinates to our server. The server then generates twenty coordinates similar to the initial ones sent and uses Pusher to send them to channel my-channel, firing the new-values event.

Next, we create and initialize a SupportMapFragment object with the view ID of the map:

kotlin
1val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as SupportMapFragment
2    mapFragment.getMapAsync(this)
3    setupPusher()
Copy

Next add the the setupPusher function to the class and it should looks like this:

kotlin
1private fun setupPusher() {
2        val options = PusherOptions()
3        options.setCluster(PUSHER_CLUSTER)
4        pusher = Pusher(PUSHER_API_KEY, options)
5
6        val channel = pusher.subscribe("my-channel")
7
8        channel.bind("new-values") { channelName, eventName, data ->
9            val jsonObject = JSONObject(data)
10            val lat:Double = jsonObject.getString("latitude").toDouble()
11            val lon:Double = jsonObject.getString("longitude").toDouble()
12
13            runOnUiThread {
14                val newLatLng = LatLng(lat, lon)
15                marker.position = newLatLng
16                cameraPosition = CameraPosition.Builder()
17                        .target(newLatLng)
18                        .zoom(17f).build()
19                googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition))
20            }
21        }
22    }
Copy

We initialized Pusher here and listened for coordinate updates. When we receive any update, we update our marker and move the camera view towards the new point. You are expected to replace the Pusher parameters with the keys and details found on your Pusher dashboard.

We then call the disconnect and connect functions in the onPause and onResume functions respectively in the class. These functions are inherited from the parent class AppCompatActivity:

kotlin
1override fun onResume() {
2        super.onResume()
3        pusher.connect()
4    }
5
6    override fun onPause() {
7        super.onPause()
8        pusher.disconnect()
9    }
Copy

Conclusion

We have been able to leverage the power of Pusher, Kotlin and Google Maps API to create a realtime location tracking app. Hopefully you have picked up a thing or two from the tutorial and can use the knowledge to build beautiful realtime apps using Pusher and Kotlin.

If you have any questions or feedback, leave a comment below. The source code is available on GitHub.