Create and Draw Huawei Map on XAMARIN! - Huawei Developers

Hi, as you know maps are used for different purposes in most apps. In this article, I would like to show you how to use Huawei map in Xamarin and make customizations on the map. First of all, we will follow what we need to do to add Hms Map kit to our project step by step.
Then we will focus on map customizations.
Of course, before that, we will talk about the problems you may encounter until you get to this step.
Integrating the HMS Map Kit Libraries to Xamarin Project
Let’s start. First of all, we need a Huawei developer account to use Huawei mobile services and configure our app with AppGallery Connect. Please follow the link for configuration.
How to configure app in AppGallery Connect
To use the HUAWEI Map Kit SDK for Xamarin, you need to create Xamarin Android bindings libraries from HMS Map Kit SDK for Android. After downloading the SDK files at the address below, we open a blank solution in visual studio and add these projects.
Map Kit SDK for Xamarin
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Then please update the aar files in the projects.
Now we will add this solution to the our project as a reference where we will go and integrate the map kit.
We added our solution to our reference. Now we will be able to use related HMS classes in our project.
Manifest & Permissions
We have to update the application’s manifest file by declaring permissions. *Before starting this, please make sure the package name is correct since the project has been added to AppGallery Connect. Make sure that the Sha256 key is entered correctly for the respective build type and agconnect-services.json file is added to your project.
Code:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
AndroidManifest.xml
Also, we need to add a meta-data element to embed your app id in the application tag between <application> tag. It is required for this app to authenticate on the Huawei’s cloud server. You can find this id in agconnect-services.json file. If you don’t do that app couldn’t render the map.
Code:
<meta-data android:name="com.huawei.hms.client.appid" android:value="appid=YOUR_APPID"/>
Creating a Map
Currently, the HMS Core Map SDK supports two map containers: MapFragment and MapView.
MapFragment is a subclass of the Android Fragment class. You can use it to place a map within a fragment. It can also function as a map container and provide an entry for accessing a HuaweiMap object. In this article we will use a Map Fragment.
First off all please add following lines to your XML file to which one you want to show map.
Code:
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="@+id/mapfragment_mapfragmentdemo"
class="com.huawei.hms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
map:cameraTargetLat="41.019879"
map:cameraTargetLng="29.007822"
map:cameraZoom="12"
/>
In our activity’s OnCreate method, set the layout file as the content view, load AGConnectService. Get a handle to the map fragment by calling FragmentManager.FindFragmentById. Then use GetMapAsync to register for the map callback.
Also, implement the IOnMapReadyCallback interface to our Activity and override OnMapReady method which is triggered when the map is ready to use.
Code:
class NewActivty : AppCompatActivity, IOnMapReadyCallback
{
private MapView mMapView;
private HuaweiMap hMap;
private MapFragment mapFragment;
string[] permissions = {
Android.Manifest.Permission.AccessCoarseLocation,
Android.Manifest.Permission.AccessFineLocation,
Android.Manifest.Permission.Internet };
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
SetContentView(Resource.Layout.activity_main);
mapFragment = FragmentManager.FindFragmentById<MapFragment>(Resource.Id.mapfragment_mapfragmentdemo);
mapFragment.GetMapAsync(this);
ActivityCompat.RequestPermissions(this, permissions, 100);
}
public void OnMapReady(HuaweiMap huaweiMap)
{
this.hMap = huaweiMap;
}
}
After adding the preceding information to the Manifest file, you need to dynamically apply for the permissions in the code (according to risky permission requirements in Android 6.0).
Show current location
To enable this function, set the MyLocationEnabled (true) of the HuaweiMap object
Code:
public void OnMapReady(HuaweiMap huaweiMap)
{
this.hMap = huaweiMap;
hMap.UiSettings.MyLocationButtonEnabled = true;
hMap.MyLocationEnabled = true;
}
Adding a Marker and Customization
I used more than one marker in my own project and I marked them on the map by customizing them.
You can do this directly in a method where you import the hmap object, but I created this function and I wanted to use this method by giving the necessary parameters externally.
Code:
private void addMarker(LatLng position, String title, String description)
{
Marker marker;
MarkerOptions marker3Options = new MarkerOptions()
.InvokePosition(position)
.InvokeTitle(title)
.InvokeSnippet(description);
Bitmap bitmap1 = ResourceBitmapDescriptor.DrawableToBitmap(this, ContextCompat.GetDrawable(this, Resource.Drawable.markerblue));
marker3Options.InvokeIcon(BitmapDescriptorFactory.FromBitmap(bitmap1));
marker = hMap.AddMarker(marker3Options);
hMap.MarkerDragStart += OnMarkerDragStart;
hMap.MarkerDrag += OnMarkerDrag;
hMap.MarkerDragEnd += OnMarkerDragEnd;
}
Now let’s see how our additions look on the map
Custom Information Window
When the markers are clicked, we can display custom information messages to inform. let’s see how to do this. First, create a layout for custom info.
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="@color/colorPrimary"
android:orientation="horizontal">
<ImageView
android:id="@+id/customInfoImage"
android:layout_width="45dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:adjustViewBounds="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical">
<TextView
android:id="@+id/customInfoTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textColor="@android:color/white"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="@+id/customInfoDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:ellipsize="end"
android:singleLine="false"
android:maxLines="2"
android:textColor="@android:color/white"
android:textSize="12sp" />
<RatingBar
android:id="@+id/customInfoRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:numStars="5"
android:outlineAmbientShadowColor="@android:color/white"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
</LinearLayout>
Then we add it to the class in which the click event of the marker is triggered.
Code:
hMap.SetInfoWindowAdapter(new CustomMapInfoWindow(this));
public void OnMarkerClick(object sender, HuaweiMap.MarkerClickEventArgs e)
{
Toast.MakeText(this, $"Marker Click Marker ID: {e.P0.Id}", ToastLength.Short).Show();
}
Now let’s see how it looks on map
Shape
With the HMS Core Map SDK, you can add different shapes to a map, including polylines, polygons, and circles. We can use these features for many purposes, such as creating a route between two points, expressing a specific region, or expressing the areas covered by certain regions. So the limit here is your imagination or coverage of your project.
Adding a Polyline
You can use the code block below to draw polyline. You can add as many points as you want for the route and you can give these points dynamically according to the setup of your project.
Code:
private void drawPolyline()
{
Polyline polyline;
PolylineOptions polylineOptions = new PolylineOptions()
.Add(new LatLng(41.03472222, 28.90027778), new LatLng(41.00166667, 28.97111111), new LatLng(41.00415, 29.012449), new LatLng(40.985996056, 29.035333192));
polylineOptions.InvokeColor(Color.Red);
polylineOptions.Clickable(true);
polyline = hMap.AddPolyline(polylineOptions);
}
Adding a Polygon
You can use the code block below to denote a specific region.
Code:
private void drawPolygone()
{
Polygon polygon;
PolygonOptions polygonOptions = new PolygonOptions()
.Add(new LatLng(41.01929, 28.967267), new LatLng(41.016785, 28.986971), new LatLng(41.014623, 28.999753), new LatLng(41.001917, 28.978743), new LatLng(41.002298, 28.954132));
polygonOptions.InvokeFillColor(Color.Argb(60, 255, 200, 0));
polygonOptions.InvokeStrokeColor(Color.Green);
polygonOptions.InvokeStrokeWidth(30);
polygonOptions.Clickable(true);
polygonOptions.InvokeZIndex(2);
polygon = hMap.AddPolygon(polygon1Options);
}
Adding a Circle
Whether a circle is solid or hollow can be controlled by amending the circle attributes. By default, a circle is solid. You can create your apartment by adding the code block below. You can customize many features such as scanning the inside of the circle thickness according to your purpose.
Code:
private void drawCircle()
{
Circle circle;
LatLng circleLatLng = new LatLng(40.985996056, 29.035333192);
CircleOptions circleOptions = new CircleOptions();
circle = hMap.AddCircle(circleOptions);
circleOptions.InvokeCenter(circleLatLng);
circleOptions.InvokeRadius(1800);
circleOptions.InvokeStrokeWidth(5);
circleOptions.InvokeStrokeColor(Color.Blue);
circleOptions.InvokeStrokeWidth(30);
circleOptions.Clickable(true);
circleOptions.InvokeZIndex(2);
circle = hMap.AddCircle(circleOptions);
circleOptions.Clickable(true);
hMap.CircleClick += OnCircleClick;
}
How it looks on map
Final
For any questions, please contact me. I hope this article helped you add Huawei map to your own project and learn how to use it.
Thanks for reading!
References:
Github Link
Docs