Adding Huawei Maps to your app

In a previous post we went over the process of setting up two flavours of our app — the Google and Huawei variants.

In this article we'll cover how to add a map to an Android application.

1. Requirements

Similar to Google Maps, we need a project and to configure our development/release keystore fingerprints to allow the app to interact with Huawei's services.

1. Create an app in Huawei's AppGallery
2. Generate a signing certificate fingerprint
3. Add the fingerprint to Huawei's AppGallery
4. Enable MapKit
5. Download and add Huawei's agconnect-services.json file

For in-depth setup instruction, feel free to take a look at this Huawei codelab.

2. Differences between Google and Huawei Maps

I'll first start to say there aren't many differences between the two services.

They both require you to set up some form of a project, enable the service and include it in your app. Aside the obvious differences in which dependencies to include, and the package name the objects live under, the only noticeable difference is that Google Maps requires you to include the API key in your manifest while Huawei reads it from the agconnect-services.json file.

3. Setting up the map

If you haven't done so, add the agconnect-services.json file and include Huawei's Gradle plugin. This is explained in-depth in Huawei's codelab mentioned in the requirements section.

Then let's add MapKit's dependencies:

dependencies {
    implementation 'com.huawei.hms:maps:5.1.0.300' // check what's the latest version
}

And create a map fragment:

import com.huawei.hms.maps.HuaweiMap

class CustomMapFragment : SupportMapFragment(), OnMapReadyCallback {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Setup the map and notify the fragment when the map becomes available.
        getMapAsync(this)
    }

    override fun onMapReady(map: HuaweiMap) {
        // TODO: configure map controls

        configureMarkers(map)
        configureCamera(map)
    }

    companion object {
        private val AMSTERDAM = LatLng(52.3676, 4.9041)
        private val ROTTERDAM = LatLng(51.9244, 4.4777)
    }
}

Optionally, you can configure the Map's interaction settings, ranging from location to gesture controls. The API methods and properties are, in most cases, identical to the Google Maps API, therefore making the integration effort minimal.

4. Adding markers

Once more, the Huawei MapKit API resembles the Google Maps API. We can define markers in a similar fashion, setting up the visual appearance and information we deem necessary:

private fun configureMarkers(map: HuaweiMap) {
    map.addMarker(
        MarkerOptions()
            .position(AMSTERDAM)
            .title(getString(R.string.amsterdam_title))
            .snippet(getString(R.string.amsterdam_snippet))
    )

    map.addMarker(
        MarkerOptions()
            .position(ROTTERDAM)
            .title(getString(R.string.rotterdam_title))
            .snippet(getString(R.string.rotterdam_snippet))
    )
}

5. Interacting with the camera

Lastly, we can leverage the Map's camera utilities just like we're used to in order to update the camera's angle, position, etc.

private fun configureCamera(map: HuaweiMap) {
    val bounds = LatLngBounds.Builder()
        .include(AMSTERDAM)
        .include(ROTTERDAM)
        .build()

    map.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50))
}

Final thoughts

In a scenario where we need to support both variants, while Android's flavours take of the decision on which map fragment to use, there's the question of the business logic. The best approach would be to set up an Activity/ViewModel with all the business logic and create a generic communication channel between the activity and the fragment to populate and interact with it in a unified way.

As always, we hope you liked this article and if you have anything to add, we are available via our Support Channel.