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.

Menu for Creating new project

• Click Add Project.

Adding new project.

• Set project name and click OK.

Project name sets.

We crated our project successfully.Now need to add Application.

• Go to project and lick Add App.

Adding application inside Project.

• Fill up fields accordingly and click OK.

Later we will use app name and package name during creating project in android studio.

New app specs.

• After APP created successfully, click Manage APIs

Managing created API’s attributes.

• Be sure that MAP kit is enabled.

Enabling the kit which will be used.

• Go to Convention Page and download agconnect-service.json file and save it. Later we will use this file to generate SHA-256 key.

Downloading agconnect-service.json file.

• Open Android Studio and create a New Project with Empty Activity.

Create project in android studio with empty activity.

• Fill project requirements accordingly. Name and package must be same with our API which we created previously in APP Gallery.

Configuring project in android studio tool.

• Move previously downloaded agconnect-service.json file under app folder.

Moving 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.

Gradle files descriptions.

• 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'
}

Sync gradle files

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.

Genera SHA-256 through Android Studio.

• Copy SHA-256 value and past it APP Gallery Connect > SHA-256 certificate fingerprint area and save.

Paste SHA-256 value in APP Gallery Connect page.

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>

Layout design for map view.

• 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();
    }
}

Main activity code view for map view.

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.

Test App view.

Thanks for you have read this article.

I hope it will be helpful.

Hope to see you in next articles.

Until that time, bye.