Integration of Huawei Map kit in Navigation Glove IoT application Using Kotlin - Part 2
Tags: android, kotlin, hms, huawei
Published: 2022-03-24 15:04:09

## Introduction

In this series of article, we will learn about **Navigation Glove application** and also we will learn about integration of the **Huawei Map kit** in Navigation Glove IoT application.

If you are new to this series of article follow my previous article [Beginner: Integration of Huawei Account kit in Navigation Glove IoT application Using Kotlin - Part 1](https://forums.developer.huawei.com/forumPortal/en/topic/0202805462085750190)

Using **Huawei Maps Kit** for Android, You can also use API calls to add **markers**, **polygons**, and **overlays** to a basic map, and to change the user's view of a particular map area. These objects provide additional information for map locations, and allows user to interact with the map. You can also customize the **map style**. If you want to understand about service price follow this [link](https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/about-charging-0000001051637068).

In Huawei map you create the map using xml or using instance as well. Adding map type is very easy. Currently it supports 5 types as follows.

1. MAP_TYPE_NORMAL
2. MAP_TYPE_HYBRID
3. MAP_TYPE_NONE
4. MAP_TYPE_SATELLITE
5. MAP_TYPE_TERRAIN

```
hMap!!.mapType = HuaweiMap.MAP_TYPE_NORMAL
```
Map Kit allows to enable location button on the map

```
hMap!!.uiSettings.isMyLocationButtonEnabled = true
```
You can set the following map attributes check the below code

```

// Declare a SupportMapFragment object.
val mSupportMapFragment: SupportMapFragment
// Set initial camera attributes.
val cameraPosition = CameraPosition.builder().target(LatLng(12.893478, 77.334595)).zoom(10f).bearing(45f).tilt(20f).build()
// Construct the target area of the camera.
val southwest = LatLng(12.893478, 77.334595)
val northeast = LatLng(12.893478, 77.334595)
val latLngBounds = LatLngBounds(southwest, northeast)
val options = HuaweiMapOptions()
// Set the map type. The options are none, normal, and terrain.
options.mapType(HuaweiMap.MAP_TYPE_NORMAL)
// Set camera attributes.
.camera(cameraPosition)
// Set whether to enable the zoom function. It is enabled by default.
.zoomControlsEnabled(false)
// Set whether to enable the compass. It is enabled by default.
.compassEnabled(true)
// Set whether to enable zoom gestures. They are enabled by default.
.zoomGesturesEnabled(true)
// Set whether to enable scroll gestures. They are enabled by default.
.scrollGesturesEnabled(true)
// Set whether to enable rotation gestures. They are enabled by default.
.rotateGesturesEnabled(false)
// Set whether to enable tilt gestures. They are enabled by default.
.tiltGesturesEnabled(true)
// Set whether to place the map view on the top of the map window. The default value is true.
.zOrderOnTop(true)
// Set whether to bind the map lifecycle to SupportMapFragment or the view of SupportMapFragment. The default value is true.
.useViewLifecycleInFragment(true)
// Set whether to enable the lite mode for the map. It is disabled by default.
.liteMode(false)
// Set the preferred minimum zoom level.
.minZoomPreference(3f)
// Set the preferred maximum zoom level.
.maxZoomPreference(13f)
// Set an area to constrain the camera target so that the camera target does not move outside the bounds when a user scrolls the map camera.
.latLngBoundsForCameraTarget(latLngBounds)
mSupportMapFragment = SupportMapFragment.newInstance(options)
```
Using Rest services also, you can use the followings

Direction API
Matrix API
Map Static API
Tile API
Elevation API
Snap to Road API

## Prerequisite

AppGallery Account
Android Studio 3.X
SDK Platform 19 or later
Gradle 4.6 or later
HMS Core (APK) 4.0.0.300 or later
Huawei Phone EMUI 3.0 or later
Non-Huawei Phone Android 4.4 or later
**Service integration on AppGallery.**
1. We need to [register as a developer](https://developer.huawei.com/consumer/en/doc/10104) account in AppGallery Connect.

2. Create an app by referring to [Creating a Project](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-get-started#createproject) and [Creating an App in the Project](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-get-started#createapp).

3. Set the data storage location based on the current location.

4. Enabling Map Kit Service on AppGallery Connect.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxqtljhdrpiamlt2oq2b.png)
 
5. Generating a Signing Certificate Fingerprint.

6. Configuring the Signing Certificate Fingerprint.

7. Get your agconnect-services.json file to the app root directory.

**Client development**

1. Create android project in android studio IDE.

2. Add the maven URL inside the repositories of buildscript and allprojects respectively (project level build.gradle file).


```
maven { url 'https://developer.huawei.com/repo/' }

```
3. Add the classpath inside the dependency section of the project level build.gradle file.


```
classpath 'com.huawei.agconnect:agcp:1.5.2.300'
```
4. Add the plugin in the app-level **build.gradle** file.


```
apply plugin: 'com.huawei.agconnect'
```
5. Add the below library in the app-level **build.gradle** file dependencies section.


```
implementation 'com.huawei.hms:maps:5.2.0.301'
```

6. Add all the below permission in the **AndroidManifest.xml**.


```
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!-- Allow the app to obtain the coarse longitude and latitude of a user through the Wi-Fi network or base station. -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<!-- Allow the app to receive location information from satellites through the GPS chip. -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
```

7. Sync the project.

**HomeScreenActivity.kt**


```
package com.huawei.navigationglove.ui

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.huawei.hms.maps.*

import com.huawei.navigationglove.R
import com.huawei.navigationglove.api.ApiClient
import com.huawei.navigationglove.api.ApiService
import io.reactivex.observers.DisposableSingleObserver

import io.reactivex.android.schedulers.AndroidSchedulers

import io.reactivex.schedulers.Schedulers

class HomeScreenActivity : AppCompatActivity(), OnMapReadyCallback {
    private val TAG = HomeScreenActivity::class.java.name
    var hMap: HuaweiMap? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home_screen)
        val options = HuaweiMapOptions()
        // Set the map type. The options are none, normal, and terrain.
        options.mapType(HuaweiMap.MAP_TYPE_NORMAL)
            // Set camera attributes.
            //.camera(cameraPosition)
            // Set whether to enable the zoom function. It is enabled by default.
            .zoomControlsEnabled(true)
            // Set whether to enable the compass. It is enabled by default.
            .compassEnabled(true)
            // Set whether to enable zoom gestures. They are enabled by default.
            .zoomGesturesEnabled(true)
            // Set whether to enable scroll gestures. They are enabled by default.
            .scrollGesturesEnabled(true)
            // Set whether to enable rotation gestures. They are enabled by default.
            .rotateGesturesEnabled(false)
            // Set whether to enable tilt gestures. They are enabled by default.
            .tiltGesturesEnabled(true)
            // Set whether to place the map view on the top of the map window. The default value is true.
            .zOrderOnTop(true)
            // Set whether to bind the map lifecycle to SupportMapFragment or the view of SupportMapFragment. The default value is true.
            .useViewLifecycleInFragment(true)
            // Set whether to enable the lite mode for the map. It is disabled by default.
            .liteMode(false)
            // Set the preferred minimum zoom level.
            .minZoomPreference(3f)
            // Set the preferred maximum zoom level.
            .maxZoomPreference(13f)
        // Set an area to constrain the camera target so that the camera target does not move outside the bounds when a user scrolls the map camera.
        //.latLngBoundsForCameraTarget(latLngBounds)

        MapFragment.newInstance(options)

        val mSupportMapFragment: SupportMapFragment? = supportFragmentManager.findFragmentById(R.id.mapfragment_mapfragmentdemo) as SupportMapFragment?
        mSupportMapFragment!!.getMapAsync(this)

    }

    override fun onMapReady(huaweiMap: HuaweiMap) {
        Log.d(TAG, "onMapReady: ")
        hMap = huaweiMap
        hMap!!.mapType = HuaweiMap.MAP_TYPE_NORMAL
        hMap!!.uiSettings.isMyLocationButtonEnabled = true
    }
}
```

**activity_home_screen.xml**

```

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.HomeScreenActivity">
    <fragment
        android:id="@+id/mapfragment_mapfragmentdemo"
        class="com.huawei.hms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        map:cameraTargetLat="12.9716"
        map:cameraTargetLng="77.5946"
        map:cameraZoom="10"/>

</RelativeLayout>
```

## Result

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cv1g3luqt2ntowlkowb.gif)

## Tips and Tricks

1. Make sure you are already registered as a Huawei developer.

2. Set min SDK version to 21 or later, otherwise you will get **AndriodManifest** to merge issue.

3. Make sure you have added the **agconnect-services.json** file to the app folder.

4. Make sure you have added the SHA-256 fingerprint without fail.

5. Make sure all the dependencies are added properly.

6. If you want to location feature in the Map, Make sure you added location permission in **AndroidManifest.xml** file

7. If you install app in android version 6 or greater than make sure you handled run time permission.

## Conclusion

In this article, we have learnt the integration of the **Huawei Map** Kit in Navigation Glove application using Android Studio and Kotlin. And also we have learnt the features available by the map kit. We looked what possible APIs are provided by the Huawei for Rest services.

## Reference

Map Kit - [Official document](https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/android-sdk-introduction-0000001061991291)

Map Kit - [Code lab](https://developer.huawei.com/consumer/en/codelabsPortal/carddetails/TaxiBookingApp)

Map Kit - [Training Video](https://developer.huawei.com/consumer/en/training/course/video/201575277450653242)