Hands on

Placing Markers on a Map in Android with HERE

By Nic Raboy | 04 December 2018

About a week ago I had written a tutorial for including a HERE map within your Android mobile application in the form of an Android Fragment. While that tutorial was a basic getting started guide, it left more to be desired in terms of what you can do with an interactive map component.

We’re going to continue our mapping adventure and explore dropping map markers using both custom marker images as well as default marker images in an Android with Java application.

To get an idea of what we want to accomplish, check out the following image:

android-map-markers

In the above image, you’ll notice that there are two different markers. One marker is what you’d expect because it is a globally recognizable indicator for modern maps. The other marker is a picture of me. There are scenarios where you might want to use either the default marker image or something custom like I did.

Showing Markers with Default or Custom Images

Rather than going through the process of configuring an Android application to use the HERE Android SDK, as previously demonstrated in my tutorial titled, Getting Started with HERE Maps in an Android Application, we’re going to focus strictly on the marker aspect of things. If you are stuck with getting up and running with a HERE map, I suggest checking out my previous tutorial.

Let’s start with the basics. If you’ve set up your project and are displaying a map, you probably have something that looks like the following:

package com.example.raboy.map_project;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

import com.here.android.mpa.common.GeoCoordinate;
import com.here.android.mpa.common.Image;
import com.here.android.mpa.common.OnEngineInitListener;
import com.here.android.mpa.mapping.Map;
import com.here.android.mpa.mapping.MapFragment;
import com.here.android.mpa.mapping.MapMarker;

public class MainActivity extends AppCompatActivity {

    private Map map = null;
    private MapFragment mapFragment = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mapFragment = (MapFragment) getFragmentManager().findFragmentById(R.id.mapfragment);

        mapFragment.init(new OnEngineInitListener() {
            @Override
            public void onEngineInitializationCompleted(OnEngineInitListener.Error error) {
                if (error == OnEngineInitListener.Error.NONE) {
                    map = mapFragment.getMap();
                    map.setCenter(new GeoCoordinate(37.7397, -121.4252, 0.0), Map.Animation.NONE);
                    map.setZoomLevel((map.getMaxZoomLevel() + map.getMinZoomLevel()) / 2);
                }
            }
        });
    }


}

In the above code, we are displaying a map and centering on a particular set of latitude and longitude coordinates. When it comes to application logic, the next thing the user might want to see is a marker representing where the map is centered on.

Within the onEngineInitializationCompleted method, add the following:

MapMarker defaultMarker = new MapMarker();
defaultMarker.setCoordinate(new GeoCoordinate(37.7397, -121.4252, 0.0));
map.addMapObject(defaultMarker);

The above marker will have the default blue graphic attached to it. This might be valuable to show the center of the map, which could also be the users actual position. Now there could be other circumstances where you need to place markers that represent certain buildings or objectives.

If you’re a gamer like I am, you might have played Marvel’s Spider-Man on Playstation 4 and recognize that each objective within the game on the fictional map has a different icon. That map and game has no relation to HERE, but you can get an idea of how different marker graphics could be useful. A more realistic example might be a parental tracking application where the marker is the child’s face, so you can see where all your children are. Of course, the examples aren’t limited to the few that I listed.

Find an image that you’d like to use as a marker. Remember to follow the rules when it comes to sizing information for different Android screen densities. When you’ve got your image, you can choose to place it in the app/src/main/res/drawable directory or place various sizes in each of the appropriate directories.

In your Java application, add the following code:

try {
    Image image = new Image();
    image.setImageResource(R.drawable.nraboy);
    MapMarker customMarker = new MapMarker(new GeoCoordinate(37.7397, -121.4252, 0.0), image);
    map.addMapObject(customMarker);
} catch (Exception e) {
    Log.e("HERE", e.getMessage());
}

The above code should go in the onEngineInitializationCompleted method like the other default marker code. This time around I’m getting my drawable image which is named nraboy and I’m using it as the graphic for my marker.

Conclusion

You just saw how to add markers to your HERE map using Android and Java. When it comes to markers, you can use your own custom images or you can use the default marker image that is provided by HERE.

As previously mentioned, if you need help setting up your Android application with the HERE Maps SDK for Android, check out my previous tutorial on the subject.