Huawei Maps Kit (React Native)

HMS MAP Kit plays vital role in digital cartography.

HMS MAP Kit provides

· 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, overlays, and various shapes.

There was a time when world geographical maps could only be seen in the pages of ATLAS.

Accessing world maps has become convenient with the technology advancement of digital cartography.

HMS MAP Kit plays vital role in digital cartography.

HMS MAP Kit provides

· 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, overlays, and various shapes.

To implement the HMS Map in react native application, following actions are required:

Set up Needed

· Must have a Huawei Developer Account

· Must have a Huawei phone with HMS 4.0.0.300 or later

· React Native environment with Android Studio, Node Js and

Visual Studio code.

Major Dependencies

· React Native CLI : 2.0.1

· React Native Version: 0.62.2

· Gradle Version: 6.0.1

· Gradle Plugin Version: 3.5.2

· React Native MAP Kit SDK: 4.0.2.300

· React-native-hms-location gradle dependency

· AGCP gradle dependency

Preparation

In order to develop the HMS react native apps following steps are mandatory.

· First, we need to create an app or project in the Huawei app gallery connect.

· Provide the SHA Key and App Package name of the project in App Information Section.

· Download the agconnect-services.json from App Information Section.

· Create a react native project.

· Open the project in Android Studio and copy-paste the agconnect-services.json file into the “android” directory’s “app” folder.

· Download the React Native MAP Kit SDK

Auto Linking Integration with HMS MAP SDK

Auto linking makes it simple to integrate the HMS MAP sdk with the react native.

Note: Auto liking is only applicable for react native version higher than 0.60.

· Paste MAP SDK > “react-native-hms-map” in the root directory of react native project as shown below:

· Configure android level build.gradle

1) Add to buildscript/repositores

maven {url ‘http://developer.huawei.com/repo/'}

2) Add to buildscript/dependencies

classpath ‘com.huawei.agconnect:agcp:1.2.1.301’

3) Add to allprojects/repositories

maven {url ‘http://developer.huawei.com/repo/'}

· Configure app level build.gradle

1) Add to beginning of file

apply plugin: “com.huawei.agconnect

2) Add to dependencies

implementation project(‘:react-native-hms-map’)

· Linking the HMS MAP Sdk

1) Run below command in the project directory

react-native link react-native-hms-map

Note: No changed required in MainApplication.java due to autolinking.

Adding permissions

Add below permissions to Android.manifest file.

Sync Gradle and build the project.

Development Process

Follow below in order to display the Map on to the application:

1) Open your React Native project into Visual Studio Code and open the App.js file.

2) Make below changes in the App.JS file

3) Run the Project and create the apk.

This apk file can be uploaded for cloud debugging or can be deployed on the Huawei device.

Results

Please stay tuned for future updates

In next article, I will add further updates to MAP like displaying custom markers and selecting fence.

Conclusion

Its very easy to integrate Map kit.