Introduction
This article is based on Multiple HMS services application. I have created Hotel Booking application using HMS Kits. Showing location on maps is always a needed feature in most of the web and mobile applications. Map service will be required in ERP, CRM, etc. Directory listing applications mainly depends on the Map service.
In this article, I am going to implement HMS Map Kit. This article shows a steps to add a Huawei Map widget to your Flutter application.
Flutter setup
Refer this URL to setup Flutter.
Software Requirements
1. Android Studio 3.X
2. JDK 1.8 and later
3. SDK Platform 19 and later
4. Gradle 4.6 and later
Steps to integrate service
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 current location.
4. Enabling Required Services: Map Kit.
5. Generating a Signing Certificate Fingerprint.
6. Configuring the Signing Certificate Fingerprint.
7. Get your agconnect-services.json file to the app root directory.
Important: While adding app, the package name you enter should be the same as your Flutter project’s package name.
Note: Before you download agconnect-services.json file, make sure the required kits are enabled.
Development Process
Create Application in Android Studio.
1. Create Flutter project.
2. App level gradle dependencies. Choose inside project Android > app > build.gradle.
apply plugin: ‘com.android.application’
apply plugin: ‘com.huawei.agconnect’
Root level gradle dependencies
maven {url ‘https://developer.huawei.com/repo/'}
classpath ‘com.huawei.agconnect:agcp:1.4.1.300’
Add the below permissions in Android Manifest file.
<manifest xlmns:android…>
…
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.ACCESS_BACKGROUND_LOCATION” />
<uses-permission android:name=”android.permission.ACTIVITY_RECOGNITION” />
<uses-permission android:name=”com.huawei.hms.permission.ACTIVITY_RECOGNITION” />
<application …
</manifest>
3. Refer below URL for cross-platform plugins. Download required plugins.
4. After completing all the steps above, you need to add the required kits’ Flutter plugins as dependencies to pubspec.yaml file. You can find all the plugins in pub.dev with the latest versions.
huawei_map:
path: ../huawei_map/
5. After adding them, run flutter pub get command. Now all the plugins are ready to use.
6. Open main.dart file to create UI and business logics.
Map kit
Currently Huawei Map Kit has various SDKs and APIs. In this post we will cover JavaScript API specifically which is a solution for web applications and cross platforms.
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: Ads location markers, map layers, overlays, and various shapes.
Latitude denotes how far north or south you are (because no matter how far east or west you go you have not moved north or south at all).
Longitude denotes how far east or west you are (because no matter how far north or south you go, you haven’t moved east or west at all).
Important bits
onMapCreated: method that is called on map creation and takes a MapController as a parameter.
initialCameraPosition: required parameter that sets the starting camera position. Camera position describes which part of the world you want the map to point at.
mapController: manages camera function (position, animation, zoom). This pattern is similar to other controllers available in Flutter, for example TextEditingController.
What can you do with a Huawei Map?
So now you have Huawei Maps in your Hotel booking app, but you probably want to do something more interesting. What about putting Flutter widgets on top of the map, changing the map’s appearance, or adding place markers to the map? You can do it all!
Add a widget on top of the map
It’s important to remember that the HuaweiMap widget is just a Flutter widget, meaning you can treat it like any other widget. This includes placing another widget on top of it. By placing the HuaweiMap widget inside of a Stack widget, you can layer other Flutter widgets on top of the map widget:
Do you want to change Map type?
Right now, the added button doesn’t do anything interesting. Change that so that when pressed, the button toggles between two different.
Map types: normal view and none view.
Do you want to Show marker on Map?
To implement marker we have to do couple of things before adding marker, first create variable called markers, and set this property of the Huawei map widget.
Do you want to Show route between current Locations to Destination on Map?
The route planning function provides a set of HTTP-based APIs used to plan routes for walking, bicycling, and driving and calculate route distances. The APIs return route data in JSON format and provide the route planning capability. To implement Direction API create one Utils class and add Direction API.
Create DirectionRequest and DirectionResponse Object classes.
Final mapScreen.Dart code
Result
Tips & Tricks
1. Download latest HMS Flutter plugin.
2. Don’t forget to enable API service.
3. Latest HMS Core APK is required.
4. You need to add encoded API_KEY, if key contains special characters
Conclusion
We implemented simple hotel booking application using Map kit in this article. We have learned how to add markers. Custom marker, distance calculation and Directions.
Thank you for reading and if you have enjoyed this article, I would suggest you to implement this and provide your experience.
Reference
Map Kit URL