Huawei Developers
Published in

Huawei Developers

How to integrate Huawei — HMS Map Kit, add marker and draw circle

Hi everyone,

At this tutorial, I will guide you how to integrate HMS Map Kit to the project. And, we will add a marker and draw a circle on the map.

Before the integration, we need to configure app information in AppGallery Connect. Please check these instructions to configure.

After the app configuration, let’s add to the root directory build.gradle

— repositories to configure the Maven repository address for the HMS SDK

— dependencies to add agcp configurations

buildscript {
repositories {
maven { url 'http://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.huawei.agconnect:agcp:1.2.1.301'
}
}

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

At the app directory build.gradle,

— configure build dependencies.

dependencies {
implementation 'com.huawei.hms:maps:4.0.0.302'
}

— And apply for plugin

apply plugin: 'com.huawei.agconnect'

Now, HMS Map Kit is ready to go. Before coding, we need to add permissions to the AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Let’s define our layout as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.huawei.hms.maps.MapView
android:id="@+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
map:mapType="normal"
map:uiCompass="true"
map:uiZoomControls="true"
map:cameraZoom="8.5"/>

</LinearLayout>

We can save this layout as fragment_map.

Now we can define our fragment. We need to implement OnMapReadyCallback to our fragment and call getMapAsync() to register the map callback.

val MAPVIEW_BUNDLE_KEY = "MapViewBundleKey"class MapFragment : Fragment(), OnMapReadyCallback{

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val root = inflater.inflate(R.layout.fragment_map, container, false)
mapView = root.findViewById(R.id.mapView)
var mapViewBundle: Bundle? = null
if (savedInstanceState != null) {
mapViewBundle = savedInstanceState.getBundle(MAPVIEW_BUNDLE_KEY)
}
mapView.onCreate(mapViewBundle)
mapView.getMapAsync(this)

return root
}

Next step, we need to call the onMapReady callback to obtain the HuaweiMap object.

override fun onMapReady(map: HuaweiMap) {
map.isMyLocationEnabled = true
map.uiSettings.isMyLocationButtonEnabled = true
map.uiSettings.isCompassEnabled = true
map.uiSettings.isRotateGesturesEnabled = true
map.uiSettings.isScrollGesturesEnabled = true
map.uiSettings.isScrollGesturesEnabledDuringRotateOrZoom = true
map.uiSettings.isTiltGesturesEnabled = true
map.uiSettings.isZoomControlsEnabled = true
map.uiSettings.isIndoorLevelPickerEnabled = true
map.uiSettings.isMapToolbarEnabled = true
map.uiSettings.isZoomGesturesEnabled = false
map.uiSettings.setAllGesturesEnabled(true)

map.setOnMapLoadedCallback {
Log.d(Constants().LOG_TAG_MAP, "[Map] Loaded.")
}
hMap = map
}

As you can see, we can change map ui settings as we want. Here, we are ready to display map.

Add Circle

Now, let’s add the circle to the map. We need to define circle center point (note* I use my current location latitude and longitude) and circle radius (circle radius must be a meter value). Also, we can define circle strokeWidth and strokeColor as wanted. For more information, please check

private var circle: Circle? = null
private fun addCircle() {
circle?.remove()
circle = hMap
.addCircle(CircleOptions().center(LatLng(40.9702, 29.0706))
.radius(2000.0))
circle?.strokeWidth = 5f
circle?.strokeColor = Color.RED
}

Add Marker

Next step, we will add marker on map. We can define marker’s position, title and snippet. Also, we can use custom images to replace default icons or modify marker attributes to change the marker icons like following.

private fun addMarker(){
hMap.addMarker(
MarkerOptions()
.title("Cinemaximum")
.snippet("Cinema")
.position(LatLng(40.9675909, 29.06499))
.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_movie_filter_red_900_24dp))
)
}

If you want to customize marker info view, please check this tutorial.

In this tutorial, I try to explain how we integrate the HMS Map and add a marker and circle. I hope you found this tutorial helpful and if you have any comments or questions, please let me know in the comments below.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store