A basic understanding of Kotlin and Node.js is needed to follow this tutorial. Just as the name implies, the aim of this article is to show the realtime movement of a marker on a map. 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: — version 3.0.1 or higher is recommended. Android studio and npm installed on your machine. Node JS A application. Pusher . 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 and paste this: package.json {"main": "index.js","dependencies": {"body-parser": "^1.16.0","express": "^4.14.1","pusher": "^1.5.1"}} Next, create file called in the root directory and paste this: index.js // Load the required librarieslet Pusher = require('pusher');let express = require('express');let bodyParser = require('body-parser'); // initialize express and pusherlet app = express();let pusher = new Pusher(require('./config.js')); // Middlewaresapp.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false })); // Generates 20 simulated GPS coords and sends to Pusherapp.post('/simulate', (req, res, next) => {let loopCount = 0let operator = 0.001000let longitude = parseFloat(req.body.longitude)let latitude = parseFloat(req.body.latitude) let sendToPusher = setInterval(() => { loopCount++; // Calculate new coordinates and round to 6 decimal places... longitude = parseFloat((longitude + operator).toFixed(7)) latitude = parseFloat((latitude - operator).toFixed(7)) // Send to pusher pusher.trigger('my-channel', 'new-values', {longitude, latitude}) if (loopCount === 20) { clearInterval(sendToPusher) } }, 2000); res.json({success: 200}) }) // Indexapp.get('/', (req, res) => res.json("It works!")); // Serve appapp.listen(4000, _ => console.log('App listening on port 4000!')); The code above is an Express application. In the route, we are simulating longitude and latitude values and then sending them to Pusher. These will then be picked by our application. /simulate 💡 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 . Paste this snippet there: config.js module.exports = {appId: 'PUSHER_APP_ID',key: 'PUSHER_APP_KEY',secret: 'PUSHER_APP_SECRET',cluster: 'PUSHER_APP_CLUSTER',}; 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: $ npm install 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 file and paste the following dependencies: build.gradle // Pusher dependencyimplementation 'com.pusher:pusher-java-client:1.5.0' // Google maps APIimplementation 'com.google.android.gms:play-services-maps:11.8.0' // Retrofit dependenciesimplementation 'com.squareup.retrofit2:retrofit:2.3.0'implementation 'com.squareup.retrofit2:converter-scalars:2.3.0' Sync your Gradle files so that the libraries can be downloaded and made available. Building our layout Open the and paste this: activity_main.xml <?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android=" "xmlns:tools=" "android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><fragment xmlns:android=" "xmlns:tools=" "android:layout_marginTop="50dp"android:id="@+id/map"android:name="com.google.android.gms.maps.SupportMapFragment"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.mapwithmarker.MapsMarkerActivity" /><Buttonandroid:id="@+id/simulateButton"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Simulate" /></FrameLayout> http://schemas.android.com/apk/res/android http://schemas.android.com/tools http://schemas.android.com/apk/res/android http://schemas.android.com/tools 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 to get it. We now want to configure the application with our key. Open your file and paste it in. This is located at : here strings.xml name-of-project/app/src/main/res/values <resources><!-- ... --><string name="google_maps_key">GOOGLE_MAPS_KEY</string></resources> ⚠️ 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 file and paste these under the tag: AndroidManifest.xml <application> <meta-dataandroid:name="com.google.android.gms.version"android:value=" ion" /><meta-dataandroid:name="com.google.android.geo.API_KEY"android:value=" " /> @integer/google_play_services_vers @string/google_maps_key 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 and paste this: ApiInterface.kt import okhttp3.RequestBodyimport retrofit2.Callimport retrofit2.http.Bodyimport retrofit2.http.POSTinterface ApiInterface { ("/simulate")fun sendCoordinates( coordinates: RequestBody): Call<String>} @POST @Body Since we will make just one request in this demo, we will limit the scope of our Retrofit object to the class. This means we will create a function within a class for it. Paste this function into the class: MainActivity.kt fun getRetrofitObject(): ApiInterface {val httpClient = OkHttpClient.Builder()val builder = Retrofit.Builder().baseUrl(" ").addConverterFactory(ScalarsConverterFactory.create())val retrofit = builder.client(httpClient.build()).build()return retrofit.create(ApiInterface::class.java)} http://10.0.3.2:4000/ I used a Genymotion emulator and the recognized localhost address for it is . 10.0.3.2 Add the internet permission to the file: AndroidManifest.xml <uses-permission android:name="android.permission.INTERNET"/> Configuring our map and getting realtime updates For us to initialize and use the map, our the class must implement the interface and override the method. We also need to setup Pusher to listen to events and receive the simulated coordinates in realtime. Open your and paste this: MainActivity.kt OnMapReadyCallback onMapReady MainActivity.kt import android.support.v7.app.AppCompatActivityimport android.os.Bundleimport android.util.Logimport com.google.android.gms.maps.*import com.google.android.gms.maps.model.MarkerOptionsimport com.google.android.gms.maps.model.LatLngimport com.pusher.client.Pusherimport com.pusher.client.PusherOptionsimport kotlinx.android.synthetic.main.activity_main.*import okhttp3.MediaTypeimport okhttp3.OkHttpClientimport org.json.JSONObjectimport retrofit2.Callimport retrofit2.Callbackimport retrofit2.Responseimport retrofit2.Retrofitimport retrofit2.converter.scalars.ScalarsConverterFactoryimport okhttp3.RequestBodyimport com.google.android.gms.maps.model.CameraPositionimport com.google.android.gms.maps.model.Marker class MainActivity : AppCompatActivity(), OnMapReadyCallback { private lateinit var markerOptions:MarkerOptions private lateinit var marker:Marker private lateinit var cameraPosition:CameraPosition var defaultLongitude = -122.088426 var defaultLatitude = 37.388064 lateinit var googleMap:GoogleMap lateinit var pusher:Pusher override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity\_main) markerOptions = MarkerOptions() val latLng = LatLng(defaultLatitude,defaultLongitude) markerOptions.position(latLng) cameraPosition = CameraPosition.Builder() .target(latLng) .zoom(17f).build() } override fun onMapReady(googleMap: GoogleMap?) { this.googleMap = googleMap!! marker = googleMap.addMarker(markerOptions) googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition)) } } 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 function. Next, we added a click listener to the simulate button. onCreate The next thing to do is still in the class. In the method, paste this: MainActivity.kt onCreate simulateButton.setOnClickListener {callServerToSimulate()} When the button is clicked, it calls the function. Create a function within the class like this: callServerToSimulate callServerToSimulate private fun callServerToSimulate() {val jsonObject = JSONObject()jsonObject.put("latitude",defaultLatitude)jsonObject.put("longitude",defaultLongitude)val body = RequestBody.create(MediaType.parse("application/json"),jsonObject.toString())getRetrofitObject().sendCoordinates(body).enqueue(object:Callback<String>{override fun onResponse(call: Call<String>?, response: Response<String>?) {Log.d("TAG",response!!.body().toString())}override fun onFailure(call: Call<String>?, t: Throwable?) {Log.d("TAG",t!!.message)}})} 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 , firing the event. my-channel new-values Next, we create and initialize a object with the view ID of the map: SupportMapFragment val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as SupportMapFragmentmapFragment.getMapAsync(this)setupPusher() Next add the the function to the class and it should looks like this: setupPusher private fun setupPusher() {val options = PusherOptions()options.setCluster(PUSHER_CLUSTER)pusher = Pusher(PUSHER_API_KEY, options) val channel = pusher.subscribe("my-channel") channel.bind("new-values") { channelName, eventName, data -> val jsonObject = JSONObject(data) val lat:Double = jsonObject.getString("latitude").toDouble() val lon:Double = jsonObject.getString("longitude").toDouble() runOnUiThread { val newLatLng = LatLng(lat, lon) marker.position = newLatLng cameraPosition = CameraPosition.Builder() .target(newLatLng) .zoom(17f).build() googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition)) } } } 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 and functions respectively in the class. These functions are inherited from the parent class : onPause onResume AppCompatActivity override fun onResume() {super.onResume()pusher.connect()} override fun onPause() {super.onPause()pusher.disconnect()} 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. This post first appeared on the blog. Pusher
