DEV Community

Cover image for Integration of Huawei Map kit in Navigation Glove IoT application Using Kotlin - Part 2
HMS Community
HMS Community

Posted on

Integration of Huawei Map kit in Navigation Glove IoT application Using Kotlin - Part 2

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

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.

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
Enter fullscreen mode Exit fullscreen mode

Map Kit allows to enable location button on the map

hMap!!.uiSettings.isMyLocationButtonEnabled = true
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 account in AppGallery Connect.

  2. Create an app by referring to Creating a Project and Creating an App in the Project.

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

  4. Enabling Map Kit Service on AppGallery Connect.
    Image description

  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/' }

Enter fullscreen mode Exit fullscreen mode
  1. Add the classpath inside the dependency section of the project level build.gradle file.
classpath 'com.huawei.agconnect:agcp:1.5.2.300'
Enter fullscreen mode Exit fullscreen mode
  1. Add the plugin in the app-level build.gradle file.
apply plugin: 'com.huawei.agconnect'
Enter fullscreen mode Exit fullscreen mode
  1. Add the below library in the app-level build.gradle file dependencies section.
implementation 'com.huawei.hms:maps:5.2.0.301'
Enter fullscreen mode Exit fullscreen mode
  1. 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"/>
Enter fullscreen mode Exit fullscreen mode
  1. 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
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Result

Image description

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

Map Kit - Code lab

Map Kit - Training Video

Top comments (0)