Android Mapbox SDK Tutorial to implement a Map

Udemy Generic 728x90

Objective

In this tutorial, we will learn how to implement Map using Android MapBox SDK in an Android Application through a simple example.

 

 
MapView
 

MapBox is a open source map service provider. MapBox provides vector map library for Android. Vector Map is a collection of geographic information system. It provides street level map and also provides shape of building, lines of park or garden and more details. Using MapBox, we can load a map, place a pin on it, and also change the map style. Mapbox provides some features like zooming and rotating on small screens.

In this tutorial, we will explain how to integrate MapBox SDK with our Android application. To add map in application, we need to create an account on MapBox Studio and create a new token for every app that uses MapBox services such as maps and directions and its API. We will track usage and minimize disruption  with the help of a token.

 

Step 2

Create a New project

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.

 

Step 3

Create a New Access Token

To integrate Mapbox SDK with our Android application, we need to create a new token. To create a new token, follow these steps:

  • Login to MapBox Studio and click on Account tab to open your account page.

     

    account page

     
  • Click on the API access tokens tab in MapBox dashboard.

     

    profile mapbox

     
  • You will see a default token is already generated. You can use this access token to integrate application with MapBox but if you want to set custom scopes then we need to create a new token. Every access token has permission to make certain types of request to MapBox API. These permissions are termed as scopes.

     

    default access token

     
  • When we create a token, we have an option to set public and private scopes. So, click on Create a new token button to create a new token. This will open a form with various scope options. Fill token name in the input field and set scopes and finally click on Generate button to create a new token.
     
    new access token

     
  • If you added secret scope, then copy token before refreshing the page or logging out of MapBox Studio because you will not able to see API access token again.
     
    numetriclabz api token

     

 

Step 4

Add Token in Android Project

To integrate android application with MapBox Studio, we need to use MapBox token. So, add token in string.xml file of the /res/values directory of Android project.

<string name="accessToken">sk.eY3UifQ.hX2MliNRGJ3Byxxxxxxxxxxx</string>

 

Step 5

Add MapBox SDK as Dependency

To use MapBox API, we need to add MapBox SDK in our project. So, open your build.gradle(app module) file and add MapBox SDK as dependencies.

dependencies {
  .....
    compile ('com.mapbox.mapboxsdk:mapbox-android-sdk:3.2.0@aar'){
        transitive=true
    }
  ......
}

 

Step 6

Add Internet Permission

Our Android application will use MapBox API to display map of a given location. So, it needs to request Internet permission from the user. Add the following code to set Internet permission:

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

 

Step 7

Create Layout

To add the MapView as a layout element, we need to use com.mapbox.mapboxsdk.views.MapView tag in the activity.xml file.

<com.mapbox.mapboxsdk.views.MapView
    android:id="@+id/mapview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    mapbox:access_token="@string/accessToken"/>

 

Step 8

Initialize MapView object

To add Map view in Android application, we need to initialize the MapView object in MainActivity.java file.

public class MainActivity extends AppCompatActivity {

    MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /** Initialze a mapView  */
        mapView = (MapView) findViewById(R.id.mapview);
    }
}

 

Step 9

Add Custom Style

MapView class provides different styles that can be set as map style. It provides four professional styles:

  • Mapbox Streets: Roads are one of the most important features of this style. This feature is useful while driving and walking to see destination by road.
  • Emerald: This style is used for transportation and outdoor terrain.
  • Satellite and Satellite Streets: It provides up to date map via satellite.
  • Light and Dark: Using this style is used to display map without any color.

In this example, we are using Mapbox Streets by calling calling MapView.setStyleUrl() method.

// set MapBox streets style.
mapView.setStyleUrl(Style.MAPBOX_STREETS);

 

Step 10

Set Location

We will display a location on the map. So, we need to use CameraPosition.Builder() object, to set location’s latitude and longitude. To set location, we need to call target() method and pass the LatLng object with latitude and longitude. We can add zoom feature by calling zoom() method.

CameraPosition cameraPosition = new CameraPosition.Builder()
        .target(new LatLng(41.885, -87.679)) // Sets the center of the map to Chicago
        .zoom(11)                            // enable zoom feature
        .build();

 

Step 11

Enable Rotation of Map view

We will enable rotation of Map view by calling moveCamera() method.

// enable rotation
mapView.moveCamera(CameraUpdateFactory
                .newCameraPosition(cameraPosition));

 

Step 12

Set Location

To create MapView user interface in Android application, we need to call onCreate() method of MapView object.

mapView.onCreate(savedInstanceState);

 

Step 12

Handle MapView on Activity Lifecycle method

We need to handle map events on resume, start, pause, stop and destroy that might affect our app.

    /**
     * Called when the system is about to start resuming a previous activity.
     */
    @Override
    public void onPause()  {
        super.onPause();
        mapView.onPause();
    }

    /**
     * Called when the activity will start interacting with the use
     */
    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    /**
     * The final call you receive before your activity is destroyed.
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

 

Step 13

Final code

Run your app and you will able to see map on the screen of Android Application. Here is final code:

public class MainActivity extends AppCompatActivity {

    MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Create a mapView and give it some properties.
        mapView = (MapView) findViewById(R.id.mapview);

        // set MapBox streets style.
        mapView.setStyleUrl(Style.MAPBOX_STREETS);

        CameraPosition cameraPosition = new CameraPosition.Builder()
                .target(new LatLng(41.885, -87.679)) // Sets the center of the map to Chicago
                .zoom(11)                            // Sets the zoom
                .build();

        mapView.moveCamera(CameraUpdateFactory
                .newCameraPosition(cameraPosition));

        mapView.onCreate(savedInstanceState);
    }

    /**
     * Called when the activity is becoming visible to the user.
     */
    @Override
    protected void onStart() {
        super.onStart();
        mapView.onStart();
    }

    /**
     * Called when the activity is no longer visible to the user, because another activity has been resumed
     */
    @Override
    protected void onStop() {
        super.onStop();
        mapView.onStop();
    }

    /**
     * Called when the system is about to start resuming a previous activity.
     */
    @Override
    public void onPause()  {
        super.onPause();
        mapView.onPause();
    }

    /**
     * Called when the activity will start interacting with the use
     */
    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    /**
     * The final call you receive before your activity is destroyed.
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

}

MapView
 

 

Udemy Generic 728x90

Spread the word. Share this post!

  • Guest

    Is there any map sdk thta show poi? (especialy shops around users ?)

  • ay

    hey, thanks for this tutorial. How can i get the marker current position as an input inside a textfield . Thanks

  • HemaNandhini

    Thank you so much working super