Implement HMS Map Kit and Add Marker in Java
Let’s start to explain how to implement HUAWEI HMS MAP kit.
General view for this article is as below:
- First, we will mention about first preparation before start implement.
- Second,we will create android project in Android studio and implement HMS Map Kit requirements and observe map view is working.
- Third, we will look at what is MVP design pattern.
- Fourth, we will add marker function on map by using MVP way.
Preparation Before Start to Implement
Before starting development in HMS, need to have some priorities. Such as how to login as developer role, steps to create application etc.. As much as simple, i will try to explain all the steps.
- 1–) As first priority, need to create developer account. Click Huawei Developer and select console on top-right and create and account accordingly based on instructions.
- 2-) After creating developer account, we are ready to create project and application inside project. See details…
- 3-) HMS Core and HMS SDK uses SHA-256 cipher suites for hand-shake.Generate SHA-256 fingerprint and set this key inside our already created application. If both side keys match, then core kits can be active to using. See details to create this key and set inside app.
NOTE:These preparation steps must be done for each API.
Create Project in APP Gallery
- Go to APP Gallery and click My Projects.
- Click Add Project.
- Set project name and click OK.
We crated our project successfully.Now need to add Application.
- Go to project and lick Add App.
- Fill up fields accordingly and click OK.
Later we will use app name and package name during creating project in android studio.
- After APP created successfully, click Manage APIs
- Be sure that MAP kit is enabled.
- Go to Convention Page and download agconnect-service.json file and save it. Later we will use this file to generate SHA-256 key.
- Open Android Studio and create a New Project with Empty Activity.
- Fill project requirements accordingly. Name and package must be same with our API which we created previously in APP Gallery.
- Move previously downloaded agconnect-service.json file under app folder.
- Our project has dependency to APP Gallery. Because we will use HMS Map Kit.To use this kit, we need add dependencies into gradle files. There are 2 kinds of gradle files are exist in Android Studio. The file which settles under project’s root level, keeps and sync repo level configurations. The file which settles under app level, keeps and sync frameworks level configurations.
- Adding dependencies into root level gradle file.
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.4.1'
classpath 'com.huawei.agconnect:agcp:1.0.0.300'
}
}
allprojects {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' }
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
- Adding dependencies into app level gradle file and click Sync Now . Sync must be finish with success.
- Below dependency is for HMS Map Kit
implementation 'com.huawei.hms:maps:4.0.1.301'
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
android {
compileSdkVersion 28
buildToolsVersion "29.0.2"
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
defaultConfig {
applicationId "com.marketwithmvponmap"
minSdkVersion 19
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
dependencies {
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
implementation 'com.huawei.hms:maps:4.0.1.301'
}
Since now we created project on Huawei Developer Console and application inside project. Later on we created project in Android Studio and add dependencies. Now we must create SHA-256 finger-print .Either we can do this in cmd screen or directly from Android Studio.
- Create SHA-256 finger-print on Android Studio.
- Copy SHA-256 value and past it APP Gallery Connect > SHA-256 certificate fingerprint area and save.
Now we are ready to start coding. We created project in APP Gallery and Application inside that project. Later on we created same project in Android Studio and create SHA-256 finger-print and saved this key in APP Gallery page.
- Let’s add SupportMapFragment compoenent into Layout/.xml file.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<fragment
android:id="@+id/map"
android:name="com.huawei.hms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
- Activity codes for map view
package com.marketwithmvponmap;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.huawei.hms.maps.HuaweiMap;
import com.huawei.hms.maps.OnMapReadyCallback;
import com.huawei.hms.maps.SupportMapFragment;
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback,HuaweiMap.OnMyLocationButtonClickListener {
private SupportMapFragment mSupportMapFragment;
private HuaweiMap hMap;
private static final String TAG = "Map";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSupportMapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
mSupportMapFragment.getMapAsync(this);
}
@Override
public void onMapReady(HuaweiMap huaweiMap) {
hMap = huaweiMap;
hMap.setMyLocationEnabled(true);
hMap.setOnMyLocationButtonClickListener(this);
}
@Override
public boolean onMyLocationButtonClick() {
return false;
}
@Override
protected void onDestroy() {
super.onDestroy();
}
@Override
protected void onStop() {
super.onStop();
}
@Override
protected void onPause() {
super.onPause();
}
@Override
protected void onResume() {
super.onResume();
}
@Override
protected void onStart() {
super.onStart();
}
}
Implement Marker Function onto Map with MVP
- Model
package com.marketwithmvponmap.Marker.Model;
import com.huawei.hms.maps.model.LatLng;
public interface IMarker
{
String title();
LatLng position();
}package com.marketwithmvponmap.Marker.Model;
import com.huawei.hms.maps.model.LatLng;
public class Marker implements IMarker {
private String title;
private LatLng position;
public Marker(String title, LatLng position) {
this.title = title;
this.position = position;
}
@Override
public String title() {
return title;
}
@Override
public LatLng position() {
return position;
}
}
- View
package com.marketwithmvponmap.Marker.View;
import com.huawei.hms.maps.model.LatLng;
public interface iMarkerView {
void onMarkerResult(String title, LatLng position);
}
- Presenter
package com.marketwithmvponmap.Marker.Presenter;
import android.util.Log;
import com.huawei.hms.maps.model.LatLng;
import com.marketwithmvponmap.Marker.Model.Marker;
import com.marketwithmvponmap.Marker.View.iMarkerView;
public class MarkerPresenter implements IMarkerPresenter {
private static final String TAG = "MarkerPresenter";
iMarkerView iMarkerView;
public MarkerPresenter(com.marketwithmvponmap.Marker.View.iMarkerView iMarkerView) {
this.iMarkerView = iMarkerView;
}
@Override
public void onSetMarker(String title, LatLng position) {
if(title == null || position == null)
{
Log.i(TAG,"Null values for marker attributes "+title+position.toString());
}
else {
Marker marker = new Marker(title, position);
iMarkerView.onMarkerResult(title, position);
}
}
}package com.marketwithmvponmap.Marker.Presenter;
import com.huawei.hms.maps.model.LatLng;
public interface IMarkerPresenter {
void onSetMarker(String title, LatLng position);
}
We have created our MVP logic. Now need to use this logic in our main activity.
package com.marketwithmvponmap;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.huawei.hms.maps.CameraUpdateFactory;
import com.huawei.hms.maps.HuaweiMap;
import com.huawei.hms.maps.OnMapReadyCallback;
import com.huawei.hms.maps.SupportMapFragment;
import com.huawei.hms.maps.model.LatLng;
import com.huawei.hms.maps.model.Marker;
import com.huawei.hms.maps.model.MarkerOptions;
import com.huawei.hms.maps.model.VisibleRegion;
import com.huawei.hms.maps.util.LogM;
import com.marketwithmvponmap.Marker.Presenter.IMarkerPresenter;
import com.marketwithmvponmap.Marker.Presenter.MarkerPresenter;
import com.marketwithmvponmap.Marker.View.iMarkerView;
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback,HuaweiMap.OnMyLocationButtonClickListener ,HuaweiMap.OnMapClickListener,iMarkerView{
private SupportMapFragment mSupportMapFragment;
private HuaweiMap hMap;
//Marker interface define
IMarkerPresenter iMarkerPresenter;
private static final String TAG = "Map";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSupportMapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
mSupportMapFragment.getMapAsync(this);
}
@Override
public void onMapReady(HuaweiMap huaweiMap) {
hMap = huaweiMap;
hMap.setOnMapClickListener(this);
hMap.setMyLocationEnabled(true);
hMap.setOnMyLocationButtonClickListener(this);
}
@Override
public boolean onMyLocationButtonClick() {
return false;
}
@Override
protected void onDestroy() {
super.onDestroy();
}
@Override
protected void onStop() {
super.onStop();
}
@Override
protected void onPause() {
super.onPause();
}
@Override
protected void onResume() {
super.onResume();
}
@Override
protected void onStart() {
super.onStart();
}
@Override
public void onMapClick(LatLng latLng) {
iMarkerPresenter=new MarkerPresenter( this);
iMarkerPresenter.onSetMarker(latLng.latitude+ "," + latLng.longitude,latLng);
VisibleRegion visibleRegion = hMap.getProjection().getVisibleRegion();
LogM.i(TAG, visibleRegion.toString());
}
@Override
public void onMarkerResult(String title, LatLng position) {
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(position);
// Setting the title for the marker.
// This will be displayed on taping the marker
markerOptions.title(title);
// Clears the previously touched position
hMap.clear();
// Animating to the touched position
hMap.animateCamera(CameraUpdateFactory.newLatLng(position));
// Placing a marker on the touched position
hMap.addMarker(markerOptions);
}
}
Finally we need to add required permissions in our manifest file. See details.
Now we can run our application.
Thanks for you have read this article.
I hope it will be helpful.
Hope to see you in next articles.
Until that time, bye.