Huawei Map Kit Integration

Nowadays, there are many apps in market that use map and map based solutions. At this point, Huawei provide Map Kit as a solution for developers.

Huawei Map Kit is a SDK for map development. It covers map data of more than 200 countries and regions, and supports dozens of languages. With this SDK, we can easily integrate map-based functions into your apps.

Map Kit uses the WGS 84 GPS coordinate system, which meets most map development requirements outside China, including:

• Map display: Displays buildings, roads, water systems, and Points of Interest (POIs).
• Map interaction: Controls the interaction gestures and buttons on the map.
• Map drawing: Adds location markers, map layers, overlays, and various shapes.

Firstly, we have to get a Huawei Developer Account and create a project from Huawei App Gallery Console but since this article is about to Map Kit, we will not cover these topics.

You can refer developer account documentation for creating account, and follow this codelab for creating a project at App Gallery Console.

After enabling Map Kit from Manage API section at console, we need to add Map Kit dependency.

implementation "com.huawei.hms:maps:5.01.300"

After sync project, we are ready to code.

To call capabilities of Map Kit, we must apply for the following permissions for our app:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

To obtain the current device location, we need to add the following permissions in the AndroidManifest file. In Android 6.0 and later, we need to apply for these permissions dynamically.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Map kit supports two map containers. MapFragment and MapView

• MapFragment is a subclass of the Android Fragment class.
• MapView is a subclass of the Android View class.

In this project we will use MapView.

Show Map

Add MapView to Activity’s layout

<com.huawei.hms.maps.MapView
    android:id="@+id/map_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

Then initialize map and register lifecycle callbacks manually.

MapsInitializer.setApiKey("my_api_key")

This key is the Api Key in agconnect.json which we have already downloaded while creating project from Huawei App Gallery Console.

After initialization and run the project, we will see the map like below.

Add Marker

We can add markers to a map to identify locations such as stores and buildings, and provide additional information with information windows.

Create dummy coordinates and set these coordinates to MarkerOptions object and add them to map after onMapReady.

Figure 1 Clustering Markers — Figure 2 Zoom In — Figure 3 Marker Info View

We can also change the marker icon by adding

.icon(BitmapDescriptorFactory.fromResource(R.drawable.marker))

to MarkerOptions object and get click events by adding listener

hMap?.setOnMarkerClickListener { marker ->
    Log.d(TAG, "Clicked marker ${marker.title}")
    true 
}

Custom Info View

If we want, we can change the Marker info view. Before that we need to create a layout and adapter for it. Lets create layout file.

After that create a InfoViewAdapter. We will bind marker data to UI here.

Requirements are completed. Now we have to set this custom info view adapter to Huawei Map object

hMap?.setInfoWindowAdapter(CustomInfoViewAdapter(this))

We integrated Huawei Map Kit to project and cover some basic usages. For more detail information you can check official documentations and codelabs.

Map Kit

huaweicodelabs/MapKit