Integrating Huawei Map kit using Flutter
This article shows you to add a Huawei map to your application. We will learn how to implement Markers, Calculate distance, Show Path.
Map Kit Services
Huawei Map Kit provides easily to integrate map based functions into your apps, map kit currently supports more than 200 countries and 40+ languages. It supports UI elements such as markers, shapes, layers etc..! The plugin automatically handles access to adding markers and response to user gestures such as markers drag, clicks and allow user to interact with the map.
Currently HMS Map Kit supports below capabilities.
1. Map Display
2. Map Interaction
3. Map Drawing
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.
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" />
<application>
</manifest>
App level gradle dependencies.
implementation 'com.huawei.agconnect:agconnect-core:1.4.1.300'
implementation 'com.huawei.hms:maps:5.0.3.302'
3. Add HMS Map kit plugin download using below URL.
4. The first step is to add HMS Map flutter plugin as a dependency in the pubspec.yaml file.
5. Once we added plugins you need to run flutter packages get pub get.
6. Open main.dart file to create UI and business logics.
Create MAP Widget
onMapCreated: method that is called on map creation and takes a HuaweiMapController as a parameter.
initialCameraPosition: required parameter that sets the starting camera position.
mapController: manages camera function (position, animation, zoom).
Marker single location on the map, Huawei maps provides markers. These markers use a standard icon we can also customize icon.
Circle are great when you need to make mark on the map from certain radius, such as bounded area.
void _createCircle() {
_circles.add(Circle(
circleId: CircleId('Circle'),
center: latLng,
radius: 5000,
fillColor: Colors.redAccent.withOpacity(0.5),
strokeColor: Colors.redAccent,
strokeWidth: 3,
));
}
Polygon defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region.
void _showPolygone() {
if (_polygon.length > 0) {
setState(() {
_polygon.clear();
});
} else {
_polygon.add(Polygon(
polygonId: PolygonId('Path'),
points: polyList,
strokeWidth: 5,
fillColor: Colors.yellow.withOpacity(0.15),
strokeColor: Colors.red));
}
}
Final Code
Result
Tips & Tricks
1. Check whether HMS Core (APK) is Latest version or not.
2. Check whether Map API enabled or not in AppGallery Connect.
3. We can develop different Application using Huawei Map Kit.
Conclusion
This article helps you to implement great features into Huawei maps. You learned how to add customizing markers, changing map styles, drawing on the map, building layers, street view, nearby places and a variety of other interesting functionality to make your map based applications awesome.
Reference
Map kit Document
Refer the URL
